flutterdartui-design

How to Properly Organize Widgets in Flutter for a Specific Layout?


I'm currently working on a Flutter application where I need to organize various widgets within a screen. I've experimented with different approaches but haven't been able to achieve the desired layout. Specifically, I'm trying to replicate a design that involves a combination of icons, text, and animation, but the alignment and positioning of these elements do not meet the design requirements.

Here is a snippet of my current implementation:

@override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: ClipRRect(
              //<---here
              borderRadius: BorderRadius.circular(10),
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: 600,
                decoration: const BoxDecoration(
                  color: Color(0xffF6F6F6),
                ),
                child: LayoutBuilder(
                  builder: (context, constraints) => Stack(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: const [
                            Icon(FontAwesomeIcons.checkDouble,
                                size: 40, color: Color(0xffD6D6D6)),
                            Icon(FontAwesomeIcons.squareXmark,
                                size: 40, color: Color(0xff404040)),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(15, 60, 15, 0),
                        child: Stack(   
                          children:  [
                            
                             Center(
                               child: Text(
                                "We send you an Email",
                                style: TextStyle(
                                  fontSize: 20,
                                  fontStyle: FontStyle.normal,
                                  fontWeight: FontWeight.normal,
                                  color: Color(0xff3B3B3B),
                                ),
                                                         ),
                             ),
                             Padding(
                              padding: EdgeInsets.symmetric(vertical: 8.0),
                              child: Divider(color: Color(0xff3B3B3B)),
                            ),
                             Text(
                             
                              style: TextStyle(
                                fontSize: 20,
                                fontStyle: FontStyle.normal,
                                fontWeight: FontWeight.normal,
                                color: Color(0xff3B3B3B),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 8.0),
                              child: Divider(color: Color(0xff3B3B3B)),
                            ),
                          ],
                        ),
                      ),
                      RiveAnimation.asset(
                        "img/letter_and_knife.riv",
                      ),
                    ],
                    
                  ),
                ),
                
              ),
              
            ),
          ),
        ),
      ),
    );
  }

I've tried using a Column widget for vertical arrangement, but it doesn't seem to work as expected. Can someone suggest how to structure the widgets to achieve a layout similar to the second design mentioned? Additionally, I'd like to incorporate a specific pink color with Color(0xffF4CFDD) in some parts of the layout.

Any guidance or suggestions for widgets and properties that might be better suited for this task would be greatly appreciated.


Solution

  • You are using wrong widget, instead of stack, you need to use column like this:

    BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
              child: Scaffold(
                backgroundColor: Colors.transparent,
                body: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(32.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        height: MediaQuery.of(context).size.height,
                        width: 600,
                        decoration: const BoxDecoration(
                          color: Color(0xffF6F6F6),
                        ),
                        child: LayoutBuilder(
                          builder: (context, constraints) => Column(
                            children: [
                              Container(
                                color: Colors.white,
                                padding: const EdgeInsets.all(15.0),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: const [
                                    Icon(Icons.check,
                                        size: 40, color: Color(0xffD6D6D6)),
                                    Icon(Icons.close,
                                        size: 40, color: Color(0xff404040)),
                                  ],
                                ),
                              ),
                              Padding(
                                padding:
                                    const EdgeInsets.fromLTRB(15, 60, 15, 0),
                                child: Column(
                                  children: [
                                    Center(
                                      child: Text(
                                        "We send you an Email",
                                        style: TextStyle(
                                          fontSize: 20,
                                          fontStyle: FontStyle.normal,
                                          fontWeight: FontWeight.normal,
                                          color: Color(0xff3B3B3B),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding:
                                          EdgeInsets.symmetric(vertical: 8.0),
                                      child: Divider(color: Color(0xff3B3B3B)),
                                    ),
                                    Text(
                                      "Please, check your Email inbox to log in and start using Pomoworko",
                                      style: TextStyle(
                                        fontSize: 20,
                                        fontStyle: FontStyle.normal,
                                        fontWeight: FontWeight.normal,
                                        color: Color(0xff3B3B3B),
                                      ),
                                    ),
                                    Padding(
                                      padding:
                                          EdgeInsets.symmetric(vertical: 8.0),
                                      child: Divider(color: Color(0xff3B3B3B)),
                                    ),
                                  ],
                                ),
                              ),
                              Container(
                                color: Colors.red,
                                width: 100,
                                height: 100,
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            )
    

    enter image description here