List<Widgets> in rows and lines dynamically in Flutter - flutter

Question

I have json:
{
"name": "Test",
"groupsCount": 5,
"groups": [
{
"name": "William Cooper",
"number": 1,
"linesCount": 2,
"lines": [
{
"name": "Brittany Ramirez",
"number": 1,
"placesCount": 15,
"places": [
{
"name": "Elizabeth Welch",
"number": 1
},
{
"name": "Bradley Pugh",
"number": 2
},
{
"name": "Noah Johnson",
"number": 3
},
{
"name": "Laura Cox",
"number": 4
},
{
"name": "Tiffany Hatfield",
"number": 5
},
{
"name": "Patricia Hayes",
"number": 6
},
{
"name": "Kevin Jenkins MD",
"number": 7
},
{
"name": "Brent Wilkins",
"number": 8
},
{
"name": "Mr. Bruce Hart",
"number": 9
},
{
"name": "Courtney Newman",
"number": 10
},
{
"name": "Dawn Campbell",
"number": 11
},
{
"name": "Ashley Scott",
"number": 12
},
{
"name": "Robert Becker",
"number": 13
},
{
"name": "Kevin Williams",
"number": 14
},
{
"name": "Elizabeth Davidson",
"number": 15
}
]
},
{
"name": "Carol Watson",
"number": 2,
"placesCount": 12,
"places": [
{
"name": "Kathleen Jones",
"number": 16
},
{
"name": "Robin Smith",
"number": 17
},
{
"name": "David Johnson",
"number": 18
},
{
"name": "Richard Boyd",
"number": 19
},
{
"name": "Mason Randolph",
"number": 20
},
{
"name": "James Bernard",
"number": 21
},
{
"name": "Timothy Miller",
"number": 22
},
{
"name": "Thomas Stone",
"number": 23
},
{
"name": "Steven Jones",
"number": 24
},
{
"name": "William Hernandez",
"number": 25
},
{
"name": "Joy Duarte",
"number": 26
},
{
"name": "Justin Anderson",
"number": 27
}
]
}
]
},
{
"name": "Sarah Jordan",
"number": 2,
"linesCount": 1,
"lines": [
{
"name": "Lacey Estrada",
"number": 3,
"placesCount": 15,
"places": [
{
"name": "Madison Smith",
"number": 28
},
{
"name": "Kathleen Wells",
"number": 29
},
{
"name": "Dale Gross",
"number": 30
},
{
"name": "Brandy Cabrera",
"number": 31
},
{
"name": "Ashley Torres",
"number": 32
},
{
"name": "Ralph Long",
"number": 33
},
{
"name": "Christopher Walker",
"number": 34
},
{
"name": "Kimberly Moore",
"number": 35
},
{
"name": "Andrea Ortiz",
"number": 36
},
{
"name": "Heidi Todd",
"number": 37
},
{
"name": "Austin Wang",
"number": 38
},
{
"name": "Bryan Adams",
"number": 39
},
{
"name": "Jeffrey Alvarado",
"number": 40
},
{
"name": "Richard Morrison",
"number": 41
},
{
"name": "Jennifer Hodge",
"number": 42
}
]
}
]
},
{
"name": "Tiffany Lynch",
"number": 3,
"linesCount": 1,
"lines": [
{
"name": "Kimberly Howe DVM",
"number": 4,
"placesCount": 15,
"places": [
{
"name": "Nancy King",
"number": 43
},
{
"name": "Angela Cabrera",
"number": 44
},
{
"name": "Elizabeth Mack",
"number": 45
},
{
"name": "Shelly Riggs",
"number": 46
},
{
"name": "Jeremy French",
"number": 47
},
{
"name": "Deborah Myers",
"number": 48
},
{
"name": "Robert Kramer",
"number": 49
},
{
"name": "Brian Cunningham MD",
"number": 50
},
{
"name": "Christopher Brown",
"number": 51
},
{
"name": "Kathryn James",
"number": 52
},
{
"name": "Cassandra Martinez",
"number": 53
},
{
"name": "Nathan Long",
"number": 54
},
{
"name": "Molly Wilson",
"number": 55
},
{
"name": "Matthew Reilly",
"number": 56
},
{
"name": "Erin Maddox",
"number": 57
}
]
}
]
},
{
"name": "Christopher Martin",
"number": 4,
"linesCount": 1,
"lines": [
{
"name": "Gina Brewer",
"number": 5,
"placesCount": 13,
"places": [
{
"name": "Dennis Owens",
"number": 58
},
{
"name": "Rebecca Caldwell",
"number": 59
},
{
"name": "James Mckinney",
"number": 60
},
{
"name": "Donna Lee",
"number": 61
},
{
"name": "Michelle Martinez",
"number": 62
},
{
"name": "Jennifer Davis",
"number": 63
},
{
"name": "Shawn Moore",
"number": 64
},
{
"name": "Jeremiah Reilly",
"number": 65
},
{
"name": "Bruce Mendoza",
"number": 66
},
{
"name": "Juan Weaver",
"number": 67
},
{
"name": "Brian Bates",
"number": 68
},
{
"name": "Caitlin Jenkins",
"number": 69
},
{
"name": "Rachel Thomas",
"number": 70
}
]
}
]
},
{
"name": "Michelle Thompson",
"number": 5,
"linesCount": 2,
"lines": [
{
"name": "Kathleen Hall",
"number": 6,
"placesCount": 12,
"places": [
{
"name": "Jennifer Vaughan",
"number": 71
},
{
"name": "Glenn Mayer",
"number": 72
},
{
"name": "Allison Coleman",
"number": 73
},
{
"name": "Brittany Harris",
"number": 74
},
{
"name": "John Mccullough",
"number": 75
},
{
"name": "James Curtis",
"number": 76
},
{
"name": "John Smith",
"number": 77
},
{
"name": "Alison Morales",
"number": 78
},
{
"name": "Matthew Jones",
"number": 79
},
{
"name": "Jessica Watson",
"number": 80
},
{
"name": "Yvonne Anderson",
"number": 81
},
{
"name": "David Price",
"number": 82
}
]
},
{
"name": "Sarah White",
"number": 7,
"placesCount": 10,
"places": [
{
"name": "Kathleen Owen",
"number": 83
},
{
"name": "Amy Strickland",
"number": 84
},
{
"name": "James Collier",
"number": 85
},
{
"name": "Keith Smith Jr.",
"number": 86
},
{
"name": "Christopher York",
"number": 87
},
{
"name": "Patricia Todd",
"number": 88
},
{
"name": "Matthew Harris",
"number": 89
},
{
"name": "Betty Mckee",
"number": 90
},
{
"name": "Kayla Hahn",
"number": 91
},
{
"name": "Craig Duncan",
"number": 92
}
]
}
]
}
]
}
and I want to build view using lines and places. So if group have 2 lines and each line has 15 places I want to build something like that:
...............
...............
This is my code:
import 'package:flutter/material.dart';
import 'package:parking/models/groups.dart';
import 'package:parking/models/parking_group.dart';
import 'package:parking/services/parking_service.dart';
class ParkingDetailsScreen extends StatefulWidget {
#override
createState() => ParkingDetailsState();
}
class ParkingDetailsState extends State<ParkingDetailsScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Parking Details"),
),
body: FutureBuilder<ParkingGroup>(
future: ParkingService.getParking(),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? _buildParking(snapshot.data)
: Center(child: CircularProgressIndicator());
},
)
);
}
}
final _parkings = <Groups>[];
Widget _buildParking(ParkingGroup parkingGroup) {
_parkings.clear();
_parkings.addAll(parkingGroup.groups);
return ListView.builder(
itemCount: _parkings.length,
itemBuilder: (context, index) {
return _buildRow(_parkings[index], context);
},
);
}
Widget _buildRow(Groups parkingGroup, BuildContext context) {
return Container(
padding: const EdgeInsets.all(16.0),
child: Row(
children: _buildRowList(parkingGroup),
),
);
}
List<Widget> _buildRowList(Groups parkingGroup) {
List<Widget> places = [];
for (var place in parkingGroup.lines) {
for (var placeLine in place.places) {
places.add(_buildPlace(placeLine));
}
}
return places;
}
Widget _buildPlace(place) {
return Container(
padding: const EdgeInsets.only(bottom: 8.0),
child:
SizedBox(
height: 5,
width: 5,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
)),
),
);
}
//
//Widget _buildRow(Groups parkingGroup, BuildContext context) {
// return Container(
// padding: const EdgeInsets.all(16.0),
// child: Row(
// children: [
// Container(
// padding: const EdgeInsets.only(bottom: 8.0),
// child:
// SizedBox(
// height: 30,
// width: 30,
// child: DecoratedBox(
// decoration: BoxDecoration(
// border: Border.all(color: Colors.blueAccent),
// )),
// ),
// ),
// ],
// ),
// );
//}
but for this code I see all places in one line:
..............................
instead of
...............
...............
What I need to change in my code to get good result?

Answer 1

You need to change your _buildRow() and _buildRowList() methods:
Widget _buildRow(Groups parkingGroup, BuildContext context) {
return Container(
padding: const EdgeInsets.all(16.0),
child: Column( // As you expect multiple lines you need a column not a row
children: _buildRowList(parkingGroup),
),
);
}
List<Widget> _buildRowList(Groups parkingGroup) {
List<Widget> lines = []; // this will hold Rows according to available lines
for (var line in parkingGroup.lines) {
List<Widget> placesForLine = [] // this will hold the places for each line
for (var placeLine in line.places) {
placesForLine.add(_buildPlace(placeLine));
}
lines.add(Row(children: placesForLine));
}
return lines;
}