如何在颤动中删除appBar和body之间的空间？答案

【问题标题】：How to remove the space between appBar and body in flutter?如何在颤动中删除appBar和body之间的空间？
【发布时间】：2021-04-07 11:08:30
【问题描述】：

在我的应用程序中，flutter 应用程序在 appbar 和屏幕主体之间添加了空间。以下是屏幕图像：

以下是代码：

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

我尝试了给出的各种答案，但没有奏效。

我想删除蓝色应用栏和图像之间的空白。有人可以帮我解决这个问题吗？

【问题讨论】：

我认为是因为图片适合，让你的图片适合覆盖，Image.asset(bannerimage,fit: BoxFit.cover,)
@karzankamal 非常感谢..它解决了问题
别提了。

标签： flutter dart

【解决方案1】：

我认为这是因为横幅图像没有填满容器尝试在图片中添加fit: BoxFit.cover

【讨论】：

【解决方案2】：

您只需用Container 包裹列（位于SingleChildScrollView 内）并给出它的高度和宽度。

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

【讨论】：

你说的我试过了，但是空间还在。
@Ankit，我想你可能使用的是旧版本的 Flutter。尝试运行flutter upgrade，如果仍然无法运行，请将flutter的通道更改为beta或masterflutter channel beta或flutter channel master。

【解决方案3】：

将工具栏高度添加到 appbar 并将滚动视图添加到正文：

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

【讨论】：

【解决方案4】：

我知道我迟到了，但如果将来有人需要，这就是解决方案。

在 Scaffold 小部件中，将属性“extendBodyBehindAppBar”设置为“true”...

【讨论】：