Flutter启动页插件at_splash的使用

Flutter启动页插件at_splash的使用

ATsplash

ATmega 的 Flutter 包，可以通过几行代码实现启动页，并支持自定义属性。

Author

Features

  • 启动持续时间与回调
  • 自定义图像和文本图标
  • 渐变背景

License

MIT

Usage/Examples

以下是一个完整的示例，展示如何使用 ATsplash 插件来创建一个带有自定义图像、文本图标以及回调函数的启动页。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(), // 设置启动页作为主页
    );
  }
}

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return ATsplash(
      // 使用 ATsplash 插件
      isTextIcon: true, // 是否显示文本图标
      isImageIcon: true, // 是否显示图像图标
      imageSize: 300, // 图像大小
      textColor: Colors.yellow, // 文本颜色
      afterSplash: () {
        print("启动页加载完成！"); // 启动页完成后执行的回调
      },
      image: Image.asset('assets/images/logo.png'), // 自定义图像
      text: Text(
        "欢迎使用我的应用！", // 自定义文本
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
    );
  }
}

完整示例说明

  1. 导入插件：

    import 'package:atsplash/atsplash.dart';

    首先需要在项目中导入 at_splash 插件。

  2. 设置启动页：

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(), // 将启动页设置为应用的主页
    );
  }
}

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

1 回复

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


at_splash 是一个用于在 Flutter 应用中实现启动页（Splash Screen）的插件。它可以帮助你在应用启动时显示一个自定义的启动页，并在指定的时间后自动跳转到主页面。

安装 at_splash 插件

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

dependencies:
  flutter:
    sdk: flutter
  at_splash: ^1.0.0  # 请使用最新版本

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

使用 at_splash 插件

  1. 导入插件：

    在你的 Dart 文件中导入 at_splash 插件：

    import 'package:at_splash/at_splash.dart';

  2. 创建启动页：

    使用 AtSplash 小部件来创建启动页。你可以自定义启动页的背景、图标、文本等内容。

    class SplashScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AtSplash(
      duration: 3, // 启动页显示时间（秒）
      nextScreen: HomeScreen(), // 启动页结束后跳转的页面
      backgroundColor: Colors.blue, // 启动页背景颜色
      logo: FlutterLogo(size: 150), // 启动页显示的Logo
      title: Text(
        'My App',
        style: TextStyle(fontSize: 24, color: Colors.white),
      ), // 启动页显示的标题
    );
  }
}

  3. 设置启动页为应用的初始页面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(), // 设置启动页为初始页面
    );
  }
}

  4. 创建主页面：

    创建一个 HomeScreen 页面，作为启动页结束后跳转的页面：

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

完整示例

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

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

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

class SplashScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AtSplash(
      duration: 3,
      nextScreen: HomeScreen(),
      backgroundColor: Colors.blue,
      logo: FlutterLogo(size: 150),
      title: Text(
        'My App',
        style: TextStyle(fontSize: 24, color: Colors.white),
      ),
    );
  }
}

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