Flutter 颤振：启动时初始化变量

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

下面是我编写的一个小型测试颤振应用程序，用于演示此问题：

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");
  }
}

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

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

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

我试图通过使用同步方法初始化变量来解决这个问题，方法是写入json文件，然后使用以下简短的颤振测试应用程序从中读取-对我来说，保存变量进行初始化似乎有些过分，但我还是尝试了一下：

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");
  }
}

如何在应用程序启动时在颤振中初始化变量？

正如正确指出的那样，

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...');
        },
    );
}

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

以下内容是否使用

结论 正如您在我的代码中看到的，我用一个

FutureBuilder

包围了您的

Text

小部件。在flatter中，您可以使用

小部件
解决大多数问题。我还引入了一个“加载…”
Text
，它可以在
itemNo
仍在加载时替换“Hello”
Text

没有任何“黑客”可以在启动时删除加载时间并允许您访问
itemNo
。你要么用惯用的方式这样做，要么推迟启动时间

每次加载某些内容时都需要使用占位符，因为它不是即时可用的

附加的
顺便说一下，您也可以删除“加载…”
文本
，并始终返回您的“Hello”文本，因为您将永远看不到“加载…”
文本
。在您的情况下，它发生得太快了

另一个选项是避开
连接状态
，如果没有数据，只返回一个
容器
：

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

Use
FutureBuilder
FutureBuilder是一个小部件，它根据未来的执行结果返回另一个小部件。在我的例子中，我不需要返回小部件，我需要返回保存的变量。谢谢你的回答。在我的例子中，我没有使用变量itemNo在我的小部件中显示，就像您使用文本小部件所做的那样。实际上，我正在使用itemNo saved down在应用程序启动时在web上查询API。我该怎么做呢？你可以在
builder
@Simon中执行你的API逻辑。事实上，我想我误解了你的问题。检查我答案的底部。我认为你在正确的轨道上。在我看来，我希望将API调用与小部件分开，并且只在它返回后设置state。我必须测试这个解决方案，然后再回复您。我相信应该有future:fetchsavedtemno（），而不是future:fetchsavedtemno，-否则您会收到一个错误，指出FutureBuilder期望future而不是（）->future
if (itemNo != null)
    itemNo = 0;

itemNo ??= 0;

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

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