Mysql 颤振，如何获取对象的数据数组并显示给ListView.builder？

我是颤振新手，我想从本地主机phpmydmin获取数据。 这是我的json：

{
    "status": true,
    "message": "Data ditemukan",
    "data": [
        {
            "id": "1",
            "username": "admin",
            "password": "d033e22ae348aeb5660fc2140aec35850c4da997",
            "nama": "admin",
            "token": "2a5c97cb31308b8d818da33a041fa47d"
        },
        {
            "id": "3",
            "username": "sani",
            "password": "86862f0600c8b9829d9ca9c8aaca3f0727b44b6e",
            "nama": "Sani Sandhika",
            "token": "661e23835d27f9d45cf371f59533f163"
        },
        {
            "id": "4",
            "username": "seno",
            "password": "d61a4fe61485d6437b698c11635d8fb8c5b79d2f",
            "nama": "Seno",
            "token": "7b9f0f54ca01c323bc810206adcaa38c"
        },
        {
            "id": "5",
            "username": "username",
            "password": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
            "nama": "nama",
            "token": null
        }
    ]
}

这是我的用户模型：

import 'dart:convert';

List<User> allUsers(String str) {
  final jsonData = json.decode(str);
  return new List<User>.from(jsonData.map((x) => User.fromJson(x)));
}

class User {
  bool status;
  String message;
  List<Data> data;

  User({
    this.status,
    this.message,
    this.data,
  });

  factory User.fromJson(Map<String, dynamic> parsedJson) {
    var list = parsedJson['data'] as List;
    print(list.runtimeType);
    List<Data> dataList = list.map((i) => Data.fromJson(i)).toList();

    return User(
      status: parsedJson['status'],
      message: parsedJson['message'],
      data: dataList,
    );
  }
}

class Data {
  final int id;
  final String nama;
  final String username;

  Data({
    this.id,
    this.nama,
    this.username,
  });

  factory Data.fromJson(Map<String, dynamic> parsedJson) {
    return Data(
      id: parsedJson['id'],
      nama: parsedJson['nama'],
      username: parsedJson['username'],
    );
  }
}

导入'dart:convert'；
列表用户（字符串str）{
最终jsonData=json.decode（str）；
返回新的List.from（jsonData.map（（x）=>User.fromJson（x））；
}
类用户{
布尔状态；
字符串消息；
列出数据；
使用者({
这个,身份,，
这条信息，
这个数据,，
});
factory User.fromJson（Map parsedJson）{
var list=parsedJson['data']作为列表；
打印（list.runtimeType）；
List dataList=List.map（（i）=>Data.fromJson（i））.toList（）；
返回用户(
状态：parsedJson['status']，
message:parsedJson['message']，
数据：数据列表，
);
}
}
类数据{
最终int id；
最终字符串nama；
最终字符串用户名；
资料({
这个身份证，
这是nama，
这个.username，
});
factory Data.fromJson（Map parsedJson）{
返回数据(
id:parsedJson['id']，
nama:parsedJson['nama']，
用户名：parsedJson['username']，
);
}
}

这是我的建议：

import 'package:flutter_rest_api_crud/models/models.dart';

import 'package:http/http.dart' as http;

class RestApi {
  String url = 'http://192.168.1.5/gizi/user/';

  Future<List<User>> getUsers() async {
    final response = await http.get('$url/user');
    print(response.body);
    return allUsers(response.body);
  }
}

import'包：flatter_rest_api_crud/models/models.dart'；
将“package:http/http.dart”导入为http；
类RestApi{
字符串url='0http://192.168.1.5/gizi/user/';
未来的getUsers（）异步{
最终响应=等待http.get（“$url/user”）；
打印（响应.正文）；
返回诱惑者（响应。主体）；
}
}

最后是我的主屏幕：

import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

import'package:http/http.dart'作为http；
进口“包装：颤振/材料.省道”；
类主屏幕扩展StatefulWidget{
主屏幕（{Key}）：超级（Key:Key）；
@凌驾
_HomeScreenState createState（）=>\u HomeScreenState（）；
}
类_homescrenstate扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
);
}
}

我想从localhost phpmyadmin获取“data”中的数据。并将其放在ListView.builder上。我也不知道下一步要在我的主屏幕上实现listview。

---

有人能帮我吗？

您可以在初始化

小部件后点击API端点：

 List<User> _users = [];
  @override
  void initState() {
    super.initState();
    _load();
  }

  void _load() async {
    List<User> users =
        await RestApi.getUsers(); // load the users on Widget init
    setState(() => _users = users);
  }

下面是一个完整的示例：

class _HomeScreenState extends State<HomeScreen> {
  List<User> _users = [];
  @override
  void initState() {
    super.initState();
    _load();
  }

  void _load() async {
    List<User> users =
        await RestApi.getUsers(); // load the users on Widget init
    setState(() => _users = users);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: new ListView.builder(
        itemCount: _users.length,
        itemBuilder: (BuildContext ctxt, int i) {
          return new Card(
            child: Column(
              children: [
                Text(_users[i].username),
                ListView.builder(
                  itemCount: _users[i].data.length,
                  itemBuilder: (BuildContext ctx, int j) {
                    return Text(_users[i]
                        .data[j]
                        .username); // display username as an example
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

class\u homescrenstate扩展状态{
列表_用户=[]；
@凌驾
void initState（）{
super.initState（）；
_加载（）；
}
void\u load（）异步{
列出用户=
等待RestApi.getUsers（）；//在Widget init上加载用户
设置状态（（）=>\u用户=用户）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
正文：新建ListView.builder(
itemCount:_users.length，
itemBuilder：（BuildContext ctxt，int i）{
归还新卡(
子：列(
儿童：[
文本（_用户[i].用户名），
ListView.builder(
itemCount:_用户[i].data.length，
itemBuilder：（BuildContext ctx，int j）{
返回文本（_用户[i]
.数据[j]
.username）；//以显示用户名为例
},
),
],
),
);
},
),
);
}
}

随着您的应用程序变得越来越复杂，我建议您查看不同的
状态管理
策略，例如
BLoC
谢谢您的回答。它的工作。现在，我将使用您的建议的bloc表单乐意提供帮助，别忘了选择正确的答案！
class _HomeScreenState extends State<HomeScreen> {
  List<User> _users = [];
  @override
  void initState() {
    super.initState();
    _load();
  }

  void _load() async {
    List<User> users =
        await RestApi.getUsers(); // load the users on Widget init
    setState(() => _users = users);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: new ListView.builder(
        itemCount: _users.length,
        itemBuilder: (BuildContext ctxt, int i) {
          return new Card(
            child: Column(
              children: [
                Text(_users[i].username),
                ListView.builder(
                  itemCount: _users[i].data.length,
                  itemBuilder: (BuildContext ctx, int j) {
                    return Text(_users[i]
                        .data[j]
                        .username); // display username as an example
                  },
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}