问题在futureBuilder颤抖中创建listView

时间:2019-09-18 09:07:27

标签: android flutter flutter-layout

我想在FutureBuilder中创建一个listView。这是一个Json对象列表,当我调用api时,我收到了倍数对象,但是当我要创建列表时,我遇到了不同的错误。

例如:

一个构建函数返回null。 用户创建的导致错误的小部件的祖先是     展开

图片:bug

主题模型:

class Theme {

  int id;
  String name;

  Theme({this.id, this.name});

  factory Theme.fromJson(Map<String, dynamic> json) {
    return Theme(
      id: json['id'],
      name: json['name'],
    );
  }

  Future<List<Theme>> getThemes() async {
  String url = 'http://10.0.2.2:3000/v1/api/theme';
  final response = await http.get(url, headers: {"Accept": "application/json"});

  if (response.statusCode == 200) {
    List themesList = jsonDecode(response.body);
    List<Theme> themes = [];
    for(var themeMap in themesList){
      themes.add(Theme.fromJson(themeMap));
    }
    return themes;
  } else {
    throw Exception('Failed to load themes');
  }
}

}

主题页面:

class _Theme extends State<Theme> {
  var name;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Blackbox"),
        ),
        body: new Center(
          child : new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              new Container(
                margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                child: new Text('Sélection du profil',
                    style: new TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold)),
                        alignment: Alignment.topCenter),
              new Expanded(
                child : new FutureBuilder<List<t.Theme>>(
                    future: t.Theme().getThemes(),
                    builder: (context, snapshot){
                      if (!snapshot.hasData){
                        return CircularProgressIndicator();
                      }else if(snapshot.hasError){
                        return Text("${snapshot.error}");
                      }else{
                        new ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder: (BuildContext context, index) {
                            for (var s in snapshot.data){
                              name = s.name;
                            }
                            return new ListTile(
                              title: new Text(name),
                            );
                          },
                        );
                      }                   
                    },
              )
              ),
              new Container(
              margin: EdgeInsets.only(right: 10.0),
              child: new RaisedButton.icon(
                /*onPressed: () {
                  Navigator.pushReplacement(context,
                      MaterialPageRoute(builder: (context) => Technologies()));
                },*/
                label: Text('Suivant'),
                icon: Icon(Icons.navigate_next),
              ),
              alignment: Alignment.bottomRight,
            ),
            ],
          ),
        ),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

这是因为在FutureBuilder的builder方法中,您错过了return之前的new ListView.builder,因此它除了null之外没有返回任何内容。

因此,您更新后的“主题”页面将如下所示:

  class _Theme extends State<Theme> {
     var name;
     @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Blackbox"),
        ),
        body: new Center(
          child : new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              new Container(
                margin: EdgeInsets.only(top: 10.0, bottom: 10.0),
                child: new Text('Sélection du profil',
                    style: new TextStyle(
                        fontSize: 24, fontWeight: FontWeight.bold)),
                        alignment: Alignment.topCenter),
              new Expanded(
                child : new FutureBuilder<List<t.Theme>>(
                    future: t.Theme().getThemes(),
                    builder: (context, snapshot){
                      if (!snapshot.hasData){
                        return CircularProgressIndicator();
                      }else if(snapshot.hasError){
                        return Text("${snapshot.error}");
                      }else{
                        return ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder: (BuildContext context, index) {
                            for (var s in snapshot.data){
                              name = s.name;
                            }
                            return new ListTile(
                              title: new Text(name),
                            );
                          },
                        );
                      }                   
                    },
              )
              ),
              new Container(
              margin: EdgeInsets.only(right: 10.0),
              child: new RaisedButton.icon(
                /*onPressed: () {
                  Navigator.pushReplacement(context,
                      MaterialPageRoute(builder: (context) => Technologies()));
                },*/
                label: Text('Suivant'),
                icon: Icon(Icons.navigate_next),
              ),
              alignment: Alignment.bottomRight,
            ),
            ],
          ),
        ),
    );
  }
}