为什么我的 initState() 在构建小部件之前不调用使用 sharedprefs 的函数？

Question

在我的 flutter 应用程序中，我尝试创建一个一次性/第一次屏幕，在首次下载该应用程序时显示教程。我决定使用共享首选项来存储数据。但是每当我运行我得到 Failed assertion: boolean expression must not be null 的应用程序时：那是由于我的变量 _seen代码未被初始化，当我进一步查看时，我发现我的代码在用于构建小部件后正在初始化变量。有办法解决这个问题吗？

我的代码

void main() => runApp(Start());

class Start extends StatefulWidget 
{
  @override
  App createState() => new App();
}

class App extends State<Start>
{
  bool _seen;

  @override
  void initState() 
  {
    print(1);
    _checkFirstTime();
    super.initState();
  }

  _checkFirstTime() async 
  {
    print(1.1);
    SharedPreferences prefs = await SharedPreferences.getInstance();  
    _seen = (prefs.getBool('seen') ?? false);
    print(1.2);
  }  

  _updateFirstTime() async
  {
    SharedPreferences prefs = await SharedPreferences.getInstance();  
    _seen = true;
    prefs.setBool('seen', true);
  }

  Widget build(BuildContext context) 
  {
    print(2);
    bool seen = _seen;  
    if (_seen == false) {_updateFirstTime();}
    print(2.1);
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: seen ? HomeScreen() : SignUpScreen(),
    );
  } 
}

Answer 1

您可以复制粘贴运行下面的完整代码
第 1 步：您可以将逻辑 checkFirstTime() 放入 main()
第二步：要在build中使用updateFirstTime()，可以使用initialRoute来避免 seen值更新导致SingupScreen()突然变为HomeScreen()

代码片段

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  SharedPreferences prefs = await SharedPreferences.getInstance();
  seen = (prefs.getBool('seen') ?? false);

  runApp(MyApp());
}
...
initialRoute: seen == false || seen == null ? "/sign" : "/",
  routes: {
    '/': (context) => HomeScreen(
      title: "demo",
    ),
    "/sign": (context) => SignUpScreen(),

工作演示

完整代码

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

bool seen;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  SharedPreferences prefs = await SharedPreferences.getInstance();
  seen = (prefs.getBool('seen') ?? false);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: seen == false || seen == null ? "/sign" : "/",
      routes: {
        '/': (context) => HomeScreen(
          title: "demo",
        ),
        "/sign": (context) => SignUpScreen(),
      },
    );
  }
}

class SignUpScreen extends StatelessWidget {
  _updateFirstTime() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    seen = true;
    prefs.setBool('seen', true);
  }

  @override
  Widget build(BuildContext context) {
    if (seen == false) {
      _updateFirstTime();
    }
    return Text('SignUpScreen');
  }
}

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

  final String title;

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

class _HomeScreenState extends State<HomeScreen> {
  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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 2

在这种情况下，您可以使用 Future 构建器。这是一个例子

import 'package:flutter/material.dart';

void main() => runApp(Start());

class Start extends StatefulWidget {
  @override
  App createState() => new App();
}

class App extends State<Start> {
  bool _seen;

  @override
  void initState() {
    print(1);
    _checkFirstTime();
    super.initState();
  }

  Future<bool> _checkFirstTime() async {
    print(1.1);
    SharedPreferences prefs = await SharedPreferences.getInstance();
    _seen = (prefs.getBool('seen') ?? false);
    print(1.2);
    return _seen;
  }

  _updateFirstTime() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    _seen = true;
    prefs.setBool('seen', true);
  }

  Widget build(BuildContext context) {
    print(2.1);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FutureBuilder<bool>(
        future: _checkFirstTime(),
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        if (snapshot.hasData) {

          if (_seen == false) {
            _updateFirstTime();
          }

          return snapshot.data ? HomeScreen() : SignUpScreen();
        } else {
          //you can put anything while retrieving data 
          return Container();
        }
      }),
    );
  }
}

Answer 3

这里的实际问题是由于 SharedPreferences API 是异步的，所以 build() 方法在加载 prefs 之前触发，正如预期的那样。

进行中：

1. initState
2. _checkFirstTime (starts)
3. build 
4. _checkFirstTime (completes)

有很多方法可以修复它，可以初始化为 false，可以使用 FutureBuilder，可以使用 _isInitComplete 标志等。

一个简单的解决方法是将其添加到构建的顶部：

if(_seen == null) return Container();

现在，将显示空视图 4 毫秒或 Prefs 完成加载所需的任何时间。这在功能上与使用 FutureBuilder 相同。不要忘记在 _checkFirstTime 末尾调用 setState() 来触发刷新。

为什么我的 initState() 在构建小部件之前不调用使用 sharedprefs 的函数？

Why does my initState() not call a function that uses sharedprefs before the widget is built?

function

asynchronous

flutter

dart

sharedpreferences