如何讓我的 flutter 應用程序覆蓋整個 android 屏幕（刪除應用程序側面的白條）
[英]How to make my flutter app cover the full android screen (Remove white bars on the side of the app)
問題描述
我正在創建一個簡單的 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",
),
],
),
],
),
),
),
),
);
}
}
1 個解決方案
解決方案1
0 2022-08-07 10:50:28
這應該有效。
在您的項目文件夾 go 到
android\app\src\main\res。你會發現一堆文件夾，你應該感興趣的只有
values和values-night。每個文件夾中都有一個
styles.xml文件。 您只需要編輯添加該行的每個文件<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> to the <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">它應該如下所示：
<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 。
在我的生產版本 flutter 應用程序中啟動時出現白屏崩潰/掛起
[英]white screen crash/hang at startup in my production release flutter app
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.