Flutter Navigation is not smooth, taking time to open next screen - flutter

Question

I've a Quiz app which load text from a List of String class using ListViewBuilder. When i click on a category the question list is taking time to open 3-4 seconds. Here question in QuestionCategory is one for demo purpose. In real app it has 200+ question and the Navigation problem comes where question list is around more than 100+. The related question is already asked but the there is no proper solution for this.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:himachal_gk/Model/question_model.dart';
import 'package:himachal_gk/Widget/style_widgets.dart';
import '../../../Ads/GoogleAds.dart';
import 'category_question.dart';
class CategoryWiseScreen extends StatelessWidget {
const CategoryWiseScreen({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
var category = [
'River',
// 'Books',
];
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
title: const Text("Category Wise GK"),
actions: [
IconButton(
onPressed: () {
Navigator.of(context).pushNamed('/Favorite');
},
icon: const Icon(Icons.favorite_border_rounded))
],
),
bottomNavigationBar: GoogleAds.getBottomBannerAd(context),
body: AnimationLimiter(
child: ListView.builder(
cacheExtent: 9999999,
itemCount: category.length,
itemBuilder: (context, index) {
return AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 375),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: Column(
children: <Widget>[
SubCategoryTiles(
categoryIcon: Icons.school,
titleText: Center(
child: Text(
category[index],
style: headingTextStyle,
textAlign: TextAlign.center,
),
),
onTapHandler: () {
if (index == 0) {
List<QuestionCategory> questionCategory = [
QuestionCategory(
question:
'How many rivers are there in Himachal Pradesh',
correctAnswer: 'Five'),
];
Navigator.push(
context,
CupertinoPageRoute(
builder: ((context) => CategoryQuestion(
title: category[index],
questionCategory: questionCategory,
)),
),
);
}
},
),
const Divider(),
],
),
),
),
);
},
),
),
);
}
}
Here is SubCategoryTiles code we have used in above code.
import 'package:flutter/material.dart';
class SubCategoryTiles extends StatelessWidget {
const SubCategoryTiles({
Key? key,
required this.titleText,
required this.onTapHandler,
required this.categoryIcon,
}) : super(key: key);
final Widget titleText;
final VoidCallback onTapHandler;
final IconData categoryIcon;
#override
Widget build(BuildContext context) {
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
categoryIcon,
size: 30,
),
),
title: titleText,
trailing: const Icon(Icons.arrow_right),
onTap: onTapHandler,
);
}
}

Answer 1

This is a performance issue. This is caused by two things in your case. First, you are loading heavy data while on a Navigation call. I will advise using initState or an async functionenter code here to call data before pushing to any screen.
List<QuestionCategory> questionCategory = [
QuestionCategory(
question: 'How many rivers are there in Himachal Pradesh',
correctAnswer: 'Five',
),
];
The above shows, you are calling within onTapHandler the same function that pushes to a new screen. In the live app, the Navigation will take time as it has to wait for data to fill in the questionCategory .