Flutter UI Stack and Positioned Widgets

Question

hi i am trying to fill out the gap the white parts in the top. what is the best way to fill out gap? i gave used stack and positioned widgets so far if have good idea please let me know thank you best regards

 @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
              child: Stack(
            children: [
              Positioned(
                child: Container(
                  padding: const EdgeInsets.only(top: 50, left: 20, right: 20),
                  height: 200,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(20),
                      bottomRight: Radius.circular(20),
                    ),
                    gradient: LinearGradient(colors: [
                      Color(0xFF886FF2),
                      Color(0xff6849ef),
                    ], begin: Alignment.topLeft, end: Alignment.bottomRight),
                  ),
                  child: Column(children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          ('Welcome\nEggs Eggs'),
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontWeight: FontWeight.bold),
                        ),
                        _buildCircleBtn(),
                      ],
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    _buildSearchFld(),
                  ]),
                ),
              ),
            ],
          )),
        );
      }
    }

Answer 1

You need to add top: false, inside of SafeArea.

Basically SafeArea is just a padding, and that's the reason why you're getting that white gap, just disable the inset by changing it to false. this can be done for top, bottom, right, left.

SafeArea(
              top: false,  // here
              child: Stack(
                children: [
                  Positioned(
                    child: Container(
                      padding: const EdgeInsets.only(
                          top: 50, left: 20, right: 20),
                      height: 200,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                        gradient: LinearGradient(
                            colors: [
                              Color(0xFF886FF2),
                              Color(0xff6849ef),
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight),
                      ),
                      child: Column(children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              ('Welcome\nEggs Eggs'),
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold),
                            ),
                             _buildCircleBtn(),
                          ],
                        ),
                        SizedBox(
                          height: 20,
                        ),
                         _buildSearchFld(),
                      ]),
                    ),
                  ),
                ],
              )),
        )