ListView lags after image loads
289 views
Skip to first unread message
Yak de Dev
Aug 14, 2021, 3:54:21 AM8/14/21
to Flutter Development (flutter-dev)
Hi please can anyone help me out here am not that experience with flutter
class ArticleScreen extends StatefulWidget {
@override
_ArticleScreenState createState() => _ArticleScreenState();
}
class _ArticleScreenState extends State<ArticleScreen> {
List<Article> _articles = articles;
bool _initialized = false;
bool _error = false;
void _assignArticle(BuildContext context) async {
if (Provider.of<ArticleModel>(context).error) {
setState(() {
_error = true;
});
return;
}
if (Provider.of<ArticleModel>(context).items.isEmpty) {
return;
}
setState(() {
_articles = Provider.of<ArticleModel>(context).items;
_initialized = true;
});
}
@override
Widget build(BuildContext context) {
_assignArticle(context);
return _initialized && !_error
? Resposive(
mobile: new ListView.builder(
physics: const ClampingScrollPhysics(),
itemCount: _articles.length,
itemBuilder: (context, index) {
return _buildListItem(context, _articles[index], index);
}),
tablet: new GridView.builder(
itemCount: _articles.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return _buildListItem(context, _articles[index], index);
}))
: Loading(
loading: _error,
onTry: _onTry(context),
);
}
Widget _buildListItem(BuildContext context, Article article, int index) {
return GestureDetector(
onTap: () => _articleNavigate(context, article),
child: Card(
key: Key(index.toString()),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
clipBehavior: Clip.antiAlias,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
converter(article.date),
style: Theme.of(context).textTheme.overline,
),
Text(article.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline6),
const SizedBox(height: 8.0),
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: CachedNetworkImage(imageUrl: article.imgUrl)),
SizedBox(
height: 8.0,
),
Text(
article.message,
overflow: TextOverflow.ellipsis,
maxLines: 3,
softWrap: true,
style: Theme.of(context).textTheme.caption,
),
SizedBox(
height: 8.0,
),
Text(article.from,
style: Theme.of(context).textTheme.subtitle2,
softWrap: false,
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right),
],
),
)),
);
}
_onTry(BuildContext context) async {
// update = Provider.of<ArticleModel>(context).updateArticle();
print("Trying Again Clicked");
Provider.of<ArticleModel>(context).updateArticle();
_assignArticle(context);
}
void _articleNavigate(BuildContext context, Article article) {
Navigator.push(
context, MaterialPageRoute(builder: (context) => DetailPage(article)));
}
}
Santosh Das
Aug 20, 2021, 12:36:57 AM8/20/21
to Flutter Development (flutter-dev)
in your code
please give a fixed size to your Cached Network image and a placeholder to fulfill that space.
or user ListView() other than ListView.builder(
Reason:
as ListView.builder
creates child when they appear on the screen the list's entire length will dynamically change, this is hampering and shows you some jank
please give a fixed size to your Cached Network image and a placeholder to fulfill that space.
or user ListView() other than ListView.builder(
Reason:
as ListView.builder
creates child when they appear on the screen the list's entire length will dynamically change, this is hampering and shows you some jank
Reply all
Reply to author
Forward
0 new messages