showModalBottomSheet

Shows a modal material design bottom sheet.

A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.

A closely related widget is a persistent bottom sheet, which shows information that supplements the primary content of the app without preventing the use from interacting with the app. Persistent bottom sheets can be created and displayed with the showBottomSheet function or the ScaffoldState.showBottomSheet method.

Example :

    Scaffold(

      appBarAppBar(

        titleconst Text("Test"),

      ),

      bodyIconButton(

        iconconst Icon(Icons.arrow_upward),

        onPressed: () {

          showModalBottomSheet(

              contextcontext,

              builder: (ctx) {

                return Column(

                  mainAxisAlignmentMainAxisAlignment.center,

                  childrenconst [

                    Center(childText("This a bottom sheet !!")),

                    Icon(Icons.shutter_speed_outlined)

                  ],

                );

              });

        },

      ),

    );




showModalBottomSheet Flutter

Note :

The bottom sheet is a StateLessWidget hence we can not call setState or change state inside that.

To fix this, we can wrap the Container inside the bottomModalSheet with a StateFullBuilder then we can call setState inside the bottomModelSheet.




Exercise :

Try to do this using FloatingActionButton, StatefulBuilder, showModalBottomSheet, TextField, DropdownButton and TextButton.





The Solution :

import 'package:flutter/material.dart';

 

void main() {

  runApp(const MyApp());

}

 

class MyApp extends StatelessWidget {

  const MyApp({Keykey}) : super(keykey);

 

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title'Hi!',

      debugShowCheckedModeBannerfalse,

      themeThemeData(

        primarySwatchColors.blue,

      ),

      homeconst MyHomePage(),

    );

  }

}

 

class MyHomePage extends StatefulWidget {

  const MyHomePage({Keykey}) : super(keykey);

 

  @override

  _MyHomePageState createState() => _MyHomePageState();

}

 

class _MyHomePageState extends State<MyHomePage> {

  final List<Color_colors = [

    Colors.green,

    Colors.red,

    Colors.blue,

    Colors.pink,

    Colors.orange,

    Colors.yellow,

    Colors.black

  ];

  String _name = "My Name";

  late TextEditingController _nameController;

  Color _color = Colors.black;

  @override

  void initState() {

    _nameController = TextEditingController();

    super.initState();

  }

 

  @override

  void dispose() {

    _nameController.dispose();

    super.dispose();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBarAppBar(

        titleconst Text("Hi!"),

      ),

      bodyCenter(

        childColumn(

          children: [

            const SizedBox(

              height50,

            ),

            CircleAvatar(

                backgroundColor_color,

                radius50,

                childconst Icon(

                  Icons.person,

                  size50,

                )),

            Text(

              _name,

              styleTextStyle(fontSize35color_color),

            )

          ],

        ),

      ),

      floatingActionButtonFloatingActionButton(

        childconst Icon(Icons.edit),

        onPressed: () {

          showModalBottomSheet(

              contextcontext,

              builder: (context) {

                return StatefulBuilder(

                  builder: (ctxsetS) {

                    return Padding(

                      paddingconst EdgeInsets.all(15.0),

                      childColumn(

                        children: [

                          TextField(

                            controller_nameController,

                            decoration:

                                const InputDecoration(labelText"Name"),

                          ),

                          Row(

                            children: [

                              const Text("Color : "),

                              DropdownButton(

                                value_color,

                                iconconst Icon(Icons.arrow_downward),

                                onChanged: (Colorc) {

                                  setState(() {

                                    _color = c!;

                                  });

                                  setS(() {

                                    _color = c!;

                                  });

                                },

                                items_colors

                                    .map<DropdownMenuItem<Color>>((Color c) {

                                  return DropdownMenuItem<Color>(

                                    valuec,

                                    childContainer(

                                      colorc,

                                      width60,

                                      height20,

                                    ),

                                  );

                                }).toList(),

                              )

                            ],

                          ),

                          TextButton(

                              onPressed: () {

                                setState(() {

                                  _name = _nameController.text;

                                  Navigator.of(context).pop();

                                });

                              },

                              childconst Text("Update"))

                        ],

                      ),

                    );

                  },

                );

              });

        },

      ),

    );

  }

}