How can I create a Bottom widget which can be resized, scrolled , swiped and closed?

Question

I was just practicing some design pattern shown in this Youtube video. Basically I have a screen

Widget build(BuildContext context) {
    super.build(context);
    RideServices rideServices = ride_services(context);
    return Scaffold(
      resizeToAvoidBottomInset: true,
      key: scaffoldKey,
      extendBodyBehindAppBar: true,
      //drawer:
      body: SwipeDrawer(
        radius: 20,
        key: drawerKey,
        drawer: Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.blue[400],
          ),
          child: Drawer_widget(),
        ),
        hasClone: false,
        bodyBackgroundPeekSize: 30,
        backgroundColor: Colors.blue[400],
        child: Stack(
          children: [
            //here
            GOOGLE_container(),
               
            RefreshWidget(),
              
            my_location(),
              
              
            BottomBar(
              mapController: osmController,
              saveRiderAndSearchNearRidecallback: (listDriver) async {
               
              },
            ),
            drawer(drawerKey: drawerKey),
            SaveLocationCheckMark(key: UniqueKey(), saveLocation: saveLocation),
            detail_driver(),
            splash_screen()
          ],
        ),
      ),
    );
  }

Here BottomBar is a widgets that is being shown at the bottom of the screen, am using a IndexStack widget for this purpose

 @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 67.5.h,
      bottom: 0,
      left: 0,
      right: 0,
      child: Selector<ProviderService, int>(
        selector: (ctx, prod) => prod.indexWidgetInformationPicker,
        shouldRebuild: (nPage, oldPage) => nPage != oldPage,
        builder: (ctx, indexPage, child) {
          return IndexedStack(
            index: indexPage,
            sizing: StackFit.passthrough,
            children: [
              pickUpDestination(
                  //0
                  widget: widget,
                  my_loc_controller: my_loc_controller),
              BestRouteCalculator(
                  //3  1
                  colorizeTextStyle: colorizeTextStyle,
                  colorizeColors: colorizeColors),
              pickRide(
                //1 2
                widget: widget,
                my_loc_controller: my_loc_controller,
              ),
              FindADriver(
                  //2 3
                  key: UniqueKey(),
                  colorizeTextStyle: colorizeTextStyle,
                  colorizeColors: colorizeColors),

              RideStarted(), //4
            ],
          );
        },
      ),
    );
  }
}

But my approach is different than the one in the video. Also, I am having diffculty changing the size of the widgets under IndexStacked , As all the widgets under it have a fixed size, My question is "what is the widget being used" ? I have to show and hide the widgets under IndexStacked but I read some where they are all built at the same time, I hope my question is clear enough and the question still remains how to I get a bottom sheet like the ones shown in the video and implement it in my code ?

That's called ``Bottom Sheet`` more info @ https://api.flutter.dev/flutter/material/showModalBottomSheet.html — OMi Shah, Feb 04 '23 at 06:46
Does this answer your question? [How to create a modal bottomsheet with circular corners in Flutter?](https://stackoverflow.com/questions/50376200/how-to-create-a-modal-bottomsheet-with-circular-corners-in-flutter) — OMi Shah, Feb 04 '23 at 06:47
Sure does, How ever I am looking to replace `IndexedStack` with ` showModalBottomSheet` as you suggest , Could you fix it for me/, I just want a rough example. Most examples contain 1 widget but I have 4, where should the `widget` be in the tree ? — Pannam T, Feb 04 '23 at 06:52
Wrap your items using the Column or the Wrap widget instead of the ``IndexStacked`` widget. You should try by yourself first and if you face issue then I will surely help :) But first try for yourself :) — OMi Shah, Feb 04 '23 at 07:03

score 0 · Answer 1 · answered Feb 05 '23 at 03:35

The size of the bottom widget depends on the positioned widget so, i wrapped it with consumer now, I can do anything i want with it, Inside the children I will set the BottomSheetHeight property and pass it through a provider

 @override
  Widget build(BuildContext context) {
    return Consumer<ProviderService>(
      builder: (context, value, child) => Positioned(
        top: value.BottomSheetHeight,
        bottom: 0,
        left: 0,
        right: 0,
        child: Selector<ProviderService, int>(
          selector: (ctx, prod) => prod.indexWidgetInformationPicker,
          shouldRebuild: (nPage, oldPage) => nPage != oldPage,
          builder: (ctx, indexPage, child) {
            return IndexedStack(
              index: indexPage,
              alignment: Alignment.bottomCenter,
              sizing: StackFit.passthrough,
              children: [
                pickUpDestination(
                    //0
                    widget: widget,
                    my_loc_controller: my_loc_controller),
                BestRouteCalculator(
                    //3  1
                    colorizeTextStyle: colorizeTextStyle,
                    colorizeColors: colorizeColors),
                pickRide(
                  //1 2
                  widget: widget,
                  my_loc_controller: my_loc_controller,
                ),
                FindADriver(
                    //2 3
                    key: UniqueKey(),
                    colorizeTextStyle: colorizeTextStyle,
                    colorizeColors: colorizeColors),

                RideStarted(), //4
              ],
            );
          },
        ),
      ),
    );
  }
}

How can I create a Bottom widget which can be resized, scrolled , swiped and closed?

1 Answers1