<FlatButton> 使用 Firebase 构建列表

Question

我正在构建一个按钮列表，使用Firebase为每个按钮命名，但是我的代码在引用"_getButtonBar"时出现这个错误。参数类型"Future"不能分配给参数类型"List"这个小部件也应该是未来的吗?有人知道少了什么吗?

class ThemesList extends StatelessWidget {
Future<List<FlatButton>> _getButtonBar(context) async {
List<FlatButton> _list1 = [];
tot = await callReadTotal(); //Receives length to make the loop.
getListCauses(); //Calls Firebase to use arrCauses = List () for child: Text
for (int i = 1; i <= tot; i++) {
_list1.add(
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(color: Color.fromRGBO(150, 1, 1, 1)),
),
splashColor: Color.fromRGBO(150, 1, 1, 1),
onPressed: () => {
setChoice(i),
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CausesList()),
),
},
child: Text(
arrCauses[i],
style: TextStyle(
color: Color.fromRGBO(150, 1, 1, 1),
fontSize: 20,
fontFamily: 'Balsamiq_Sans',
),
),
),
);
}
return _list1;
}
@override
Widget build(BuildContext context) {
return Platform.isIOS
? CupertinoPageScaffold(child: null)
: Scaffold(
appBar: AppBar(
title: Text(
'ICare',
style: TextStyle(
color: Color.fromRGBO(150, 1, 1, 1),
fontSize: 40,
fontFamily: 'Balsamiq_Sans',
fontWeight: FontWeight.w500,
),
),
flexibleSpace: Image(
image: AssetImage('assets/images/solidariedade.png'),
color: Color.fromRGBO(255, 200, 200, 0.45),
colorBlendMode: BlendMode.modulate,
fit: BoxFit.cover,
),
),
body: Stack(
children: <Widget>[
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ButtonBar(
children: _getButtonBar(
context), //<-- Here it points out the error.
alignment: MainAxisAlignment.center,
),
),
),                
],
),
);
}
}

Answer 1

你的问题可以通过两个选项来解决。

通过使用StatefulWidget

import 'package:flutter/material.dart';
class ThemesList extends StatefulWidget {
@override
_ThemesListState createState() => _ThemesListState();
}
class _ThemesListState extends State<ThemesList> {
List<FlatButton> _buttonBar = [];
@override
void initState() {
_getButtonBar();
super.initState();
}
_getButtonBar() async {
List<FlatButton> _list1 = [];
tot = await callReadTotal(); //Receives length to make the loop.
getListCauses(); //Calls Firebase to use arrCauses = List () for child: Text
for (int i = 1; i <= tot; i++) {
_list1.add(
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(color: Color.fromRGBO(150, 1, 1, 1)),
),
splashColor: Color.fromRGBO(150, 1, 1, 1),
onPressed: () => {
setChoice(i),
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CausesList()),
),
},
child: Text(
arrCauses[i],
style: TextStyle(
color: Color.fromRGBO(150, 1, 1, 1),
fontSize: 20,
fontFamily: 'Balsamiq_Sans',
),
),
),
);
}
_buttonBar = _list1;
setState(() {});
}
@override
Widget build(BuildContext context) {
return Platform.isIOS
? CupertinoPageScaffold(child: null)
: Scaffold(
appBar: AppBar(
title: Text(
'ICare',
style: TextStyle(
color: Color.fromRGBO(150, 1, 1, 1),
fontSize: 40,
fontFamily: 'Balsamiq_Sans',
fontWeight: FontWeight.w500,
),
),
flexibleSpace: Image(
image: AssetImage('assets/images/solidariedade.png'),
color: Color.fromRGBO(255, 200, 200, 0.45),
colorBlendMode: BlendMode.modulate,
fit: BoxFit.cover,
),
),
body: Stack(
children: <Widget>[
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ButtonBar(
children: _buttonBar,
alignment: MainAxisAlignment.center,
),
),
),
],
),
);
}
}

使用FutureBuilder

import 'package:flutter/material.dart';
class ThemesList extends StatelessWidget {
Future<List<FlatButton>> _getButtonBar(context) async {
List<FlatButton> _list1 = [];
tot = await callReadTotal(); //Receives length to make the loop.
getListCauses(); //Calls Firebase to use arrCauses = List () for child: Text
for (int i = 1; i <= tot; i++) {
_list1.add(
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(color: Color.fromRGBO(150, 1, 1, 1)),
),
splashColor: Color.fromRGBO(150, 1, 1, 1),
onPressed: () => {
setChoice(i),
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CausesList()),
),
},
child: Text(
arrCauses[i],
style: TextStyle(
color: Color.fromRGBO(150, 1, 1, 1),
fontSize: 20,
fontFamily: 'Balsamiq_Sans',
),
),
),
);
}
return _list1;
}
@override
Widget build(BuildContext context) {
return Platform.isIOS
? CupertinoPageScaffold(child: null)
: Scaffold(
appBar: AppBar(
title: Text(
'ICare',
style: TextStyle(
color: Color.fromRGBO(150, 1, 1, 1),
fontSize: 40,
fontFamily: 'Balsamiq_Sans',
fontWeight: FontWeight.w500,
),
),
flexibleSpace: Image(
image: AssetImage('assets/images/solidariedade.png'),
color: Color.fromRGBO(255, 200, 200, 0.45),
colorBlendMode: BlendMode.modulate,
fit: BoxFit.cover,
),
),
body: Stack(
children: <Widget>[
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: FutureBuilder<List<FlatButton>>(
future: _getButtonBar(context),
builder: (context,
AsyncSnapshot<List<FlatButton>> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Text('Loading....');
break;
default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else
return ButtonBar(
children: snapshot.data,
alignment: MainAxisAlignment.center,
);
}
}),
),
),
],
),
);
}
}