Flutter 入门屏幕仅一次

2023-11-22

我是 flutter 和 dart 的新手,我正在尝试制作一个带有 3 页的入门屏幕的应用程序,并且当用户已经打开该应用程序一次时,我试图跳过入门屏幕。我见过与共享偏好类似的东西,但我无法使其发挥作用。

这是我的入门屏幕:

    class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {

  final int _numPages = 3;
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  List<Widget> _buildPageIndicator() {
    List<Widget> list = [];
    for (int i = 0; i < _numPages; i++) {
      list.add(i == _currentPage ? _indicator(true) : _indicator(false));
    }
    return list;
  }

  Widget _indicator(bool isActive) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 8.0,
      width: isActive ? 24.0 : 16.0,
      decoration: BoxDecoration(
        color: isActive ? Colors.white : Color(0xFF7B51D3),
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.1, 0.4, 0.7, 0.9],
              colors: [
                Color(0xFF3594DD),
                Color(0xFF4563DB),
                Color(0xFF5036D5),
                Color(0xFF5B16D0),
              ],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 40.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  alignment: Alignment.centerRight,
                  child: FlatButton(
                    onPressed: () => print('Skip'),
                    child: Text(
                      'Skip',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 600.0,
                  child: PageView(
                    physics: ClampingScrollPhysics(),
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/lorem_Ipsum.png',
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'Welcome to ...',
                              style: kTitleStyle,
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'lorem Ipsum',
                              style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/lorem_Ipsum.png',
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'lorem Ipsum',
                              style: kTitleStyle,
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'lorem Ipsum',
                              style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/lorem_Ipsum.png',
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'lorem Ipsum',
                              style: kTitleStyle,
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'lorem Ipsum',
                              style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: _buildPageIndicator(),
                ),
                _currentPage != _numPages - 1
                    ? Expanded(
                        child: Align(
                          alignment: FractionalOffset.bottomRight,
                          child: FlatButton(
                            onPressed: () {
                              _pageController.nextPage(
                                duration: Duration(milliseconds: 500),
                                curve: Curves.ease,
                              );
                            },
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Text(
                                  'Next',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 22.0,
                                  ),
                                ),
                                SizedBox(width: 10.0),
                                Icon(
                                  Icons.arrow_forward,
                                  color: Colors.white,
                                  size: 30.0,
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    : Text(''),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: _currentPage == _numPages - 1
          ? Container(
              height: 50.0,
              width: double.infinity,
              color: Colors.white,
              child: GestureDetector(
                onTap: () => print('Get Started'),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 5.0),
                    child: Text(
                      'Get Started',
                      style: TextStyle(
                        color: Color(0xFF5B16D0),
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            )
          : Text(''),
    );
  }
}

您可以使用SharedPreferences in main()
并设置一个initScreen第一次初始化时的变量,设置为1表示已初始化
And In MyApp initialRoute check initScreen is null决定走哪条路线
您可以复制粘贴运行下面的完整代码

代码片段

int initScreen;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences prefs = await SharedPreferences.getInstance();
  initScreen = await prefs.getInt("initScreen");
  await prefs.setInt("initScreen", 1);
  print('initScreen ${initScreen}');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: initScreen == 0 || initScreen == null ? "first" : "/",
      routes: {
        '/': (context) => MyHomePage(
              title: "demo",
            ),
        "first": (context) => OnboardingScreen(),
      },
    );
  }
}

完整代码

    import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter/services.dart';

int initScreen;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences prefs = await SharedPreferences.getInstance();
  initScreen = await prefs.getInt("initScreen");
  await prefs.setInt("initScreen", 1);
  print('initScreen ${initScreen}');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: initScreen == 0 || initScreen == null ? "first" : "/",
      routes: {
        '/': (context) => MyHomePage(
              title: "demo",
            ),
        "first": (context) => OnboardingScreen(),
      },
    );
  }
}

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.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  final int _numPages = 3;
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  List<Widget> _buildPageIndicator() {
    List<Widget> list = [];
    for (int i = 0; i < _numPages; i++) {
      list.add(i == _currentPage ? _indicator(true) : _indicator(false));
    }
    return list;
  }

  Widget _indicator(bool isActive) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 8.0,
      width: isActive ? 24.0 : 16.0,
      decoration: BoxDecoration(
        color: isActive ? Colors.white : Color(0xFF7B51D3),
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.1, 0.4, 0.7, 0.9],
              colors: [
                Color(0xFF3594DD),
                Color(0xFF4563DB),
                Color(0xFF5036D5),
                Color(0xFF5B16D0),
              ],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 40.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  alignment: Alignment.centerRight,
                  child: FlatButton(
                    onPressed: () => print('Skip'),
                    child: Text(
                      'Skip',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 600.0,
                  child: PageView(
                    physics: ClampingScrollPhysics(),
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/lorem_Ipsum.png',
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'Welcome to ...',
                              //style: kTitleStyle,
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'lorem Ipsum',
                              //style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/lorem_Ipsum.png',
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'lorem Ipsum',
                              //style: kTitleStyle,
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'lorem Ipsum',
                              //style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/lorem_Ipsum.png',
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                            ),
                            SizedBox(height: 30.0),
                            Text(
                              'lorem Ipsum',
                              //style: kTitleStyle,
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'lorem Ipsum',
                              //style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: _buildPageIndicator(),
                ),
                _currentPage != _numPages - 1
                    ? Expanded(
                        child: Align(
                          alignment: FractionalOffset.bottomRight,
                          child: FlatButton(
                            onPressed: () {
                              _pageController.nextPage(
                                duration: Duration(milliseconds: 500),
                                curve: Curves.ease,
                              );
                            },
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Text(
                                  'Next',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 22.0,
                                  ),
                                ),
                                SizedBox(width: 10.0),
                                Icon(
                                  Icons.arrow_forward,
                                  color: Colors.white,
                                  size: 30.0,
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    : Text(''),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: _currentPage == _numPages - 1
          ? Container(
              height: 50.0,
              width: double.infinity,
              color: Colors.white,
              child: GestureDetector(
                onTap: () => print('Get Started'),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 5.0),
                    child: Text(
                      'Get Started',
                      style: TextStyle(
                        color: Color(0xFF5B16D0),
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            )
          : Text(''),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter 入门屏幕仅一次 的相关文章

随机推荐

  • Qt 不加载 JPG ,仅加载 PNG

    我与同事在 Windows 7 64 位版本 Visual Studio 2008 上处理同一个项目 他们加载 JPG 并开始工作 通过 QPixmap 和样式表 并且有效 但对我来说 我只能使用 PNG 其余的根本不起作用 我还尝试更改环
  • Cocoa TextView 中的语法突出显示?经验?建议?有想法吗? [复制]

    这个问题在这里已经有答案了 可能的重复 Cocoa 应用程序的语法着色 我对 感兴趣语法高亮 in a Cocoa文本视图 我找到了几个资源 灵活接近 via a flex模式匹配textStorageDidProcessEditing i
  • Ruby 数组初始化 [重复]

    这个问题在这里已经有答案了 我需要知道这两个语句之间的技术差异以及为什么它会这样 arr Array new 3 abc gt abc abc abc arr last upcase gt ABC arr gt ABC ABC ABC wh
  • 如何永久忽略 ActiveRecord::Base 类中的数据库列?

    我有一个遗留数据库 我正在尝试使用 Rails 对其进行建模 其中一个表有一列名为attributes 我认为这是 Rails 保留的名称 下面是该表的 SQL CREATE TABLE album id int 11 NOT NULL a
  • 如何以编程方式在 Windows 7 或 Windows Server 2008 上创建 Windows 用户帐户?

    我一直在尝试在 Windows 7 计算机上创建新的本地用户帐户 我使用了 System DirectoryServices DirectoryEntry 类 如here 但它似乎不起作用 这是文章中的代码 static void Main
  • ReactJs this.props.router 未定义

    你好 我正在学习 React js 我遇到了一个问题 当我尝试使用 React Router 更改回主页时 出现以下错误 未捕获的类型错误 无法读取未定义的属性 push 这是我的代码 您可以看到我正在调用导航函数 我的 client js
  • 为什么我的教授使用两个 getchar();? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 为什么我的教授使用两个 getchar 在我们的 C 程序教程结束时 对此 更好的方法 是什么 他正在等待用户输入 以便您可以看到程序的输出 否则它将完成并且输出将不可见 取决于操作系统
  • 使用 matplotlib 绘制 sklearn LinearRegression 输出

    导入文件后 我使用 numpy 将 x values 和 y values 分开 import pandas as pd from sklearn import linear model from matplotlib import pyp
  • 将 pandas 数据帧拆分为 N 个块[关闭]

    Closed 这个问题需要调试细节 目前不接受答案 我目前正在尝试将 pandas 数据帧拆分为未知数量的包含每 N 行的块 我尝试过使用 numpy array split 这个函数 但是将数据帧分割成包含未知行数的 N 个块 有没有一种
  • Mono 兼容的依赖注入框架

    Which 依赖注入框架兼容 并经过测试 Mono2 4 2 3 运行时 发行说明 温莎城堡 is
  • Fragment 元素中的 Fragment onClick 方法

    我读了很多关于片段的文章 但我仍然对如何做什么感到困惑 我有一个 MainActivity 它并排显示两个片段 在其中一个片段中 我有一个按钮 并在该按钮的片段布局 XML 中定义 android onClick buttonClicked
  • 使用 wget 递归获取其中包含任意文件的目录

    我有一个 Web 目录 用于存储一些配置文件 我想使用 wget 来提取这些文件并维护它们当前的结构 例如 远程目录如下所示 http mysite com configs vim vim 包含多个文件和目录 我想使用 wget 在客户端上
  • 使用开发依赖项在 Heroku 上部署时尝试从命名空间“Symfony\Bundle\WebProfilerBundle”加载类“WebProfilerBundle”

    我们有一个托管在 Heroku 上的 Symfony 4 3 Web 应用程序 这是一个新的设置我们从未设法让开发模式正常工作 网上有很多类似的问题 但没有一个能解决我们在这里面临的确切症状 该项目是使用命令行创建的 composer cr
  • MySQL InnoDB 数据库恢复

    我必须恢复在 MySQL 5 0 中无意中删除的数据库 通过检查备份文件 我似乎只有 FRM 文件来保存数据库数据 任何人都可以建议这是否是我从备份执行数据库恢复 导入所需的全部内容 或者我还需要提供其他文件来完成此操作吗 frm 文件不是
  • 如何像 Eclipse 一样清理 IntelliJ IDEA 中的项目缓存?

    有时IDE会因为缓存而出现一些错误 在Eclipse中 我们可以使用clean来解决问题 我怎样才能在 IntelliJ 中做到这一点 取决于您正在运行的版本 基本上是一样的 只需转到 File gt 使缓存无效 然后重新启动Intelli
  • 什么是 .exe 文件存根?

    我正在学习如何使用混淆我的程序集 NET反应堆 一种选择是 生成本机 x86 EXE 文件存根 我不明白它的目的 我导入一个程序集 例如 exe 文件 并输出一个经过混淆的 exe 文件 其大小大致相同 如果我检查过 生成本机 x86 文件
  • 在 VS2010 Express 中创建构造函数的代码片段

    VS 2010 Express 版本 适用于 C 中是否有任何现成的代码片段 可以使用选定属性中的参数创建构造函数 当我创建一个新类并编写以下代码时 public class FileDetails public int ID get se
  • 将 C# 控制台应用程序转换为 DLL

    我正在将 Betfair API 从 SOAP 重写为 JSON 并且按照之前的方式开始 将其作为控制台应用程序 然后从任务调度程序或 win 服务中调用 然而现在我被要求用代码做各种不同的工作 我不想为每项工作编写一个控制台应用程序 不同
  • error_code:如何设置和检查errno

    我试图了解在调用设置的 C 函数时应该使用什么类别errno在 Linux 上 我不确定所有可能的错误代码都是由 POSIX 定义的 所以我很想使用system category 但我喜欢稍后在代码中处理通用条件 所以我想做这样的事情 st
  • Flutter 入门屏幕仅一次

    我是 flutter 和 dart 的新手 我正在尝试制作一个带有 3 页的入门屏幕的应用程序 并且当用户已经打开该应用程序一次时 我试图跳过入门屏幕 我见过与共享偏好类似的东西 但我无法使其发挥作用 这是我的入门屏幕 class Onbo