Questions And Answers

More Tutorials

Flutter Builders

The term closure is just another name for a lambda function, an anonymous method.
So, builder is really a lambda that acts similarly to the Widget’s build method:
You pass it a BuildContext and any other variables you need to.
It returns a Widget.

How Do You Use a Builder?

Instead of passing a Widget back from your build method, instead you pass back an anonymous builder function that takes whatever
parameters are required (including the BuildContext) and spits out a Widget.

Nested Builders

You can nest builders inside builders and this (although sometimes complicated) works very well. There is an example in this Chapter
called ‘Multiple Builders’, which uses nested builders.

Common Builders

We will cover this builder in the Animations chapter.
GridView Builder
Similar to the ListView builder. Quite often you will end up with large dynamic data grids and you need to display them onscreen using a
Grid, even though the user may not scroll all the way to the bottom.

If you simply add a Widget for each item in the grid, you end up with a huge amount of child Widgets, most of which will never be seen. This is not efficient.

This is where the GridView builder comes in. When the user scrolls down through the grid, the GridView builder is invoked to create the
child widgets when they are needed, not ahead of time. Much more efficient.

You write a GridView builder and specify it to the GridView in the ‘itemBuilder’ argument in the constructor. In the builder method, you
accept BuildContext and index arguments and you spit out a Widget.

This is perfect if your data is held in array – all you do is get the data for that item from the array using that index.
There is an example in this Chapter called ‘Multiple Builders’. It uses the GridView builder, amongst other builders!


FutureBuilder is a widget that returns another widget based on the Future’s execution result. It serves as a bridge between Futures and the widget’s UI.

Example – ‘future_builder_app’

This app uses a FutureBuilder to calculates a bunch of timestamps using a Future computation and display it. The screen is blank for a
few seconds then it displays a list of times. It’s not terribly pretty!

Source Code:

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Future Builder App',
theme: new ThemeData(
home: new HomeWidget(),
class HomeWidget extends StatefulWidget {
String computeListOfTimestamps(int count) {
StringBuffer sb = new StringBuffer();
for (int i = 0; i < count; i++) {
sb.writeln("${i + 1} : ${}");
return sb.toString();
Future<String> createFutureCalculation(int count) {
return new Future(() {
return computeListOfTimestamps(count);
HomeWidget({Key key}) : super(key: key);
_HomeWidgetState createState() => new _HomeWidgetState();
class _HomeWidgetState extends State<HomeWidget> {
bool _showCalculation = false;
void _onInvokeFuturePressed() {
setState(() {
_showCalculation = !_showCalculation;
Widget build(BuildContext context) {
Widget child = _showCalculation
? FutureBuilder(
future: widget.createFutureCalculation(10000),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return Expanded(
child: SingleChildScrollView(
child: Text(
'${ == null ? "" :}',
style: TextStyle(fontSize: 20.0))));
: Text('hit the button to show calculation');
return new Scaffold(
appBar: new AppBar(
title: new Text("Future"),
body: new Center(
child: new Column(
children: <Widget>[child])),
floatingActionButton: new FloatingActionButton(
onPressed: _onInvokeFuturePressed,
tooltip: 'Invoke Future',
child: new Icon(Icons.refresh),
), // This trailing comma makes auto-formatting nicer for build methods.


In this page (written and validated by ) you learned about Flutter Builders . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter Routing & Navigation.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.