flutter 如何将两张底片叠在一起？

q3aa0525 于 2023-01-27 发布在 Flutter

关注(0)|答案(2)|浏览(242)

我想堆叠两个底部板材在Flutter对方如照片所示。上面的一个显示时，在错误状态。在照片中，它建立与警报对话框。我想要的是与底部板材。我怎么才能得到它？

编辑：这是我想做的代码。下底页带有引脚字段，autoComplete . autoComplete触发StreamController，然后streamBuilder观察错误状态并显示对话框。

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.错误，为什么？对不起，我以前的不完整的问题。

flutter

来源：https://stackoverflow.com/questions/75229754/how-to-stack-two-bottom-sheet-in-flutter

2条答案

按热度按时间

whlutmcx1#

我对你的问题有点困惑，但是堆叠两个bottomSheet很简单。你只需要在你想让用户看到它的时候调用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'),
      ),
    );
  }
}