flutter dynamic list

When flutter in front of a summary list of components inside the ListView, static data has been used, but in the actual application process, the data is retrieved from the background of dynamic data, static data can not be written as a front like, Here simulate what is formed with dynamic data list.

Array cycle

First, a loop array, is formed the dynamic data, it is noted that every item in the array as needed Widget assembly, therefore, when the cycle of the array, required to bring Widget, Further, after the loop structure the data, must be use toList () the data into List.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: HomeContent(),
    ));
  }
}
class HomeContent extends StatelessWidget {    //自定义方法
  List<Widget> _getData(){    
    List<Widget> list=new List();
    for(var i=0;i<20;i++){
      list.add(ListTile(
          title: Text("我是$i列表"),
      ));
    }    
    return list;
  }

  @override
  Widget build(BuildContext context) {    
    return ListView(
      children: this._getData(),
    );
  }
}

In the above simulation is the most simple data format, if the array is such that the following items

The above approach is impossible, the need for appropriate modification of the above method.

class HomeContent extends StatelessWidget {
 //自定义方法
  List<Widget> _getData(){     
    List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2606512668,2361120991&fm=27&gp=0.jpg',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2191520521,2689315141&fm=27&gp=0.jpg',
      },

  ]; 
    var tempList=listData.map((value){
        return ListTile(
          leading:Image.network(value["imageUrl"]),
          title:Text(value["title"]),
          subtitle:Text(value["author"])
        );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView(
      children: this._getData(),
    );
  }
}

数组索引

 上面是直接将数据项准备好了以后再使用的，但是，我们更多的时候是直接使用数组的。

class HomeContent extends StatelessWidget {  
  List listData=[
        {
            "title": 'Candy Shop',
            "author": 'Mohamed Chahin',
            "imageUrl": 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3799915975,3745430025&fm=27&gp=0.jpg',
        },
        {
            "title": 'Childhood in a picture',
            "author": 'Google',
            "imageUrl": 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2606512668,2361120991&fm=27&gp=0.jpg',
        },
        {
            "title": 'Alibaba Shop',
            "author": 'Alibaba',
            "imageUrl": 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2191520521,2689315141&fm=27&gp=0.jpg',
        },
    ];

  //自定义方法
  Widget _getListData(context,index){
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView.builder(
        itemCount:listData.length,
        itemBuilder:this._getListData
    );
  }
}