如何在flutter中堆叠两张底片？

Question

我想将两张底板相互堆叠起来，如图所示。上图显示的是处于错误状态时。在照片中，它是用警报对话框构建的。我想要的是带底页的。我怎么才能得到它？

编辑： 这是我想做的代码。下底板带有引脚区域，

autoComplete

。

autoComplete

触发StreamController，然后

streamBuilder

观察Error状态并显示对话框。

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

当我这样做时，我得到

 setState() or markNeedsBuild() called during build.

错误，为什么？抱歉我之前的问题不完整。

Answer 1

我对你的问题有点困惑，但堆叠两张底纸很容易。只要您希望向用户显示它，您只需调用 showModalBottomSheet 即可。您可以查看以下实现：

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'),
      ),
    );
  }
}

Answer 2

我有解决办法。我需要做的就是，需要在 StreamBuilder 中添加

WidgetBinding.insatance.addPostFrameCallback((timeStamp){showModalBottomSheet()});

return

。