Flutter启动屏幕插件init_screen的使用

Flutter启动屏幕插件init_screen的使用

init_screen 是一个易于使用的多功能启动屏幕插件，可以用来介绍你的应用程序。

示例用法

最简单的示例是在你的登录页面中返回 InitScreen 类。例如：

[@override](/user/override)
build(BuildContext context) {
    return InitScreen([Text("hi"), Text("am"), Text("sample content")]);
}

这将创建一个启动屏幕，并显示其三个子部件。你可以添加任何你想要的部件，但请注意 InitScreen 只会将它们居中。你需要自己设计布局。

修改

你可以改变很多与 InitScreen 类相关的行为和设置。有关完整的列表，请查看 InitScreen 类的文档。

这里有一个例子，展示如何自定义导航按钮：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

    // 这个很重要！请确保 GlobalKey 是为 InitScreenState 设定的
    final GlobalKey<InitScreenState> _key = GlobalKey();

    _buildWithCustomNavs() {
        return InitScreen(
            // 显示的子部件
            [Text("test"), Text("[3]")],
            key: _key, // 需要用于回调
            customNavButtonBuilder: (index) { // 自定义导航按钮构建器
                return IconButton(
                    icon: Icon(Icons.ac_unit), // 使用你喜欢的图标
                    onPressed: () => _key.currentState.navBtnClick(index), // 必须使用公共回调
                );
            },
        );
    }

    [@override](/user/override)
    Widget build(BuildContext context) {
        return _buildWithCustomNavs();
    }
}

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 init_screen 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'init_screen demo',
      home: MyHomePage(),
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.teal,
        primaryColor: Colors.teal.shade300,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.teal,
        primaryColor: Colors.teal.shade300,
        accentColor: Colors.teal.shade300,
        toggleableActiveColor: Colors.teal.shade300,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<InitScreenState> _key = GlobalKey();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  var _controller = TextEditingController();
  final ValueNotifier<bool> isDone = ValueNotifier(false);
  bool done = false;

  _buildAGB() {
    return SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Text("AGB"), // 这里用 Text 代替 AGB 组件
      ),
    );
  }

  _buildWithCustomNavs() {
    return InitScreen(
      children: [Text("test"), _buildAGB(), Text("[3]")],
      key: _key, // 需要用于回调
      customNavButtonBuilder: (index) {
        // 自定义导航按钮构建器
        return IconButton(
          icon: Icon(Icons.ac_unit), // 使用你喜欢的图标
          onPressed: () => _key.currentState.navBtnClick(index), // 必须使用公共回调
        );
      },
    );
  }

  _buildWithValidator() {
    return InitScreen(
      children: [
        Padding(
          padding: EdgeInsets.only(left: 64, right: 64),
          child: Center(
            child: Form(
              key: _formKey,
              child: TextFormField(
                controller: _controller,
                validator: (val) {
                  if (val.isEmpty) return "Must not be empty!";
                  return null;
                },
              ),
            ),
          ),
        ),
        Text("Hey you reached me!")
      ],
      validatorKey: _formKey,
    );
  }

  _buildSimple() {
    isDone.addListener(() {
      setState(() {
        done = true;
      });
    });
    if (!done) {
      return InitScreen(
        isDoneNotifier: isDone,
        children: [Text("hi"), Text("am"), Text("simple")],
        // showNavHelpers: true,
      );
    } else {
      return Scaffold(
        body: Center(
          child: Text("done!"),
        ),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _buildSimple();
  }
}