Flutter启动画面插件remedi_splash的使用

Getting Started

remedi_splash 是一个用于在 Flutter 应用中添加启动画面的插件。本教程将指导你如何使用 remedi_splash 插件来为你的 Flutter 应用添加启动画面。

示例代码

以下是一个简单的示例代码，展示了如何在 Flutter 应用中使用 remedi_splash 插件。

import 'package:flutter/material.dart';
import 'package:remedi_splash/remedi_splash.dart'; // 导入 remedi_splash 插件

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

class MyApp extends StatelessWidget {
  // 这个小部件是应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题。
        primarySwatch: Colors.blue,
      ),
      home: SplashPage(), // 使用 SplashPage 作为首页
    );
  }
}

// 定义一个带有启动画面的小部件
class SplashPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RemediSplash(
      backgroundColor: Colors.blue, // 设置背景颜色
      logo: Image.asset('assets/logo.png'), // 设置启动画面的 Logo 图片
      logoHeight: 100.0, // 设置 Logo 的高度
      duration: Duration(seconds: 3), // 设置启动画面持续时间
      navigateTo: MyHomePage(title: 'Flutter Demo Home Page'), // 设置启动画面结束后跳转到的目标页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ""),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

解释

1. 导入插件:

   import 'package:remedi_splash/remedi_splash.dart';
   

   在 main.dart 文件中导入 remedi_splash 插件。

2. 定义启动页面:

   class SplashPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return RemediSplash(
         backgroundColor: Colors.blue,
         logo: Image.asset('assets/logo.png'),
         logoHeight: 100.0,
         duration: Duration(seconds: 3),
         navigateTo: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

   创建一个名为 SplashPage 的小部件，并使用 RemediSplash 来设置启动画面的相关属性，如背景颜色、Logo 图片、Logo 高度、持续时间和跳转目标页面。

3. 设置主页:

   home: SplashPage(),