启动画面(Flutter)

qjp7pelc  于 2022-11-30  发布在  Flutter
关注(0)|答案(4)|浏览(267)

我想上传的启动图片在其原始质量,而不是白色的背景颜色。它是如何?
我尝试这样做,但出现白色背景。

我注入了大厦前的影像:

启动画面:

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _SplashScreenState();
}
    class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 3), () => Navigator.push(context, MaterialPageRoute(builder: (context) => const LoginScreen(),)));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/background_image.png'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black26, BlendMode.darken),
          ),
        ),
        child: Center(
          child: Container(
            padding: const EdgeInsetsDirectional.all(50),
            decoration: const BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
              boxShadow: AppColors.boxShadow,
            ),
            child: const Text('Logo'),
          ),
        ),
      ),
    );
  }
}
vfhzx4xs

vfhzx4xs1#

之所以会出现白色背景,是因为当main.dart文件调用时,所有通道方法都在flutter重画屏幕后构建,所以在此期间会出现白色屏幕您可以使用flutter_native_splash,它将在方法通道构建期间显示闪屏

zzwlnbp8

zzwlnbp82#

在Android中设置启动映像

在Android Studio中设置启动映像:在项目浏览器中导航至android/app/src/main/res/drawable/并打开launch_background. xml。将以下代码添加到layer-list节点中的第一项之后:

<item>
  <bitmap
    android:gravity="fill"
    android:src="@drawable/splash_image" />
</item>

将splash_image.png复制到android/app/src/main/res/drawable中。

在iOS中设置启动映像

在Xcode中,打开ios/Runner.xcworkspace,选择Assets.xcassets,然后选择LaunchImage。你会看到三个框,分别代表1x、2x和3x分辨率的图像。将图像拖到这些框中。如果你只有一个图像,请从Scales下拉列表中选择:单刻度。您可以创建更复杂的启动屏幕:加入约束,标示e.t.c.

ggazkfy8

ggazkfy83#

您是否尝试过在init状态函数中加载资产(如_image = AssetImage('assets/images/background_image.png');)。删除Scaffold backgroundColor参数,然后使用decoration -〉image:_形象?
也许资产在页面构建后需要这一瞬间来加载。如果它是一个特别大的资产,它可能是这种情况。尝试在页面显示前加载它。

8wtpewkr

8wtpewkr4#

import 'dart:async';
import 'dart:html';
import 'dart:ui';

import 'package:flutter/material.dart';

import 'DashBoard.dart';

void main(){
  runApp(SplashScreen());
}

class SplashScreen extends StatefulWidget{
  @override
  State<SplashScreen> createState() => _SplashScreenState();

}

class _SplashScreenState extends State<SplashScreen> {

  @override
  void initState() {
    super.initState();
    Timer(Duration(seconds: 4),(){
      Navigator.pushReplacement(context, MaterialPageRoute(
      builder: (context) => DashBoard(),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: Center(child: Text('xyz', style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold
        ),),),
      ),
    );
  }
}

相关问题