Flutter：启动时初始化变量

Question

我正在尝试使用保存在SharedPreferences中的值来初始化我的应用程序中的几个变量。在Flutter中，SharedPreferences是异步的，因此它会导致稍后在代码中初始化变量，这在我的应用程序中产生了问题，因为在调用build方法时某些变量为null。

这是我编写的一个小测试Flutter应用程序，用于演示此问题：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

class TestingApp extends StatefulWidget {

  TestingApp() {}

  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return new _CupertinoNavigationState();
  }
}

class _CupertinoNavigationState extends State<TestingApp> {

  int itemNo;

  @override
  void initState() {
    super.initState();
//    SharedPreferences.getInstance().then((sp) {
//      sp.setInt("itemNo", 3);
//    });
    SharedPreferences.getInstance().then((sp)  {
      print("sp " + sp.getInt("itemNo").toString());
      setState(() {
        itemNo = sp.getInt("itemNo");
      });
    });
    print("This is the item number " + itemNo.toString());
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    print("item number on build " + itemNo.toString());
    return new Text("Hello");
  }
}

这是控制台中的结果：

Performing full restart...
flutter: This is the item number null
flutter: item number on build null // build method being called and variable is null
Restarted app in 1 993ms.
flutter: sp 3
flutter: item number on build 3

您可以看到，当我尝试在启动时从SharedPreferences中获取变量时，由于SharedPreference是异步的，因此itemNo为null。然后，应用程序运行build方法，并在itemNo = null上运行build方法，这会导致应用程序崩溃。

一旦从SharedPreferences中获取值，我将调用setState，然后使用正确的值再次调用build方法。但是，使用itemNo = null构建的初始调用应该不会发生。

我希望有一个SharedPreferences的同步方法，但似乎不存在。如何运行应用程序，以便在启动时在Flutter中正确初始化变量？

我试图通过使用同步方法初始化问题来解决此问题，方法是写入json文件，然后使用以下简短的Flutter测试应用读取该文件-对我来说，将变量保存为初始化似乎有点过头，但是我仍然尝试一下：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

class TestingApp extends StatefulWidget {

  TestingApp() {}

  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return new _CupertinoNavigationState();
  }
}

class _CupertinoNavigationState extends State<TestingApp> {

  int itemNo;
  File  jsonFile;
  String fileName = "items.json";
  Directory dir;
  bool fileExists = false;

void createFile(Map content, Directory dir, String fileName) {
//  print("Creating file for category " + dir.path);
  File file = new File(dir.path + "/" + fileName);
  file.createSync();
  fileExists = true;
  file.writeAsStringSync(json.encode(content));
}

void writeToFile(int itemNo) {
//  print("Writing to category file");
  Map itemMap = new Map();
  itemMap['item'] = itemNo;
  if (fileExists) {
    print("category file exists");
    Map jsonFileContent = json.decode(jsonFile.readAsStringSync());
    jsonFileContent.addAll(itemMap);
    jsonFile.writeAsStringSync(json.encode(itemMap));
  } else {
    print("category File does not exists");
    getApplicationDocumentsDirectory().then((Directory directory) {
      dir = directory;
      createFile(itemMap, dir, fileName);
    });

  }
}

fetchSavedItemNo() {
  //load the currency from the saved json file.
  getApplicationDocumentsDirectory().then((Directory directory) {
    dir = directory;
    jsonFile = new File(dir.path+ "/" + fileName);
    fileExists = jsonFile.existsSync();
    setState(() {
      if (fileExists)
        itemNo = json.decode(jsonFile.readAsStringSync())['item'];
      print("fetching saved itemNo " +itemNo.toString());
      if (itemNo == null) {
        itemNo = 0;
      }
    });


    return itemNo;
    //else the itemNo will just be 0
  });
}

  @override
  void initState() {
    super.initState();
    writeToFile(3);
    setState(() {
      itemNo = fetchSavedItemNo();
    });

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    print("item number on build " + itemNo.toString());
    return new Text("Hello");
  }
}

我仍然得到在变量完全初始化之前调用build方法的结果，这会导致应用程序崩溃。

Performing full restart...
flutter: category File does not exists
flutter: item number on build null   // the build method is called here
Restarted app in 1 894ms.
flutter: fetching saved itemNo 3
flutter: item number on build 3

如何在应用启动时在Flutter中初始化变量？

Answer 1

正如GünterZöchbacher正确指出的那样，这FutureBuilder是要走的路。在您的情况下，它看起来像这样：

import 'dart:async'; // you will need to add this import in order to use Future's

Future<int> fetchSavedItemNo() async { // you need to return a Future to the FutureBuilder
    dir = wait getApplicationDocumentsDirectory();
    jsonFile = new File(dir.path+ "/" + fileName);
    fileExists = jsonFile.existsSync();

    // you should also not set state because the FutureBuilder will take care of that
    if (fileExists)
        itemNo = json.decode(jsonFile.readAsStringSync())['item'];

    itemNo ??= 0; // this is a great null-aware operator, which assigns 0 if itemNo is null

    return itemNo;
}

@override
Widget build(BuildContext context) {
    return FutureBuilder<int>(
        future: fetchSavedItemNo(),
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
             if (snapshot.connectionState == ConnectionState.done) {
                 print('itemNo in FutureBuilder: ${snapshot.data}';
                 return Text('Hello');
             } else
                 return Text('Loading...');
        },
    );
}

我还相应地更改了您的fetchSavedItemNo函数以返回Future。

较短的书写方式：

if (itemNo != null)
    itemNo = 0;

以下是使用null感知运算符的内容：

itemNo ??= 0;

结论

如您在我的代码中所见，我在TextWidget 周围加上了FutureBuilder。在Flutter中，您可以使用来解决大多数问题Widget。我还介绍了“正在加载...” Text，可以在仍在加载时替换“ Hello” 。TextitemNo

没有“ hack”会删除加载时间并itemNo在启动时为您提供访问权限。您可以通过惯用的方式执行此操作，或者延迟启动时间。

每次加载某些东西时，您将需要使用占位符来加载，因为它暂时无法使用。

额外

顺便说一句，你也可以去掉“载入中...” Text，并务必将“你好”文本，因为你将永远看不到的“正在加载...” Text在您的情况，它只是碰巧方式太快。

另一个选择是，如果没有数据，则跳过ConnectionState并仅返回a Container：

FutureBuilder<int>(
    future: fetchSavedItemNo,
    builder: (BuildContext context, AsyncSnapshot<int> snapshot) => snapshot.hasData 
        ? Text(
            'Hello, itemNo: ${snapshot.data}',
          )
        : Container(),
)

如果您的用户界面不受影响

您可以通过以下方式使异步简单地在initState我的fetchSavedItemNo函数中执行API逻辑initState：

@override
void initState() {
    super.initState();
    fetchSavedItemNo(); // continue your work in the `fetchSavedItemNo` function
}