Open showModalBottomSheet from left side flutter

Question

I am using ShowModalBottomSheet . I want to open it from left side not from bottom in flutter..

I think you can follow https://stackoverflow.com/a/58708610/10157127 — Md. Yeasin Sheikh, Oct 16 '22 at 17:19
Can you just use a [Drawer](https://api.flutter.dev/flutter/material/Drawer-class.html)? ref [How to use Drawer without Scaffold.drawer?](https://stackoverflow.com/questions/51891799/how-to-use-drawer-without-scaffold-drawer) if you don't want to use a [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html) — CatTrain, Oct 16 '22 at 18:40

MOHAMMAD FUZAIL ZAMAN · Answer 1 · 2022-10-20T13:01:54.343

1

To achieve you desire UI requirements , you should create a custom modal sheet. It is very simple , you just have to make a container and use tween animation to make it visible and it works like a modal sheet,You can change the direction of the container from its start animating and many more. I will try to add a code for it later.

This package help you to achieve side modal sheet. https://pub.dev/packages/side_sheet

Or there is one more way, you should visit this link,I hope it will fullfill your requirements. https://pub.dev/packages/modal_side_sheet

I think the first package can be more helpfull for you because it has some customization options like you can choose the side etc.

edited Oct 20 '22 at 13:01

answered Oct 17 '22 at 07:51

MOHAMMAD FUZAIL ZAMAN

43
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Muhammad Hussain Oct 18 '22 at 06:25
I really thank full to you , I will make sure that my answer will be descriptive and with some code snippets to understand more.I really appreciate , I am beginner and you point out my mistake so I will make it correct and edit my post asap.(THANKS ALOT) – MOHAMMAD FUZAIL ZAMAN Oct 20 '22 at 12:53

score 0 · Answer 2 · answered Nov 27 '22 at 04:19

in case someone still needs help. You can use a combination of overlay and Tween to create a custom side sheet.

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(
      debugShowCheckedModeBanner: false,
      title: 'Custom Sidesheet',
      theme: ThemeData(useMaterial3: true),
      home: const MyHomePage(title: 'Custom Sidesheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  OverlayEntry? sideSheetOverlayEntry;
  final sideSheetOverlayLayerLink = LayerLink();
  bool isSidebarShown = false;

  @override
  void initState() {
    super.initState();
  }

  void showSideSheet() {
    final sideSheetOverlay = Overlay.of(context)!;
    sideSheetOverlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        height: MediaQuery.of(context).size.height,
        child: isSidebarShown
            ? CompositedTransformFollower(
                link: sideSheetOverlayLayerLink,
                child: TweenAnimationBuilder(
                  tween: Tween<double>(begin: 150, end: 300),
                  duration: const Duration(milliseconds: 300),
                  builder: (BuildContext context, double size, Widget? child) {
                    return Material(
                      child: SafeArea(
                        child: Container(
                            width: size,
                            padding: const EdgeInsets.all(10.0),
                            decoration: BoxDecoration(
                              color: Theme.of(context).colorScheme.surface,
                            ),
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    InkWell(
                                      onTap: () {
                                        setState(() {
                                          isSidebarShown = false;
                                          showSideSheet();
                                        });
                                      },
                                      onHover: (value) {},
                                      child: const Icon(
                                        Icons.close,
                                        color: Colors.redAccent,
                                        size: 25.0,
                                      ),
                                    )
                                  ],
                                ),
                                Column(
                                  children: [
                                    Container(
                                      child: Text(
                                        "Custom Side Sheet",
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(color: Colors.blueGrey),
                                      ),
                                    ),
                                    const Divider(
                                      height: 5.0,
                                      color: Colors.black,
                                    ),
                                    Container(
                                      child: Row(children: [
                                        Icon(
                                          Icons.dashboard,
                                          size: 25.0,
                                          color: Colors.blueGrey,
                                        ),
                                        Text(
                                          "Home",
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(color: Colors.blueGrey, fontSize: 25.0, fontWeight: FontWeight.w300),
                                        )
                                      ]),
                                    )
                                  ],
                                )
                              ],
                            )),
                      ),
                    );
                  },
                ))
            : SizedBox.shrink(),
      ),
    );
    sideSheetOverlay.insert(sideSheetOverlayEntry!);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            leading: GestureDetector(
              onTap: () {
                setState(() {
                  isSidebarShown = true;
                  showSideSheet();
                });
              },
              child: Icon(
                Icons.menu_sharp,
                size: 30.0,
              ),
            ),
          ),
          body: Container(
            color: Color.fromRGBO(223, 230, 233, 1.0),
          )),
    );
  }
}

side sheet not active image

side sheet active image

Open showModalBottomSheet from left side flutter

2 Answers2