【问题标题】:How to make my flutter app cover the full android screen (Remove white bars on the side of the app)如何让我的颤振应用程序覆盖整个安卓屏幕(删除应用程序侧面的白条)
【发布时间】:2022-08-07 18:51:36
【问题描述】:

我正在创建一个简单的 CRUD 应用程序,在编写 UI 代码时,我一直遇到这个问题,我的应用程序没有占据 android 模拟器的全屏,脚手架的左右两侧都有白条(您可以在应用栏旁边看到它)。当我在正文中添加任何其他小部件时,它也存在。这是我面临的问题:

这是为了重新创建此问题的脚手架:

class StatisticView extends StatelessWidget {
  const StatisticView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool statisticAvailable = false;

  const Color BACKGROUND_COLOR = Color(0xffFAFAFA);
  const Color COLOR_GREEN = Color(0xff007336);
  const Color COLOR_BROWN = Color(0xff4B4539);
  const Color COLOR_BLACK = Color(0xff333333);

    return SafeArea(
      child: Scaffold(
        extendBody: true,
        backgroundColor: BACKGROUND_COLOR,
        appBar: AppBar(
          toolbarHeight: 110,
          title: Padding(
            padding: EdgeInsets.only(top: 55),
            child: Text(
              \"Hours Leaderboard\",
              style: GoogleFonts.poppins(
                  fontWeight: FontWeight.w600,
                  fontSize: 28,
                  color: const Color(0xffFFFFFF)),
            ),
          ),
          backgroundColor: COLOR_GREEN,
        ),
        body: statisticAvailable == false ? Center(child: Text(\"This feature is currently unavailable.\")) : SingleChildScrollView(
          child: Container(
            child: Column(
              children: [
                SizedBox(
                  height: 20,
                ),
                Stack(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 50, left: 175),
                      child: Center(
                        child: Container(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(\"3\",
                                  style: GoogleFonts.poppins(
                                      fontSize: 17, fontWeight: FontWeight.w800)),
                              SizedBox(
                                height: 8,
                              ),
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(100)),
                                  boxShadow: [
                                    BoxShadow(
                                      color: COLOR_BROWN.withOpacity(0.5),
                                      spreadRadius: 8,
                                      blurRadius: 7,
                                    ),
                                  ],
                                ),
                                child: CircleAvatar(
                                  backgroundImage: NetworkImage(
                                      \"https://www.inquisitr.com/wp-content/uploads/2019/12/florence-pugh.jpg\"),
                                  radius: 55,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 15),
                                child: Text(\"Florence\",
                                    style: GoogleFonts.poppins(
                                      fontWeight: FontWeight.w600,
                                      fontSize: 15,
                                      color: COLOR_BLACK,
                                    )),
                              ),
                              Text(\"20\",
                                  style: GoogleFonts.poppins(
                                    fontWeight: FontWeight.w600,
                                    fontSize: 15,
                                    color: COLOR_GREEN,
                                  )),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 50, right: 175),
                      child: Center(
                        child: Container(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(\"2\",
                                  style: GoogleFonts.poppins(
                                      fontSize: 17, fontWeight: FontWeight.w800)),
                              SizedBox(
                                height: 8,
                              ),
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(100)),
                                  boxShadow: [
                                    BoxShadow(
                                      color: COLOR_BROWN.withOpacity(0.5),
                                      spreadRadius: 8,
                                      blurRadius: 7,
                                    ),
                                  ],
                                ),
                                child: CircleAvatar(
                                  backgroundImage: NetworkImage(
                                      \"https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2019%2F07%2Fsimon-liu-2000.jpg\"),
                                  radius: 55,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 15),
                                child: Text(\"Simu\",
                                    style: GoogleFonts.poppins(
                                      fontWeight: FontWeight.w600,
                                      fontSize: 15,
                                      color: COLOR_BLACK,
                                    )),
                              ),
                              Text(\"48\",
                                  style: GoogleFonts.poppins(
                                    fontWeight: FontWeight.w600,
                                    fontSize: 15,
                                    color: COLOR_GREEN,
                                  )),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Center(
                      child: Container(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset(
                              \"assets/images/crown.png\",
                              height: 35,
                              width: 35,
                            ),
                            SizedBox(
                              height: 8,
                            ),
                            Material(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(100)),
                              elevation: 2,
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(100)),
                                  boxShadow: [
                                    BoxShadow(
                                      color: COLOR_GREEN.withOpacity(0.5),
                                      spreadRadius: 8,
                                      blurRadius: 7,
                                    ),
                                  ],
                                ),
                                child: CircleAvatar(
                                  backgroundImage: NetworkImage(
                                      \"https://imagesvc.meredithcorp.io/v3/mm/image?q=85&c=sc&rect=255%2C0%2C1875%2C1080&poi=face&w=1920&h=1280&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F09%2F13%2FJack-Harlow-chicken-shop-date.jpg\"),
                                  radius: 60,
                                ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(top: 15),
                              child: Text(\"Jack\",
                                  style: GoogleFonts.poppins(
                                    fontWeight: FontWeight.w600,
                                    fontSize: 15,
                                    color: COLOR_BLACK,
                                  )),
                            ),
                            Text(\"52\",
                                style: GoogleFonts.poppins(
                                  fontWeight: FontWeight.w600,
                                  fontSize: 15,
                                  color: COLOR_GREEN,
                                )),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.only(left: 22, top: 10),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      \"Runner-Ups\",
                      style: GoogleFonts.poppins(
                        fontWeight: FontWeight.w600,
                        fontSize: 18,
                        color: COLOR_BLACK,
                      ),
                    ),
                  ),
                ),
                Column(
                  children: [
                    PlayerStatistc(
                      placement: \"4\",
                      name: \"Raj Bhawlaser\",
                      hours: \"15\",
                      imageUrl:
                          \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cmFuZG9tJTIwcGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80\",
                    ),
                    PlayerStatistc(
                      placement: \"5\",
                      name: \"Bob Dylan\",
                      hours: \"13\",
                      imageUrl:
                          \"https://cdn4.pitchfork.com/longform/1005/BobDylan.jpg\",
                    ),
                    PlayerStatistc(
                      placement: \"6\",
                      name: \"Barack Obama\",
                      hours: \"11\",
                      imageUrl:
                          \"https://ca-times.brightspotcdn.com/dims4/default/bec99d7/2147483647/strip/true/crop/2000x2706+0+0/resize/840x1137!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Fff%2F2c%2Fdedf568e4af087cab5f0a5c76f32%2Fla-ca-bk-a-promised-land-barack-obama-183.JPG\",
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

    标签: android ios flutter flutter-layout


    【解决方案1】:

    这应该有效。

    1. 在您的项目文件夹中转到android\app\src\main\res。

    2. 你会发现一堆文件夹,你应该是唯一的文件夹 感兴趣的是values 和values-night。

    3. 每个文件夹中都有一个styles.xml 文件。您只需要编辑添加该行的每个文件

      <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> to the <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
      
    4. 它应该如下所示:

        <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
            <item name="android:windowBackground">?android:colorBackground</item>
            <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        </style>
      

      注意:如果由于某种原因 ListView(或类似的 Widget)内的第一个元素在左侧有填充,只需将零填充添加到列表 (EdgeInsets.zero)。

      奖励:如果您想在两种模式(FullScreen 和 NotchFullScreen)之间进行切换,您应该查看这篇文章 https://betterprogramming.pub/making-notch-friendly-apps-for-android-75776272be5c。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-09-03
      • 2021-03-06
      • 1970-01-01
      • 2021-07-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多