Model Bottom Sheet in flutter

203

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.

Constructor

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

bottom_sheet.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Bottomsheet Example"),
        centerTitle: true,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
                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(
                                  datalist[index].text.toString(),
                                  style: const TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.w700),
                                ));
                          }));
                });
          },
          child: const Padding(
            padding: EdgeInsets.all(14.0),
            child: Text(
              "showModelBottomsheet",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
            ),
          ),
        ),
      ),
    );
  }
}

icon_data.dart

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))
];

Output

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/Bottomsheet

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.