Model Bottom Sheet In Flutter

A bottom sheet is a sheet that slides up from the bottom edge of the screen. Bottom sheets are displayed as a result of user-triggered action, and also it can reveal additional content.

Below is a small and simple function that returns a modelBottomSheet with a column having two child widgets.

Below find the final output of modelBottmSheet

Copy and paste the below code and use it with your requirements.

  _showBottomSheet() {
    showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
      return Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[

            Container(
              child: ListTile(
                title: Text("Gallery"),
                leading: Icon(Icons.image),
              ),
            ),
            Container(
              child: ListTile(
                title: Text("Camera"),
                leading: Icon(Icons.camera),
              ),
            )
          ],
        ),
      );
    }
    );
  }

Please Find the complete code below.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Bottom Sheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        
        title: Text(widget.title),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Open Bottom Sheet",style: TextStyle(color: Colors.white),),
          color: Colors.blue,
          onPressed: ()=>_showBottomSheet(),
        ),
      )
    );
  }
  _showBottomSheet() {
    showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
      return Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[

            Container(
              child: ListTile(
                title: Text("Gallery"),
                leading: Icon(Icons.image),
              ),
            ),
            Container(
              child: ListTile(
                title: Text("Camera"),
                leading: Icon(Icons.camera),
              ),
            )
          ],
        ),
      );
    }
    );
  }

}

That’s it! Now run the project!

The full source code is available here.

kotlincodes/model_bottom_sheet_flutter_example

model_bottom_sheet_flutter_example. Contribute to kotlincodes/model_bottom_sheet_flutter_example development by creating an account on GitHub.

Thanks for reading!

Post Views: 5,260