Flutter仿Boss-1.启动黑白屏问题

简介: Flutter仿Boss-1.启动黑白屏问题

简述

在使用Flutter开发App应用时,运行在Android手机启动时可能会遇到应用显示黑白屏的问题。这个问题做过Android开发的人员都知道,在Android12版本兼容中新增改用SplashScreen API定制系统启动画面,但是本文将介绍如何通过调整启动样式配置解决这个问题。

效果

  • 未修改
    image.png
  • 修改后

启动样式配置

在 Flutter 项目中,启动屏幕的配置文件位于 drawable 文件夹中的 launch_background.xml。以下是一个示例配置:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#40C2BB" />
        </shape>
    </item>

    <item android:top="150dp">
        <bitmap
            android:gravity="top|center_horizontal"
            android:src="@drawable/splash_top_icon" />
    </item>
    <item
        android:gravity="bottom|center_horizontal"
        android:bottom="50dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_bottom" />
    </item>
</layer-list>

请注意,这里的配置文件决定了启动时的主题样式,包括背景颜色和图标等。在这个例子中,背景颜色为 #40C2BB,顶部图标为 splash_top_icon,底部图标为 splash_bottom

修改启动屏幕样式

styles.xml 文件中修改 LaunchTheme 样式,确保正确引用了启动屏幕配置文件:

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

这里通过 android:windowBackground 指定了启动屏幕的背景,确保其引用了我们之前配置的 launch_background.xml 文件。

修改 AndroidManifest.xml

AndroidManifest.xml 文件中,确保正确引用了修改后的样式:

<activity
    android:name=".MainActivity"
    android:theme="@style/LaunchTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

通过修改 android:theme 属性,确保启动时使用了我们修改后的样式。

结论

通过以上步骤,我们可以解决 Flutter 在 Android 平台启动时出现黑白屏的问题。通过正确配置启动屏幕样式,并确保在 styles.xmlAndroidManifest.xml 中正确引用,我们可以让应用在启动时呈现出预期的样式,提升用户体验。

相关文章
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
|
2月前
|
开发者 UED
flutter:dialog (十一)
本文介绍了 Flutter 中常用的弹窗组件和方法,包括 `AlertDialog`、`SimpleDialog`、`showModalBottomSheet` 和 `toast`。每个组件的使用方法和示例代码都进行了详细说明,帮助开发者快速理解和应用这些弹窗功能。例如,`AlertDialog` 用于显示带有标题、内容和按钮的对话框;`SimpleDialog` 用于显示多个选项供用户选择;`showModalBottomSheet` 用于从屏幕底部弹出模态对话框;而 `toast` 则用于显示短暂的消息提示。文中还提供了如何处理点击事件、取消弹窗等常见操作的代码示例。
|
5月前
Flutter仿Boss-4.短信验证码界面
Flutter仿Boss-4.短信验证码界面
74 0
Flutter仿Boss-4.短信验证码界面
|
5月前
|
UED
Flutter仿Boss-2.启动页、引导页
Flutter仿Boss-2.启动页、引导页
74 0
|
5月前
Flutter仿Boss-5.Lottie实现的Tab切换
本文介绍了如何在Flutter项目中使用Lottie库创建自定义动画的Tab栏项(LottieBottomBarItem),并展示了如何集成到带有PageView的主页底部导航栏中,以及相关的状态管理和逻辑控制。
54 0
|
5月前
|
缓存
Flutter仿Boss-6.底部tab切换
Flutter仿Boss-6.底部tab切换
42 0
|
5月前
Flutter-仿腾讯视频Banner效果
Flutter-仿腾讯视频Banner效果
42 0
|
5月前
Flutter-仿携程首页类型切换
文章介绍了使用Flutter构建一个包含TabBarView和自定义TabbarWidget的应用,其中CustomTabbarWidget展示了动态切换和动画效果,TrapezoidClipper则实现了独特的三角形指示器。作者通过代码示例展示了如何在携程类应用中创建可交互的导航界面。
60 0
|
7月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
103 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
7月前
|
开发框架 前端开发 UED
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
【4月更文挑战第30天】在Flutter移动应用开发中,下拉刷新和上拉加载更多能提升用户体验和用户参与度。通过`RefreshIndicator`组件和`ScrollController`实现下拉刷新与上拉加载。`RefreshIndicator`包裹可滚动Widget,`ScrollController`监听滚动事件以判断是否到达底部。性能优化包括避免重复加载、使用防抖技术和异步加载数据。参考Flutter官方文档和相关教程可进一步学习。
412 0
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多