How to remove the space between appBar and body in flutter?

user_11678970 0
Viewed 2339

In my application, the flutter app is adding space between appbar and the body of the screen. Following is the image of the screen: enter image description here

Following is the code:

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
        title: Container(
            height: MediaQuery.of(context).size.width * 0.13,
            child: Text('Dashboard')),
        centerTitle: true,
        backgroundColor: kBluePrimaryColor,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: MediaQuery.of(context).size.height * 0.33,
              child: Stack(children: [
                Container(
                  //color: kBluePrimaryColor,
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.23,
                  child: bannerimage == '' || bannerimage == null
                      ? Image.asset('images/user.jpg')
                      : Image.network(
                          bannerimage),
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.16,
                  left: MediaQuery.of(context).size.width * 0.03,
                  child: Row(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.height * 0.14,
                        height: MediaQuery.of(context).size.height * 0.14,
                        decoration: ShapeDecoration(
                            shape: CircleBorder(), color: Colors.white),
                        child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: DecoratedBox(
                            decoration: ShapeDecoration(
                                shape: CircleBorder(),
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: imageurl == '' || imageurl == null
                                      ? AssetImage('images/user.jpg')
                                      : NetworkImage(imageurl),
                                )),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.05,
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.24,
                  left: MediaQuery.of(context).size.height * 0.165,
                  child: Container(
                      child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      RaisedButton(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          color: kOrangePrimaryColor,
                          onPressed: () {
                            print('Contacts');
                          },
                          child: RichText(
                            text: TextSpan(
                              text: 'Total: ',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 12),
                              children: <TextSpan>[
                                TextSpan(
                                    text: '30',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold,
                                        fontFamily: 'Calibri')),
                              ],
                            ),
                          )),
                      SizedBox(
                        width: 13,
                      ),
                      RaisedButton(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          color: kBluePrimaryColor,
                          onPressed: () {
                            print('Address');
                          },
                          child: RichText(
                            text: TextSpan(
                                text: 'ADDRESS',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 10,
                                    fontWeight: FontWeight.bold,
                                    fontFamily: 'Calibri')),
                          ))
                    ],
                  )),
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }

I tried the various answers given but it wasn't working.

I want to remove the white space between the blue appbar and the image. Can someone help me with this please?

dart flutter
4 Answers

I think it is because the banner image is not filling the container Try adding fit: BoxFit.cover to the image

user_141944180

You just need to wrap the Column(Which is inside SingleChildScrollView) with Container and give its height and width.

body: SingleChildScrollView(
   child: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Column(
         ...
      )   
   )
)
user_128044000

Add a toolbar height to appbar and scrollview to body:

Scaffold(
      appBar:   AppBar(
              toolbarHeight: 40,
             .....
              ),
      body:
      SingleChildScrollView(...
user_47992840

I know I'm late but in case somebody needs this in the future here's the solution.

In the Scaffold widget set the property "extendBodyBehindAppBar" to "true"...

user_153794970
Related