0

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 :)

2 Answers 2

1

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]);
                                    }),
                              ],
                            );
                          }),
                    );
                  }
                }),
          ],
        ),
      ), 
Sign up to request clarification or add additional context in comments.

1 Comment

thanks for the reply, but it returns several errors.
0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.