Model Bottom Sheet in flutter


Model Bottom sheet shows a model material design bottom sheet. It is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. It is used to perform small tasks which doesn’t requires whole screen to built. It will appear over the UI so that there is no need to navigate to a different page.


Future<T?> showModalBottomSheet<T>({
  required BuildContext context,
  required Widget Function(BuildContext) builder,
  Color? backgroundColor,
  double? elevation,
  ShapeBorder? shape,
  Clip? clipBehavior,
  BoxConstraints? constraints,
  Color? barrierColor,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
  bool isDismissible = true,
  bool enableDrag = true,
  RouteSettings? routeSettings,
  AnimationController? transitionAnimationController,

Code Implementation


import 'package:flutter/material.dart';
import 'package:flutterhopeprojects/Models/icon_data.dart';

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

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Bottomsheet Example"),
        centerTitle: true,
      body: Center(
        child: ElevatedButton(
          onPressed: () {
                context: context,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(18.0),
                      topRight: Radius.circular(18.0)),
                builder: (context) {
                  return Container(
                      height: 300,
                      width: double.infinity,
                      child: ListView.builder(
                          itemCount: datalist.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                                leading: datalist[index].icon,
                                title: Text(
                                  style: const TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.w700),
          child: const Padding(
            padding: EdgeInsets.all(14.0),
            child: Text(
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),


import 'package:flutter/material.dart';

class BottomSheetdataModel {
  String? text;
  Icon? icon;

  BottomSheetdataModel(this.text, this.icon);

final List<BottomSheetdataModel> datalist = [
  BottomSheetdataModel("Edit", const Icon(Icons.edit)),
  BottomSheetdataModel("Copy", const Icon(Icons.copy)),
  BottomSheetdataModel("Cut", const Icon(Icons.cut)),
  BottomSheetdataModel("Paste", const Icon(Icons.paste)),
  BottomSheetdataModel("Delete", const Icon(Icons.delete))


Here is the github link of this project:

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.