Flutter 显示对话框

Question

我想在对话框上方添加文本，如下图所示（在障碍物上）

这是我要修改为如图所示的对话框的代码请帮助我解决我的问题。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text("Show Dialog"),
          onPressed: () {
            showDialog(
              context: context,
              barrierColor: Colors.black.withOpacity(0.8),
              builder: (BuildContext context) => StatefulBuilder(builder: (context, setState) => LayoutBuilder(
                  builder: (context, constraints) {
                    return Dialog(
                      insetPadding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 10.h),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          gradient: LinearGradient(
                            colors: [
                              const Color(0xFFE64978),
                              const Color(0xFFed8c41).withOpacity(0.5),
                              Colors.white.withOpacity(0.1),
                              Colors.white,
                            ],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                        ),
                        child: SingleChildScrollView(
                          physics: const BouncingScrollPhysics(),
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(top: 25.h,bottom: 10.h),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                const DialogTitleWidget(),
                                SizedBox(height: 10.h),
                                DialogPageViewWidget(controller: controller, dialogModelList: dialogModelList,constraints: constraints),
                                SizedBox(height: 10.h),
                                DialogPageIndicatorWidget(controller: controller, dialogModelList: dialogModelList),
                                SizedBox(height: 20.h),
                                const DialogContent(),
                              ],
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            );
          },
        ),
      ),
    );
  }

当我最小化屏幕或旋转 phone 屏幕时出现另一个问题（当尺寸改变时出现问题）

Answer 1

您可以从 LayoutBuilder return Column 并添加一个文本小部件作为它的第一个子部件。它还需要在 showDialog.

上用 material 小部件包装

builder: (BuildContext context) => StatefulBuilder(
  builder: (context, setState) => LayoutBuilder(
    builder: (context, constraints) {
      return Column(
        children: [
          Material(
            color: Colors.transparent,
            child: Text(
                "Extra text will be here",
                 textAlign: TextAlign.center,                 
                  ),
          ),
          Dialog(
            insetPadding: EdgeInsets.symmetric(

您可以使用 RichText 代替 Text 来显示图片上显示的可点击文本。

Answer 2

showDialog<bool>(
      context: context,
      builder: (context) {
        Size size = MediaQuery.of(context).size;
        return Container(
          height: size.height,
          width: size.width,
          child: Column(
            children: [
              Text("Heading Text"),
              Text("Secondary TExt"),
              Container(
                height: size.height * 0.6,
                width: size.width * 0.8,
                color: Colors.blue,
              )
            ],
          ),
        );
      },
    );

我想这应该可以，请用您的内容替换它

Answer 3

       Material(
                color: Colors.transparent,
                child: Text(
                    "Yout Text Goes Here",
                     textAlign: TextAlign.center,                 
                      ),
              ),

使用上面的小部件或使用glassmorphism: ^3.0.0

GlassmorphicFlexContainer(
  borderRadius: 20,
  blur: 20,
  padding: EdgeInsets.all(40),
  alignment: Alignment.bottomCenter,
  border: 2,
  linearGradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Color(0xFFffffff).withOpacity(0.1),
        Color(0xFFFFFFFF).withOpacity(0.05),
      ],
      stops: [
        0.1,
        1,
      ]),
  borderGradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFFffffff).withOpacity(0.5),
      Color((0xFFFFFFFF)).withOpacity(0.5),
    ],
  ),
  child: null,
),

Flutter 显示对话框

Flutter Show Dialog

flutter

flutter-layout

flutter-animation