flutter listview builder inside a listview builder

Question

I don't have much experience with flutter.

I would like to use the language_tool library (https://pub.dev/packages/language_tool) for Dart and Flutter.

To show the data obtained from the tool() function, I created a FutureBuilder with a ListView.builder inside, which returns a Column.

I would like there to be 2 children inside the column: 1- a Text with mistake.issueDescription as text (for each "mistake") 2- another ListView that returns the elements of the List mistake.replacements for each "mistake"

Anyone know how I can fix it?

Below I put the code I created, which works fine until I put the Listview builder inside the first ListView builder.

import 'package:flutter/material.dart';
import 'package:language_tool/language_tool.dart';

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

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

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele';


  Future<List<WritingMistake>> tool(String text) async {
    var tool = LanguageTool();
    var result = tool.check(text);
    var correction = await result;

    List<WritingMistake> mistakes = [];

    for (var m in correction) {

      WritingMistake mistake = WritingMistake(
        message: m.message,
        offset: m.offset,
        length: m.length,
        issueType: m.issueType,
        issueDescription: m.issueDescription,
        replacements: m.replacements,
      );

      mistakes.add(mistake);
    }

    print(mistakes.length);
    print(mistakes);

    return mistakes;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              color: Colors.red,
              height: 150.0,
              width: double.infinity,
              child: Center(
                  child: Text(text, style: const TextStyle(fontSize: 20.0))),
            ),
            FutureBuilder(
                future: tool(text),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return const Center(
                      child: Text('Loading...'),
                    );
                  } else {
                    return SizedBox(
                      height: 200.0,
                      child: ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder:
                              (BuildContext context, int mistakeIdIndex) {
                            return Column(
                              children: [
                                Text(snapshot
                                    .data[mistakeIdIndex].issueDescription),
                                // this is where the problems begin
                                ListView.builder(
                                    itemCount: snapshot.data[mistakeIdIndex]
                                        .replacements.length,
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return Text(snapshot.data[mistakeIdIndex]
                                          .replacements[index]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ),
    );
  }
}

I hope I was clear and that someone can help me.

Thank you :)

Answer 1

I think there might be 2 solutions:

1- wrap listview.builder inside an Expanded widget instead of SizedBox.

2- wrap the Column Widget inside a SizedBox and heighten it.

Answer 2

You cannot give a listview-builder as a child for a column try changing the Column widget to a ListView and set its shrinkWrap property to true.

ListView(
          children: [
            Container(
              color: Colors.red,
              height: 150.0,
              width: double.infinity,
              child: Center(
                  child: Text(text, style: const TextStyle(fontSize: 20.0))),
            ),
            FutureBuilder(
                future: tool(text),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return const Center(
                      child: Text('Loading...'),
                    );
                  } else {
                    return SizedBox(
                      height: 200.0,
                      child: ListView.builder(
                       shrinkWrap:true,
                          itemCount: snapshot.data.length,
                          itemBuilder:
                              (BuildContext context, int mistakeIdIndex) {
                            return ListView(
                             shrinkWrap:true,
                              children: [
                                Text(snapshot
                                    .data[mistakeIdIndex].issueDescription),
                                // this is where the problems begin
                                ListView.builder(
                                   shrinkWrap:true,
                                    itemCount: snapshot.data[mistakeIdIndex]
                                        .replacements.length,
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return Text(snapshot.data[mistakeIdIndex]
                                          .replacements[index]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ),