Here is my JSON

[ 
{
        "id": 1,
        "title": "Всем моим братьям салам",
        "description": "Салам всем моим братьям",
        "created_at": "2021-09-14T23:55:23.000000Z",
        "updated_at": "2021-09-14T23:55:23.000000Z"
    },
]

My code

Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 52.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 355.w,
                  child: Text('',
                    style: TextStyle(color: Colors.white, fontSize: 29.sp),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 319.w,
                  child: Text(
                   '',
                    style: TextStyle(color: Colors.white, fontSize: 16.sp),
                  ),
                ),
              ],
            ),

CodePudding user response：

First, you make a list from your data then pass the list over ListView.builder
HTTP request function

Future<List<Item>> _getItemdata (String url) async {

Uri url = Uri.parse(url);
final response = await http.get(url);
var data = jsonDecode(response.body);

print('data: $data');
return data.map((itemJson) => Item.fromJson(itemJson)).toList();
}

Model class

class Item {
  int id;
  String title;
  String description;
  String createdAt;
  String updatedAt;

  Item({this.id, this.title, this.description, this.createdAt, this.updatedAt});

  Item.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    description = json['description'];
    createdAt = json['created_at'];
    updatedAt = json['updated_at'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['description'] = this.description;
    data['created_at'] = this.createdAt;
    data['updated_at'] = this.updatedAt;
    return data;
  }
}

Get the list

List<Item> itemList = await getItemData("your url");

UI:

ListView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: itemList.length;
itemBuilder:(context, index){
return Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 52.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 355.w,
                  child: Text("${itemList[index].title}",
                    style: TextStyle(color: Colors.white, fontSize: 29.sp),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.w, right: 25.w, left: 25.w),
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  width: 319.w,
                  child: Text(
                   Text("${itemList[index].description}",
                    style: TextStyle(color: Colors.white, fontSize: 16.sp),
                  ),
                ),
              ],
            );
}
)

CodePudding user response：

For the given piece of code, Let me assume your json data is assigned to a variable "data".

var newData = json.decode(data);
String title = newData[0]["title"];
String subTitle = newData[0]["description"];