Flutter启动画面插件so_simple

Flutter启动画面插件so_simple_splash的使用

一个可定制且具有动画效果的启动屏幕插件。该插件支持平滑淡入淡出和缩放效果，并提供了自定义文本、logo、渐变和颜色的功能。

特性

淡入淡出和缩放动画，以实现流畅的启动屏幕过渡。
可自定义的logo、文本、背景颜色和渐变选项。
控制动画持续时间并在启动屏幕加载期间添加自定义逻辑。
在等待和启动屏幕结束时提供钩子函数。

安装

在你的 pubspec.yaml 文件中添加 flutter_Simple_splash 依赖：

dependencies:
  flutter_Simple_splash: ^0.0.1

使用方法

import 'package:flutter_Simple_splash/flutter_Simple_splash.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Simple_splash(
          backgroundColor: Colors.blueAccent, // 设置背景颜色
          duration: Duration(seconds: 2), // 动画持续时间
          logo: Image.asset('assets/logo.png'), // 显示logo
          text: '欢迎来到MyApp', // 主要文本
          textSize: 30, // 文本大小
          textColor: Colors.white, // 文本颜色
          gradient: LinearGradient(colors: [Colors.blue, Colors.purple]), // 背景渐变
          whileWaiting: () async {
            // 模拟等待任务，例如获取数据
            await Future.delayed(Duration(seconds: 2));
          },
          onFinished: () async {
            // 启动屏幕结束后导航到下一页
            Navigator.of(context).pushReplacement(
              MaterialPageRoute(builder: (_) => NextPage()),
            );
          },
        ),
      ),
    );
  }
}

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

wuwangju 1楼

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

so_simple_splash 是一个用于在 Flutter 应用中轻松添加启动画面的插件。它允许你快速配置和显示启动画面，而不需要编写复杂的代码。以下是使用 so_simple_splash 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  so_simple_splash: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建启动画面

在你的 lib 目录下创建一个新的 Dart 文件，例如 splash_screen.dart，并在其中配置启动画面。

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

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SoSimpleSplash(
      backgroundColor: Colors.white,  // 设置背景颜色
      duration: 3,  // 设置启动画面显示的时长（秒）
      nextScreen: HomeScreen(),  // 启动画面结束后跳转的页面
      image: Image.asset('assets/logo.png'),  // 设置启动画面中的图片
      title: Text(
        'My App',
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),  // 设置启动画面中的标题
      subtitle: Text(
        'Welcome to My App',
        style: TextStyle(
          fontSize: 16,
          color: Colors.grey,
        ),
      ),  // 设置启动画面中的副标题
    );
  }
}

3. 配置主页

在 lib 目录下创建 home_screen.dart 文件，并定义主页内容。

import 'package:flutter/material.dart';

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

4. 修改 `main.dart`

在 main.dart 文件中，将 SplashScreen 设置为应用的初始页面。

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: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),  // 设置启动画面为初始页面
    );
  }
}

5. 添加图片资源

确保你在 pubspec.yaml 文件中添加了图片资源：

flutter:
  assets:
    - assets/logo.png

Flutter启动画面插件so_simple_splash的使用