Флаттер не может показать элемент списка в Drawar

Question

Я новичок, чтобы трепетать. Я пытаюсь создать представление списка динамически, используя данные ответа сервера JSON, используя futureBuilder. Код, написанный мной во время просмотра видео на YouTube, но я не могу понять, в чем ошибка.

// Похоже, ваше сообщение в основном кодовое; пожалуйста, добавьте больше деталей .//

main.dart

import 'package:flutter/material.dart';
import 'home.dart';
void main() {
    runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
      home: home(),
    ));

}

home.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

class home extends StatefulWidget {
home({Key key}):super();
  @override
  homepage createState() =>new homepage();

}
class homepage extends State<home>{
  Color theme = Colors.lightBlue;
  Color theme_text = Colors.white;


  Future<List<category>> _getCategory() async {
    var data = await http
        .get("https://next.json-generator.com/api/json/get/VJ6EHYFO_");
    debugPrint(data.body);
    var jsondata = json.decode(data.body);
    List<category> list = [];
    for (var u in jsondata) {
      category c = category(u['name'], u['id']);
      list.add(c);
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: theme,
        title: Text('SIMS Home Page'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () => debugPrint("search pressed"),
          )
        ],
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text(
                "Not Signed",
                textAlign: TextAlign.center,
                style: TextStyle(color: theme_text, fontSize: 20),
              ),
              decoration: BoxDecoration(
                color: theme,
              ),
            ),
            FutureBuilder(
              future: _getCategory(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.data == null) {
                  return Container(
                    child: Center(
                      child: Text("Loading..."),
                    ),
                  );
                } else {
                  return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(title: Text(snapshot.data[index]),);
                      });
                }
              },
            ),
          ],
        ),
      ),
    );
  }




class category {
  final name;
  final id;

  category(this.name, this.id);
}

Answer 1

Вы должны использовать свойство shrinkwrap в listView.builder, чтобы оно заработало. это позволит списку увеличивать только то, что требуется.

Более того, в текстовом представлении вы назначаете элементы напрямую, вам необходимо получить доступ к имени и идентификатору индивидуально, как показано в приведенном ниже коде.

Container(
          height: 150,
          child: DrawerHeader(
            child: Text(
              "Not Signed",
              textAlign: TextAlign.center,
              style: TextStyle(color: theme_text, fontSize: 20),
            ),
            decoration: BoxDecoration(
              color: theme,
            ),
          ),
        ),
        FutureBuilder(
          future: _getCategory(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.data == null) {
              return Container(
                child: Center(
                  child: Text("Loading..."),
                ),
              );
            } else {
              return Container(
                height: MediaQuery.of(context).size.height - 150,
                child: ListView.builder(
                    shrinkWrap: true, //added line
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        title: Text(snapshot.data[index]
                            .toString()), //accessing name from json
                      );
                    }),
              );
            }
          },
        ),