[英]Dynamically add widgets to a column's children in flutter
I'm creating a quiz app and need to display mcq options dynamically based on how many options there are for a particular question.我正在创建一个测验应用程序,需要根据特定问题的选项数量动态显示 mcq 选项。
So for example:例如:
Now the code for the buttons is here :现在按钮的代码在这里:
final quizOptions = Container(
width: MediaQuery.of(context).size.width,
child: Center(
child: Column(
children: <Widget>[
SimpleRoundButton(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
buttonText: Text(questions[questionNum].options[0],
style: TextStyle(
color: Colors.white
),
),
textColor: Colors.white,
onPressed: (){},
),
SimpleRoundButton(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
buttonText: Text(questions[questionNum].options[1],
style: TextStyle(
color: Colors.white
),
),
textColor: Colors.white,
onPressed: (){},
),
],
),
),
);
As you can see, what I am able to do is to "fix" 2 buttons.如您所见,我能做的是“修复”2 个按钮。 Is there a way to dynamically add buttons based on how many options there are for that particular question ?有没有办法根据该特定问题的选项数量动态添加按钮?
I have a list named questions
and it is a list of questions (which is a class):我有一个名为questions
的列表,它是一个问题列表(这是一个类):
class Question {
String title;
List options;
String imagePath;
Question(
{this.title, this.options, this.imagePath,});
}
//Example:
Question(
title: "How fast does the drone go ?",
options: ['80km/h', '90km/h', '100km/h'],
imagePath: "assets/images/drones1.jpg",
)
You should iterate through your options to create SimpleRoundButton
您应该遍历您的选项以创建SimpleRoundButton
...................................
child: Column(
children: questions[questionNum].options.map<Widget>(
(option) => SimpleRoundButton(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
buttonText: Text(option,
style: TextStyle(
color: Colors.white
),
),
textColor: Colors.white,
onPressed: (){},
),
).toList(),
.........................
I made a complete example that I use dynamic widgets to show and hide widgets on screen, you can see it running online on dart fiddle , too.我做了一个完整的例子,我使用动态小部件在屏幕上显示和隐藏小部件,你也可以在dart fiddle上看到它在线运行。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List item = [
{"title": "Button One", "color": 50},
{"title": "Button Two", "color": 100},
{"title": "Button Three", "color": 200},
{"title": "No show", "color": 0, "hide": '1'},
];
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Dynamic Widget - List<Widget>"),backgroundColor: Colors.blue),
body: Column(
children: <Widget>[
Center(child: buttonBar()),
Text('Click the buttons to hide it'),
]
)
)
);
}
Widget buttonBar() {
return Column(
children: item.where((e) => e['hide'] != '1').map<Widget>((document) {
return new FlatButton(
child: new Text(document['title']),
color: Color.fromARGB(document['color'], 0, 100, 0),
onPressed: () {
setState(() {
print("click on ${document['title']} lets hide it");
final tile = item.firstWhere((e) => e['title'] == document['title']);
tile['hide'] = '1';
});
},
);
}
).toList());
}
}
Maybe it helps someone.也许它可以帮助某人。 If it was is useful to you, let me know clicking in up arrow, please.如果它对您有用,请点击向上箭头让我知道。 Thanks.谢谢。
https://dartpad.dev/b37b08cc25e0ccdba680090e9ef4b3c1 https://dartpad.dev/b37b08cc25e0ccdba680090e9ef4b3c1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.