tmello01
tmello01

Reputation: 119

Returning multiple widgets at runtime

I'm trying to build a dynamic UI in flutter. I'm getting fast food locations from a REST API, and want to make a card for each of these locations returned.

To do this, I created this class:

class LocationCard extends StatelessWidget
{
    FFLocation location;

    @override
    Widget build(BuildContext context)
    {
        return new Container(
          child: Card(
            child: Row(
              children: <Widget>[
                Image.asset("shoppingcart.png"),
                Column(children: <Widget>[
                  Text(location.name),
                  Text(location.streetNumber + " " + location.street + " " + location.city),
              ],),
            ],
          )
        )
       );
    }
}

Then, on the homepage, I want to add each of these locations to a ListView. I tried doing it like this:

new ListView(
         children: <Widget>[
          new FutureBuilder<List<FFLocation>> 
          (
            future: ApiDAO.GetLocationsFromLatLong(),
            builder: (BuildContext context, AsyncSnapshot<List<POPLocation>> snapshot)
            {
              switch (snapshot.connectionState)
              {
                case ConnectionState.waiting:
                  return Text("Loading Locations...");
                case ConnectionState.none:
                  return Text("No locations nearby!");
                default:
                  if (snapshot.hasError)
                  {
                    return Text("There was an error: ${snapshot.error}");
                  } else {
                    if (snapshot.hasData)
                    {
                      if (snapshot.data != null)
                      {
                        snapshot.data.forEach((currentLocation)
                        {
                          LocationCard card = new LocationCard();
                          card.location = currentLocation;
                          //return card.build(context);
                          var temp = card.build(context);
                          return temp;
                        });
                      }
                    }
                  }
              }
            },
          )
         ],
        ),

Which takes the data returned from the API, and tries to make each of them into a Widget. However, even with one location and one Location widget being created, it's not displaying. Is there something I'm misunderstanding, or an easier way to do this?

I should also note, I'm getting this exception:

A build function returned null. The offending widget is: FutureBuilder<List<FFLocation>>

Upvotes: 1

Views: 3123

Answers (1)

diegoveloper
diegoveloper

Reputation: 103361

Just a few changes in order to make it works :

        @override
          Widget build(BuildContext context) {
            return Container(
              child: new FutureBuilder<List<FFLocation>>(
                  future: ApiDAO.GetLocationsFromLatLong(),
                  builder:
                      (BuildContext context, AsyncSnapshot<List<FFLocation>> snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.waiting:
                    return Text("Loading Locations...");
                  case ConnectionState.none:
                    return Text("No locations nearby!");
                  default:
                    if (snapshot.hasError) {
                      return Text("There was an error: ${snapshot.error}");
                    } else {
                      if (snapshot.hasData) {
                        if (snapshot.data != null) {
                          return ListView.builder(
                            itemBuilder: (context, index) {
                              LocationCard card = new LocationCard();
                              card.location = snapshot.data[index];
                              //return card.build(context);
                              var temp = card.build(context);
                              return temp;
                            },
                            itemCount: snapshot.data.length,
                          );
                        }
                      }
                    }
                }
              }),
            );
          }

Upvotes: 1

Related Questions