loopsflutterwidgetpickerflutter-cupertino
Flutter: Building a Cupertino Picker that shows rows containing 2 widgets, from looping through a Map
I've created a picker that displays a Icon and a String, next to each other. The pickers items are taken from a Map I created that contains Key: String and Value: Icon.
In my code right now, I'm using the Cupertino Picker and adding children: [ Row(Icon + String)] but that's quite bad if I want to update them.
I was trying to get a loop going to generate those rows + children but I can't figure out how.
Could someone show me the way or perhaps a more efficient way of getting this result? I'm thinking Extracting row and creating a constructor to input the icon and string, but I'm sure there's a better way...
Here's the code:
Expanded(
child: CupertinoPicker(
itemExtent: 40,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[0],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[0],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[1],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[1],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[2],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[2],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[3],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[3],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[4],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[4],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[5],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[5],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[6],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[6],
style:
TextStyle(color: Colors.white70),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[7],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[7],
style:
TextStyle(color: Colors.white70),
),
)
],
)
],
onSelectedItemChanged: (int index) {
print('good boi');
},
looping: true,
backgroundColor: Color(0xff2e3032),
),
),
How it looks like:
Solution
You can copy paste run full code below
You can use control-flow-collections
code snippet
children: <Widget>[
for (var i = 0;
i < BuildingProblem.problemListIcons.length;
i++)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[i],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[i],
style: TextStyle(color: Colors.white70),
),
)
],
),
],
working demo
You need to add file analysis_options.yaml to root of your project and the following line
analyzer:
enable-experiment:
- control-flow-collections
full code
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class BuildingProblem {
static List<Icon> problemListIcons = [];
static List<String> problemListNames = [];
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
void initState() {
BuildingProblem.problemListIcons.add(Icon(Icons.add));
BuildingProblem.problemListIcons.add(Icon(Icons.cast));
BuildingProblem.problemListNames.add("add");
BuildingProblem.problemListNames.add("cast");
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: CupertinoPicker(
itemExtent: 40,
children: <Widget>[
for (var i = 0;
i < BuildingProblem.problemListIcons.length;
i++)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BuildingProblem.problemListIcons[i],
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
BuildingProblem.problemListNames[i],
style: TextStyle(color: Colors.white70),
),
)
],
),
],
onSelectedItemChanged: (int index) {
print('good boi');
},
looping: true,
backgroundColor: Color(0xff2e3032),
),
),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
- How do i loop over a geometric sequence. i need to loop some function over 1, 2, 4, 8, 16
- Loop over an array of csv strings containing quoted values then return the first value from each csv string
- How to loop over json-encoded data?
- Iterate over all last-day-of-the-month dates in a year
- Iterating over two lists one after another
- How to change content in an onclick function for all elements inside a button tag?
- Move formatted data in selection from Excel into Word tables
- Hackerrank doesn't accept my code. Why?
- How can I iterate over a string by runes in Go?
- Concatenate email recipients with commas in a loop
- Changing the Class of Multiple Dataframes' Columns with For Loop in R
- Iterator Loop vs index loop
- for loop to generate time list in javascript
- Best refactoring for the dreaded While (True) loop
- Loop to enter email address and attach applicable pdf
- Parallel OpenMP loop with break statement
- C# loop — break vs. continue
- bulk operation with reformat.sh (bbmap)
- How do I make a GUI which asks the user how many loops the script should do in AutoHotkey V2
- How to stop loop in my hangman program?
- Write a Basic Car rental program on java / problems
- Using Loop invariant to prove correctness of merge sort (Initialization , Maintenance , Termination)
- How do I print a specific number of input statements in a loop?
- While loop expecting 1 argument but needing more
- Make iterated trips to the database based on a parent query
- How to loop through a multidimensional array
- Loop through array values from SimpleXMLElement
- Print unique pairs/combinations from a flat array of values
- Build an array of static string values -- each with an incremented numeric suffix
- Prepend all preceding values to each element of an array