Flutter Builder & FutureBuilder Components

Builder Components

Builder Components act as closures , You can limit the scope of use .

problem

class BuilderPage extends StatelessWidget {
    const BuilderPage({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text("Builder Components "),
            ),
            body: Center(
                child: RaisedButton(
                    color: Colors.red,
                    textColor: Colors.white,
                    onPressed: () {
                        showSnackBar(context);
                    },
                    child: const Text('show SnackBar'),
                ),
            ),
        );
    }

    showSnackBar(BuildContext context) {
        const snackBar = SnackBar(content: Text(' Lao Meng '));
        Scaffold.of(context).showSnackBar(snackBar);
    }
}

After clicking the button , An exception message will be prompted ：Scaffold.of() called with a context that does not contain a Scaffold..

This is because you sent in BuildContext It is the present. parent Widget Of , No Scaffold Of , So there's an error .

solve

Can use Builder Component solving .

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("Builder Components "),
        ),
        body: Builder(
            builder: (context) {
                return Center(
                    child: RaisedButton(
                        color: Colors.red,
                        textColor: Colors.white,
                        onPressed: () {
                            showSnackBar(context);
                        },
                        child: const Text('show SnackBar'),
                    ),
                );
            }
        ),
    );
}

FutureBuilder Components

Show asynchronous task status , When you have one Future When an asynchronous task needs to be presented to the user , have access to FutureBuilder Component to implement .

final Future<String> _futureSuccess = Future.delayed(const Duration(seconds: 3), () {
    return " succeed ";
});
final Future<dynamic> _futureError = Future.delayed(const Duration(seconds: 3), () {
    return Future.error(" failed ");
});
String _msg = " Loading ";
String _msg2 = " Loading ";

FutureBuilder(
    future: _futureSuccess,
    builder: (context, snapshot) {
        late Widget widget;
        if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
                widget = const Icon(Icons.error, color: Colors.red, size: 50);
                _msg = snapshot.error.toString();
            } else {
                widget = const Icon(Icons.check_circle, color: Colors.green, size: 50);
                _msg = snapshot.data.toString();
            }
        } else {
            widget = const CircularProgressIndicator();
            _msg = " Loading ";
        }
        return Container(
            height: 100,
            width: 100,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: const BorderRadius.all(Radius.circular(10)),
            ),
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                    children: [
                        widget,
                        Text(_msg),
                    ],
                ),
            ),
        );
    },
),
FutureBuilder(
    future: _futureError,
    builder: (context, snapshot) {
        late Widget widget;
        if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
                widget = const Icon(Icons.error, color: Colors.red, size: 50);
                _msg2 = snapshot.error.toString();
            } else {
                widget = const Icon(Icons.check_circle, color: Colors.green, size: 50);
                _msg2 = snapshot.data.toString();
            }
        } else {
            widget = const CircularProgressIndicator();
            _msg2 = " Loading ";
        }
        return Container(
            height: 100,
            width: 100,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: const BorderRadius.all(Radius.circular(10)),
            ),
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                    children: [
                        widget,
                        Text(_msg2),
                    ],
                ),
            ),
        );
    },
)