Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

List<Widgets> in rows and lines dynamically in Flutter

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?

like image 418
edi233 Avatar asked Mar 06 '19 13:03

edi233


1 Answers

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;
}
like image 79
user Avatar answered Nov 15 '22 00:11

user