Question 77342 in Flutter Question posted in
The official Flutter documentation can be found here.

How to stack two bottom sheet in flutter?

I want to stack two bottom sheet each other in flutter as show in photo. The upper one is shown when in error state. In photo, it build with alert dialog. I want is with bottom sheet. How can I get it?
enter image description here

Edit:
Here is my code that I want to do. Lower bottom sheet is with pin field, autoComplete. autoComplete trigger StreamController, and then streamBuilder watch Error state and show dialog.

confirmPasswordModalBottomSheet(
      BiometricAuthRegisterBloc biometricAuthRegBloc) {
    showMaterialModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return StreamBuilder(
            stream: biometricAuthRegBloc.biometricAuthRegisterStream,
            builder: (context,AsyncSnapshot<ResponseObject>biometricAuthRegSnapShot) {
              if (biometricAuthRegSnapShot.hasData) {
                if (biometricAuthRegSnapShot.data!.messageState ==
                    MessageState.requestError) {
                  showModalBottomSheet(context: context, builder: 
                (BuildContext context){
                    return Container(
                     width: 200,height: 200,
                     child: Center(child: Text('Helllllllllo'),),);
                  });
                }
              }
              return SizedBox(
                width: 100,
                height: 300,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: margin30,
                    ),
                    Text(CURRENT_PIN_TITLE),
                    SizedBox(
                      height: margin30,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(
                          left: margin60, right: margin60),
                      child: PinCodeField(
                        pinLength: 6,
                        onChange: () {},
                        onComplete: (value) {
                          biometricAuthRegBloc.biometricAuthRegister(
                              biometricType:_biometricAuthTypeForApi,
                              password: value);
                        },
                      ),
                    ),
                    SizedBox(
                      height: margin30,
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 
                    margin80),
                      child: AppButton(
                        onClick: () {},
                        label: CANCEL_BTN_LABEL,
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(8.0),
                      margin:
                          EdgeInsets.symmetric(vertical: 8.0, 
                      horizontal: 30),
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        border: Border.all(color: Colors.black),
                      ),
                      child: const Text(
                        FINGER_PRINT_DIALOG,
                        textAlign: TextAlign.center,
                      ),
                    )
                  ],
                ),
              );
            });
      },
    );
  }

When I do like that above, I get setState() or markNeedsBuild() called during build. Error and why? Sorry for my previous incomplete question.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have solution. All I need to do is, need to add WidgetBinding.insatance.addPostFrameCallback((timeStamp){showModalBottomSheet()}); in the StreamBuilder return.


  2. 0

    I am bit confused with your question but stacking two bottomsheet is just easy. You just need to call the showModalBottomSheet whenever you want it shown to user. You can check out the following implementation:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ElevatedButton(
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 500,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet 1'),
                      ElevatedButton(
                        child: const Text('Show second modal 2'),
                        onPressed: () {
                          showModalBottomSheet<void>(
                            context: context,
                            builder: (BuildContext context) {
                              return Container(
                                height: 200,
                                color: Colors.redAccent,
                                child: Center(
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                      const Text('Modal BottomSheet 2'),
                                      ElevatedButton(
                                        child: const Text('Close BottomSheet'),
                                        onPressed: () => Navigator.pop(context),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                          );
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
        child: Text('Show bottom sheet 1'),
      ),
    );
  }
}

    Stacked bottom sheet

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search