Flutter Show Dialog

Question

I want to add text above the dialog box as shown in the image below (on barrier)

This is the code for the dialog box that I want to modify to be as in the picture Please help me to solve my problems.

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

I have another problem that appears to me when I minimize the screen or rotate the phone screen (the problem appears when the dimensions change)

user_10157127 · Answer

You can return Column from LayoutBuilder and add a Text widget as first child of it. It also needed to wrap with material widget while this is on showDialog.

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(

You may use RichText in replace of Text for clickable text as showing on your image.

user_11423386 · Answer

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

I assume this should work, plese replace it with your content

user_5197712 · Answer

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

Use the above widget or use 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 Show Dialog

3 Answers