首页 > 其他分享 >Flutter实现启动页、闪屏广告页、引导页Flutter的flutter_native_splash库

Flutter实现启动页、闪屏广告页、引导页Flutter的flutter_native_splash库

时间:2024-08-08 15:06:08浏览次数:11  
标签:image flutter dark splash 闪屏 Flutter png

///yaml文件中的配置信息,可以参考官方文档
  color: "#42a5f5"
  #图片格式必须是png
  image: images/avata.png

/// 在main文件中添加代码,主要用来初始化包,并且启动splash页面;
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
///  在MaterialApp的home属性对应的页面中移除splash页面
    void initState() {
    super.initState();

    ///可以在这里添加一些延时在主程序页面中移除splash,不然无法显示页面
    FlutterNativeSplash.remove();
  }

  一、添加依赖项

dependencies:
  flutter_native_splash: ^2.3.0

  

二、在工程文件夹下放置名为 flutter_native_splash.yaml 的新文件

flutter_native_splash: 

  # 该锯生成原生代码来自定义 Flutter 默认白色原生闪屏界面的背景色和闪屏图像。
  # 自定义下面的参数,然后在命令行终端运行下面的命令:
  # flutter pub run flutter_native_splash:create
  # 要恢复为 Flutter 默认的白色闪屏界面,运行下面的命令:
  # flutter pub run flutter_native_splash:remove

  # 只有 color 或 background_image 是必需的参数。使用 color 将闪屏界面的背景设置为单色。
  # 使用 background_image 可将 png 图像设置为闪屏界面的背景。该图像会被拉伸以适应应用大小。
  # color 和 background_image 不能同时设置,只有一个会被使用。 
  # color: "#42a5f5"
  background_image: "assets/launch_image.png"

  # 以下是可选的参数。去掉注释前面的 #可使参数起作用。

  # image 参数允许你指定在闪屏界面使用的图像。它必须是 png 文件,且应该是用于4倍像素密度的大小。
  #image: assets/splash.png

  # 该属性允许你指定图像作为商标在闪屏界面显示。它必须是 png 文件。现在它只支持 Android 和 iOS 。
  #branding: assets/dart.png

  # 为黑暗模式指定商标图像
  #branding_dark: assets/dart_dark.png

  # 要将商标图像放置在界面底部,可以使用 bottom 、 bottomRight 和 bottomLeft 。如果未指定或者指定了其它值,使用默认值 bottom 。
  # 确保该内容模式值与 android_gravity 值 和 ios_content_mode 值不相似。
  #branding_mode: bottom

  # color_dark 、 background_image_dark 和 image_dark 用于设备在黑暗模式时设置背景色和图像。
  # 如果没有指定,应用会使用上面的参数。如果指定了 image_dark ,必须要指定 color_dark 或 background_image_dark 。
  # color_dark 和 background_image_dark 不能同时设置。
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # android 、 ios 和 web 参数可用于不为对应的平台生成闪屏界面。
  #android: false
  #ios: false
  #web: false

  #  可用 android_gravity 、 android_gravity 、 ios_content_mode 和 web_image_mode 来设置闪屏图像的位置。默认是居中。
  #
  # android_gravity 可以是以下 Android Gravity 其中之一 (查看
  # https://developer.android.com/reference/android/view/Gravity): bottom 、 center 、
  # center_horizontal 、 center_vertical 、 clip_horizontal 、 clip_vertical 、 
  # end 、 fill 、 fill_horizontal 、 fill_vertical 、 left 、 right 、 start 或 top 。
  #android_gravity: center
  #
  # ios_content_mode 可以是以下 iOS UIView.ContentMode 其中之一 (查看
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill 、
  # scaleAspectFit 、 scaleAspectFill 、 center 、 top 、 bottom 、
  # left 、 right 、 topLeft 、 topRight 、 bottomLeft 或  bottomRight 。
  #ios_content_mode: center
  #
  # web_image_mode 可以是以下模式其中之一:center 、 contain 、 stretch 和 cover 。
  #web_image_mode: center

  # 要隐藏通知栏,使用 fullscreen 参数 。在 Web 上不起作为,因为 Web 没有通知栏。默认是 false 。
  # 注意: 不像 Android 、 iOS 当应用加载时不会自动显示通知栏。
  #       要显示通知栏,在 Flutter 应用中添加以下代码:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # 如果改变了 info.plist 的名字,可以使用 info_plist_files 指定对应的文件名。 
  # 只需移除下面三行前面的 # 字符,不要移除任何空格:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist' 

  有的操作是

flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml

  

标签:image,flutter,dark,splash,闪屏,Flutter,png
From: https://www.cnblogs.com/xiongwei/p/18348977

相关文章

  • Flutter 插件之http(介绍、使用、二次封装)
    背景在我们日常开发过程中,经常会使用到网络请求,而在Flutter插件中,最常用的请求插件一共两个,分别是:1、dio2、http其中dio我已经做过详细介绍了(post、get等请求、文件上传、请求重试等),这里就不做过多阐述,下面附上文章链接,如有需要可前往查看。https://blog.csdn.net/WangQin......
  • Flutter 自定义画笔案例
    首先让我们来看下这张图当UI做的设计图中有这么一个元素,我想大多数人第一反应就是叫UI切图,然后直接使用Image加载,我一开始也是这么做的,毕竟省时省力省心。但是由于后面需要针对不同的状态设置不同的颜色,我不想写过多判断语句来切换图标(我目前的做法是实现一个枚举类,然后拓展该......
  • Flutter项目引入不同格式图片
    ​今天尝试在Flutter中引用本地图片:最初在页面中直接引入图片,控制台报错:Unabletoloadasset:"images/***"发现自己未对该静态资源文件夹进行配置声明在pubspec.yaml文件中对assets进行配置:images/表示包含的是images这一整个目录文件夹下的所有静态资源此时重启......
  • HarmonyOS 集成 Flutter 问题记录
    1、DevEco-Studio升级到DevEco-StudioNEXTDeveloperBeta25.0.3版本之后报错:>hvigorERROR:Schemavalidatefailed.Detail:Pleasecheckthefollowingfields.{instancePath:'modules[2].srcPath',keyword:'pattern',params:{pa......
  • flutter开发实战-go_router使用
    flutter开发实战-go_router使用一、go_router介绍与特性go_router是一个Flutter的第三方声明式路由插件,使用路由器API提供一个方便的、基于url的API,用于在不同屏幕之间导航。可以定义URL模式、使用URL导航、处理深度链接以及许多其他与导航相关的场景。GoRouter具有许多......
  • Flutter网络错误全解析:当“A network error occurred“遇上“https://maven.google.co
    摘要:在Flutter开发过程中,我们经常需要从远程仓库获取依赖包,而https://maven.google.com/是Flutter依赖的主要来源之一。然而,开发者可能会遇到"Anetworkerroroccurredwhilechecking‘https://maven.google.com/’"的错误提示。本文将从资深Flutter开发专家的角度出发,......
  • flutter中使用rabbitmq
    依赖dart_amqp:^0.3.1#rabbitMq接收发送消息工具封装import'package:dart_amqp/dart_amqp.dart';///封装RabbitMQ的服务类classRabbitMQService{lateConnectionSettings_settings;//RabbitMQ连接设置lateClient_client;//RabbitMQ客户端late......
  • flutter 根据网址生成二维码
    依赖qr_flutter:^4.1.0#二维码代码Center(child:Column(children:[Center(child:QrImageView(data:'https://www.baidu.com/',version:QrVersions.auto,......
  • flutter在监听设备
    依赖universal_platform:^1.1.0#判断设备用于检测平台类型(如Android、iOS、Web)flutter_device_type:^0.4.0#设备是否为平板(苹果与安卓)代码classMyApp1extendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(......
  • 初识Flutter问答&学习步骤
    大家好,我是有用就点赞学习Flutter=Flutter(UI库)+Dart(语言)编写Flutter应用的语言是?Dart语言Flutter里的组件叫?Widget组件Flutter是哪家公司推出的?Google什么是自渲染?(跨端一致性)1)一次编写,四处运行就是跨端的真谛。2)目前的场景:Android、IOS、PC、......