Flutter – Future<List<Widget>> on FutureBuilder

below I put a simplification of a code I wrote.
I have removed a part of the tool() function because it is not important for the purpose of this question.

I would like the List OutputRow to appear as children of the Wrap() inside the FutureBuilder.

Currently it gives me this error: type ‘List ‘ is not a subtype of type ‘List ‘.

Anyone know how I can fix it?

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. I am 21 yers old!';

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

    // code simplification {...}

    List OutputList = [
      '',
      'Henlo',
      '. I am Gabriele. I am 21 ',
      'yers',
      ' old!'
    ];
    List OutputBool = [false, true, false, true, false];
    List OutputIndex = [0, 1, 2, 3, 4];

    List OutputRow = [];

    for (int i in OutputIndex) {
      if (OutputBool[i] == false) {
        OutputRow.add(
          Container(
            child: Text(
              OutputList[i],
              style: TextStyle(fontSize: 18.0),
            ),
          ),
        );
      } else if (OutputBool[i] == true) {
        OutputRow.add(
          Container(
            child: GestureDetector(
              onTap: () {},
              child: Container(
                color: Colors.orange,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    OutputList[i],
                    style: TextStyle(fontSize: 18.0),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }

    print(OutputRow);
    return OutputRow;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder(
            future: tool(text),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return Center(
                  child: Text('Loading...'),
                );
              } else {
                return Wrap(
                  crossAxisAlignment: WrapCrossAlignment.center,
                  runSpacing: 4.0,
                  children: snapshot.data,
                );
              }
            }),
      ),
    );
  }
}

I hope it is clear.

Thanks 🙂

>Solution :

The problem you are facing is that your function tool is returning a Future<List>. When the List generic (List<>) is not defined it is interpreted as dynamic.

return Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    runSpacing: 4.0,
    children: snapshot.data,
);

Here children expects list of widgets or in other words – List<Widget>.

To fix the issue first change the return type of your tool function to:

Future<List<Widget>> tool(String text) async {

Then the declaration of the OutputRow to:

    List<Widget> OutputRow = [];

In conclusion: If a specific type of list is expected when providing it you should declarate the generic of the list to match the requested one.