Flutter启动画面插件splash_view的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter启动画面插件splash_view的使用

简介

splash_view 是一个用于在Flutter应用程序启动时显示启动画面的插件。它可以帮助开发者创建一个包含公司标志、内容等基本介绍信息的启动页面，以提升用户体验。

示例代码

下面是一个完整的示例demo，展示了如何在Flutter应用中使用 splash_view 插件：

import 'package:flutter/material.dart';
import 'package:splash_view/splash_view.dart';

void main() {
  runApp(
    MaterialApp(
      home: SplashView(
        backgroundColor: Colors.red,
        loadingIndicator: RefreshProgressIndicator(),
        logo: FlutterLogo(),
        done: Done(Home()),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Home Page')),
    );
  }
}

SplashView属性

以下是 SplashView 的主要属性及其说明：

Property Type Description
logo Widget 启动画面上的logo
title Widget 启动画面上的标题
subtitle Widget 启动画面上的副标题
loadingIndicator Widget 加载指示器
done Done 跳转到下一页
duration Duration 跳转到下一页的持续时间
backgroundColor Color 启动画面的背景颜色
backgroundImageDecoration BackgroundImageDecoration 启动画面的背景图片装饰
gradient Gradient 启动画面的渐变背景
bottomLoading bool 是否将加载指示器显示在底部
showStatusBar bool 是否显示状态栏和导航栏

Done属性

Done 用于设置跳转到下一页时的动画效果：

Property Type Description
animationDuration Duration 动画持续时间
curve Curve 动画曲线

设置背景

你可以通过以下三种方式设置启动画面的背景：

背景颜色

SplashView(
  backgroundColor: Colors.red,
)

渐变颜色

SplashView(
  gradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.green, Colors.blue],
  ),
)

背景图片

SplashView(
  backgroundImageDecoration: BackgroundImageDecoration(
    image: AssetImage('images/larry-page.jpg'),
  ),
)

更改加载指示器位置

默认情况下，加载指示器位于顶部。你可以通过设置 bottomLoading 属性将其移动到底部：

SplashView(
  bottomLoading: true,
)

显示/隐藏状态栏和导航栏

默认情况下，状态栏和导航栏是隐藏的。你可以通过设置 showStatusBar 属性来显示它们：

SplashView(
  showStatusBar: true,
)

如果你有任何问题或建议，欢迎在GitHub上提交issue。

希望这个帖子能帮助你更好地理解和使用 splash_view 插件！如果你有任何其他问题，请随时提问。


更多关于Flutter启动画面插件splash_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter启动画面插件splash_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用splash_view插件来创建启动画面的示例代码。

首先，你需要在pubspec.yaml文件中添加splash_view依赖：

dependencies:
  flutter:
    sdk: flutter
  splash_view: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以按照以下步骤设置启动画面：

  1. 创建一个启动画面布局：

    在lib目录下创建一个新的Dart文件，比如splash_screen.dart，并定义你的启动画面布局：

    import 'package:flutter/material.dart';
import 'package:splash_view/splash_view.dart';

class MySplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SplashView(
      imagePath: 'assets/images/splash.png',  // 替换为你的启动画面图片路径
      backgroundColor: Colors.white,
      duration: 3000,  // 持续时间，单位为毫秒
      nextScreen: MyHomePage(),  // 启动画面结束后要显示的页面
      loaderType: LoaderType.circle,  // 加载器类型，可选值有circle, cubeGrid, doubleBounce, fadeLoading, foldingCube, pulse, rotatingCircle, threeBounce, wave
    );
  }
}

    请确保你已经将启动画面图片添加到assets目录中，并在pubspec.yaml中声明它：

    flutter:
  assets:
    - assets/images/splash.png

  2. 修改main.dart文件：

    将main.dart文件的内容修改为使用你定义的启动画面布局：

    import 'package:flutter/material.dart';
import './splash_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MySplashScreen(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}

  3. 运行应用：

    使用flutter run命令运行你的应用，你应该能看到启动画面，并在设定的持续时间后跳转到主页。

以上是一个基本的示例，展示了如何使用splash_view插件在Flutter应用中实现启动画面。根据你的需求，你可以进一步自定义启动画面的布局、加载器类型以及持续时间等参数。

回到顶部