Usually this should be used with a small number of children
ListView(
children:
ItemOne(),
ItemTwo(),
ItemThree(),
],
),
ListView.builder is a way of constructing the list where children’s (Widgets) are built on demand
List
body: new ListView.builder
(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int index) {
return new Text(litems[index]);
}
)
The itemCount parameter decides how many times the callback function in itemBuilder will be called.
ListView.separated()
In the separated() constructor, we generate a list and we can specify the separator between each item.
ListView.separated(
itemBuilder: (context, position) {
return ListItem();
},
separatorBuilder: (context, position) {
return SeparatorItem();
},
itemCount: itemCount,
),
List can be Horizontal or Veritical
scrollDirection: Axis.horizontal/ Axis.vertical (default)
FutureBuilder
- What are Future Operations?
Future operations are the operations which take time to perform and return the result later. To handle this problem, we use Asynchronous functions. - Asynchronous Functions
Asynchronous operations let your program continue other operations while the current operation is being performed. Dart uses Future objects (futures) to represent the results of asynchronous operations. To handle these operations, we can use Async/await, but it is not possible to integrate async and await on widgets. So it is quite tricky to handle futures in widgets. To solve this problem flutter provided a widget called Future Builder. - Future Builder
In future builder, it calls the future function to wait for the result, and as soon as it produces the result it calls the builder function where we build the widget.
Example:
FutureBuilder(
builder: (context, projectSnap) {
if (projectSnap.connectionState == ConnectionState.none &&
projectSnap.hasData == null) {
//print('project snapshot data is: ${projectSnap.data}');
return Container();
}
return ListView.builder(
itemCount: projectSnap.data.length,
itemBuilder: (context, index) {
ProjectModel project = projectSnap.data[index];
return Column(
children:
// Widget to display the list of project
],
);
},
);
},
future: getProjectDetails(),
);
AsyncSnapshot has 3 state:
- connectionState.none = In this state future is null.The [AsyncSnapshot.data] will be set to [initialData] unless a future has previously completed, in which case the previous result persists.
- connectionState.waiting = [future] is not null, but has not yet completed. The [AsyncSnapshot.data] will be set to [initialData] unless a future has previously completed, in which case the previous result persists.
- connectionState.done = [future] is not null, and has completed. If the future completed successfully, the [AsyncSnapshot.data] will be set to the value to which the future completed. If it completed with an error, [AsyncSnapshot.hasError] will be true and [AsyncSnapshot.error] will be set to the error object.