When you create a list with async data, you may need the StreamBuilder
1. How to use the stream and StreamController.
there is the Link: https://medium.com/@ayushpguptaapg/using-streams-in-flutter-62fed41662e4
2.create a controller with data
///ToDo need international.
const _MENU_STRINGS = [
{
'title': "Profile",
'items': ["View Profile", "Profile 2", "Profile 3", "Profile 4"]
},
{
'title': "Shopping",
'items': [
"Shopping List",
"Shopping Details",
"Product Details",
"Shopping 4"
]
},
{
'title': "Login",
'items': ["Login With OTP", "Login 2", "Sign Up", "Login 4"],
},
{
'title': "Timeline",
'items': ["Feed", "Tweets", "Timeline 3", "Timeline 4"],
},
{
'title': "Dashboard",
'items': ["Dashboard 1", "Dashboard 2", "Dashboard 3", "Dashboard 4"],
},
{
'title': "Settings",
'items': ["Device Settings", "Settings 2", "Settings 3", "Settings 4"],
},
{
'title': "No Item",
'items': ["No Search Result", "No Internet", "No Item 3", "No Item 4"],
},
{
'title': "Payment",
'items': ["Credit Card", "Payment Success", "Payment 3", "Payment 4"],
},
];
const _MENU_COLORS = [
0xff050505,
0xffc8c4bd,
0xffc7d8f4,
0xff7f5741,
0xff261d33,
0xff2a8ccf,
0xffe19b6b,
0xffe19b6b,
0xffddcec2
];
const _MENU_ICONS = [
Icons.person,
Icons.shopping_cart,
Icons.send,
Icons.timeline,
Icons.dashboard,
Icons.settings,
Icons.not_interested,
Icons.payment,
];
const _IMAGE_PATHS = [
ImagePath.shoppingImage,
ImagePath.profileImage,
ImagePath.loginImage,
ImagePath.timelineImage,
ImagePath.dashboardImage,
ImagePath.settingsImage,
ImagePath.blankImage,
ImagePath.paymentImage,
];
class MenuController {
final controller = StreamController<List<Menu>>();
Stream<List<Menu>> get menuItems => controller.stream;
MenuController({List<Menu> menus}) {
controller.add(menus ?? _defaultMenus());
}
static String _title(index) {
return _MENU_STRINGS[index % _MENU_STRINGS.length]['title'];
}
static List<String> _items(index) {
return _MENU_STRINGS[index % _MENU_STRINGS.length]['items'];
}
List<Menu> _defaultMenus() {
var list = List<Menu>();
for (int i = 0; i < _MENU_STRINGS.length; i++) {
list.add(Menu(
title: _title(i),
icon: _MENU_ICONS[i],
menuColor: Color(_MENU_COLORS[i]),
image: _IMAGE_PATHS[i],
items: _items(i)));
}
return list;
}
}
3. Use the StreamBuilder
Widget _streamBuild() {
var controller = MenuController();
return StreamBuilder(
builder: (context, shot) {
return shot.hasData
? CustomScrollView(
slivers: <Widget>[_topBar(), _gridView(shot.data)],
)
: Center(
child: CircularProgressIndicator(),
);
},
stream: controller.menuItems,
);
}
you can see the StreamBuilder hold and listen to data for complying the async purpose. You can use the Future, but this is convenience.
Whole project: https://github.com/nb312/flutter_ui_app