Show BottomSheet Dialog On Screen Load - Flutter

Last updated Jan 19, 2021


We all know how to create and show BottomSheet in Flutter, But how to show it on the screen load?

In this post we will learn how to show BottomSheet Dialog on Screen load.

 

What is Bottom Sheet?

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

Bottom Sheet window will show over on the current screen.

 

How to create a Bottom Sheet?

To create a bottom sheet we will use the showBottomSheet widget

 

void show(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Card(
        
      );
    },
  );
}

 

With the above code it will show the bottom sheet on the current window.

 

Now how to show the Bottom Sheet on the Screen Load

To show the bottomsheet on the screen load we need to use WidgetsBinding.instance.addPostFrameCallback callback method

WidgetsBinding.instance.addPostFrameCallback((_) {
  show(context);
});

 

Show BottomSheet on Screen load Flutter

 

Complete Example

import 'package:flutter/material.dart';
class ShowBottomSheetAuto extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ShowBottomSheetAutoState();
  }

}

class ShowBottomSheetAutoState extends State<ShowBottomSheetAuto>
{

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      show(context);
    });
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("Auto Open BottomSheet"),),
      body: Container(
        child: Center(
          child: RaisedButton(child: Text("Show BottomSheet Auto"),onPressed: (){
            show(context);
          },),
        ),
      ),
    );
  }

}




void show(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Card(
        elevation: 10,
        child: Container(
          height: 200,
          color: Colors.white70,
          child: ButtonTheme(
            minWidth: 48.0,
            child:
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("BottomSheet Dialog",style: TextStyle(fontSize: 20),),
                ),
                SizedBox(height: 20,),
                Row(
                  children: [

_Presso(
                        ico: Icons.pause,
                        onPressed: () {

                        }),
                    _Presso(
                        ico: Icons.stop,
                        onPressed: () {

                        }),
                    _Presso(
                        ico: Icons.delete,
                        onPressed: () {

                        }),
                    _Presso(
                        ico: Icons.share,
                        onPressed: () {

                        }),
                  ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                ),
              ],
            )
          ),
        ),
      );
    },
  );
}

class _Presso extends StatelessWidget {
  final IconData ico;
  final VoidCallback onPressed;

  const _Presso({Key key, this.ico, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
      minWidth: 48.0,
      child: RaisedButton(
          child: Icon(
            ico,
            color: Colors.white,
          ),
          onPressed: onPressed),
    );
  }
}

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

644 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions