Create Listview dynamically in flutter

Question

class _SearchState extends State<Search> {


  @override
  Widget build(BuildContext context) {
    widget.id;

    return new Scaffold(

      appBar: new AppBar(

        actions: <Widget>[

          new IconButton(
              icon: new Icon(Icons.exit_to_app),
              onPressed: _getTicketDetails
          )

        ],
        centerTitle: true,
        title: new Text
          ("TicketsDetails", style: const TextStyle(
          fontFamily: 'Poppins'
          ,),),),

    );
  }      


_getTicketDetails() async {
        print(widget.id);
        var userDetails = {};


        final response = await http.get(
            "https:...", headers: {
          HttpHeaders.AUTHORIZATION:
          "...
        });

        List returnTicketDetails = json.decode(response.body);

        print(returnTicketDetails);

        for (var i = 0; i < (returnTicketDetails?.length ?? 0); i++) {
          final ticketresponse = await http.get(
              "..${returnTicketDetails[i]["user_id"]
                  .toString()}", headers: {
            HttpHeaders.AUTHORIZATION:
            "...

          });

          userDetails[returnTicketDetails[i]["user_id"]] =
              json.decode(ticketresponse.body);
        }
        print(userDetails);


            }

Hi there! In the console the output I get by printing (userDetails) is: {513549601: {first_name: Test, last_name: Account, profile_image: tempURL . However, I would like to create a Listview dynamically with: userDetails[user_id][first_name] userDetails[user_id][last_name] and so on... But my concern is, where am I suppose to implement the Listview ? As I already have a Widget build used at the very top.

Answer 1

Try this!

Let's assume you got the data from API say userdetails list. Then you just need an ListView.builder() and Custom UserWidget/ListTile .

The Result :

The Code :

   import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new Home()));
}

class Home extends StatelessWidget {
  List userdetails = [
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
    {
      "first_name": "FLUTTER",
      "last_name": "AWESOME",
      "image_url": "https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg"
    },
    {
      "first_name": "ABC",
      "last_name": "XYZ",
      "image_url": "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        title: new Text("Dynamic List"),
        backgroundColor: Colors.redAccent,
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return new UserWidget(
            firstName: userdetails[index]['first_name'],
            lastName: userdetails[index]['last_name'],
            imageURL: userdetails[index]['image_url'],
          );
        },
        itemCount: userdetails.length,
      ),
    );
  }
}

class UserWidget extends StatelessWidget {
  final String firstName;
  final String lastName;
  final String imageURL;

  const UserWidget({Key key, this.firstName, this.lastName, this.imageURL}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.grey), color: Colors.white70),
      margin: new EdgeInsets.symmetric(vertical: 1.0),
      child: new ListTile(
        leading: new FadeInImage(
          placeholder: new AssetImage('assets/me.jpg'),
          image: new NetworkImage(imageURL),
        ),
        title: new Text("First Name : " + firstName),
        subtitle: new Text("Last Name : " + lastName),
      ),
    );
  }
}

Also, check out FadeInImage it gives a placeholder[shows local asset till the image load] for network image.