Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Show BottomSheet Dialog On Screen Load - Flutter

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),
    );
  }
}

 


345 Views

Author: RRTutors

Flutter Questions

Android Questions