Flutter : Create Custom Rounded Bottom Action Sheet UI

Modular Base Sheet is an option in contrast to a menu or an exchange and keeps the client from connecting with the remainder of the application. It will show up over the UI with the goal that there is compelling reason need to explore to an alternate page. It very well may be utilized to play out a little undertaking that doesn't need the entirely different screen to be fabricated.

The showModalBottomSheet function

Modal bottom sheets can be created and displayed using the showModalBottomSheet function.

Let’s take a close look at the showModalBottomSheet function:

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

The showModalBottomSheet has two required properties: BuildContext and WidgetBuilder.

Properties:

1. builder: A builder for the contents of the sheet.
2. backgroundColor: To display background color.
3. elevation: Elevates the snackbar by increasing shadow.
4. shape: Shape of the modal bottom sheet.
5. clipBehavior: The content will be clipped according to this option.
6.  barrierColor: Color to display in the background after the modal bottom sheet is displayed.
7. isScrollControlled: Enable or disable scrolling.
8.  useRootNavigator: The useRootNavigator parameter ensures that the root navigator is used to display the BottomSheet when set to true.
9.  isDismissible: Specifies whether the user can dismiss modal bottom sheet by tapping on the scrim.
10.  enableDrag: The enableDrag parameter specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards.
11.  routeSettings: Sets the RouteSettings of the modal bottom sheet.
12. AnimationController : An AnimationController gives the progression of the animation from 0 to 1 whereas the Animation gives the actual tween value expected by the widget.

Start by creating a new Flutter project in either of VS Code or Android Studio. Replace the Flutter default counter application in main.dart with your own stateful widget.

You should have something like this:

import 'package:actionsheet/screens/home/home.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

Before Create Home stateful widget create home.dart file in home folder, then inside of it with the following code:

import 'package:actionsheet/widgets/modeBottomSheet.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String sheetValue = "Thank You :)";
  void updatedValue(data) async {
    setState(() {
      sheetValue = data;
    });
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom Action Sheet"),
        backgroundColor: Colors.cyan,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(onPressed: (){}, child: ModelBottomSheet(model:sheetValue, callbackFunction: updatedValue))
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Before Create modeBottomSheet stateful widget create modeBottomSheet.dart file in widgets folder, then inside of it with the following code:

import 'package:flutter/material.dart';

class ModelBottomSheet extends StatelessWidget {
 final String model;
 final Function callbackFunction;
 const ModelBottomSheet({super.key, required this.model, required this.callbackFunction});

  @override
  Widget build(BuildContext context) {
    late String data = model;
    return Container(
      child: GestureDetector(
        onTap: () {
          showModalBottomSheet(
            context: context,
            isScrollControlled: false,
            backgroundColor: Colors.transparent,
            builder: (BuildContext context) => StatefulBuilder(builder: (context, state) => Container(
                constraints: BoxConstraints(
                  minHeight: 100, minWidth: double.infinity, maxHeight: MediaQuery.of(context).size.height * 0.75
                ),
                decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(15.0),
                    topRight: const Radius.circular(15.0),
                  )
                ),
                child: Container(
                  child: Column(
                    children: [
                      SizedBox(height: 10),
                      Padding(
                          padding: EdgeInsets.all(15.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "Bottom Sheet",
                                style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.w600),
                              ),
                              GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                },
                                child: Icon(Icons.close_rounded, size: 30, color: Colors.black),
                              )
                            ],
                          ),
                      ),

                      Expanded(
                        child: ListView.builder(
                          itemCount: 10,
                          itemBuilder: (BuildContext context, int index) {
                            return ListTile(
                              title: Text("List Item $index", style: TextStyle(color: data == "$index" ? Colors.cyan: null)),
                              trailing: data == "$index" ? Icon(Icons.check): null,
                              iconColor: data == "$index" ? Colors.cyan: null,
                              onTap: () {
                                state(() {
                                  data = "List Item $index";
                                });
                                callbackFunction("List Item $index");
                              },
                            );
                          },
                        ),
                      )
                    ],
                  ),
                ),
              )
            )
          );
        },
        child: Text("$data", style: TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.w600),),
      ),
    );
  }
}

Output: