Flutter:在启​​动时初始化变量

Question

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

这是我为演示此问题而编写的一个小型测试 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 为空。然后应用运行 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");
  }
}

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

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ünter Zö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-aware operator :

itemNo ??= 0;

结论

正如您在我的代码中看到的，我用 FutureBuilder 包围了您的 Text 小部件。在 Flutter 中，您可以使用 Widget 解决大多数问题。我还介绍了一个"Loading..." Text，可以代替"Hello" Text 而 itemNo 仍在加载中。

没有“破解”可以消除加载时间并让您在启动时访问您的 itemNo。你要么这样做，惯用的方式，要么延迟你的启动时间。

每次加载时都需要使用占位符进行加载，因为它不能立即可用。

附加

顺便说一句，您也可以只删除 "Loading..." Text 并始终返回您的 "Hello " 文本，因为您将 永远不会看到 “正在加载...” Text，它发生得太快了.

另一种选择是避开 ConnectionState，如果没有数据则只返回一个 Container:

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

如果您的 UI 不受影响

您可以使用我的 fetchSavedItemNo 函数在 initState 中简单地执行您的 API 逻辑，方法是让 initState 像这样异步:

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