Flutter从磁盘读取并生成按钮

Question

我正在尝试从文件中读取，并根据内容为页面生成按钮。

如果该文件具有"；Tim"Eric"Andy"我会得到三个名字受人尊敬的纽扣。

我发现了这个页面，它很有帮助。[Flutter键值][1]。但我无法以类似的方式让它发挥作用。我可以从文件中读写，但当我试图将它们加载到我得到的小部件中时。

需要类型为"List"的值，但得到类型为"_Future"的

我尝试了一些其他方法来实现这一点，但这似乎是最接近的。

函数我正在尝试调用

_loadplayers() async{
List<Widget>? _loaded_players;
final prefs = await SharedPreferences.getInstance();
final List<String>? players = (prefs.getStringList('players'));
players?.forEach((element) {
_loaded_players?.add(buttons(text: element, style: ElevatedButton.styleFrom(primary: Colors.lightBlue,onPrimary: Colors.white),onPressed: () => _selectPlayers(element))) ;
});
// setState(() {
// });
// _loaded_players;
return _loaded_players;
}

我怎么称呼它。

Widget _buildContainer(BuildContext context)  {
return Padding(
padding: EdgeInsets.all(25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text(
'Who is playing?',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
)
),
buttons(text: "Add Player",style: ElevatedButton.styleFrom(
primary: Colors.lightBlue,
onPrimary: Colors.white,
//shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),)
), onPressed: () => _NewPlayer(context)),
const SizedBox(
height: 25,
),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children:
_loadplayers()
),
),

我是个新手，所以我不太确定是否需要在这里使用setState，因为它只会在启动时加载。感谢您的帮助。[1] ：https://docs.flutter.dev/cookbook/persistence/key-value

Answer 1

加载窗口小部件函数不应该返回null，如果没有找到玩家，它应该返回一个空数组。以下是解决方案：

Future<List<Widget>> loadplayers() async {
List<Widget> _loaded_players = [];
final prefs = await SharedPreferences.getInstance();
final List<String>? players = (prefs.getStringList('players'));
players?.forEach((element) {
_loaded_players.add(buttons(text: element, style: ElevatedButton.styleFrom(primary: Colors.lightBlue,onPrimary: Colors.white),onPressed: () => _selectPlayers(element))) ;
});
return _loaded_players;
}

然后，当你想加载小部件时，它们应该被加载到FutureBuilder中，因为获取玩家的函数是异步函数，所以把卡包装在FutureBuilder:中

FutureBuilder(
future: loadplayers(),
builder: (context, snapshot){

if(snapshot.connectionState == ConnectionState.done && snapshot.hasData){

final players = snapshot.data as List<Widget>;

return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: players
)
);

}else{
return Container();
}

}
);