I'm creating a quiz app and need to display mcq options dynamically based on how many options there are for a particular question.
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. 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):
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
...................................
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.