FutureBuilder Error: The return type 'Object?' isn't a 'Widget', as required by the closure's context

Question

I am new to flutter and I am studying Future Builder, when I run the code below the line: return snapshot.data; is returning the following error: The return type 'Object?' isn't a 'Widget', as required by the closure's context.

I figure this has something to do with Null Safety because when I change the line: return snapshot.data; to return Text(snapshot.data.toString()); it renders the text: ListView(ScrollDirection: vertical...ScrollPhysics) but I could be wrong about Null safety.

The code below is from a youtube tutorial: https://www.youtube.com/watch?v=y-IypschepA that I was watching, I copied the code word for word while learning and I already verified almost 20 times that my code is exactly what the tutor wrote and successfully ran.

I am not sure how to resolve this error.

import 'package:flutter/material.dart';

class FutureBuilderTest extends StatefulWidget {
  @override
  _FutureBuilderTestState createState() => _FutureBuilderTestState();
}

class _FutureBuilderTestState extends State<FutureBuilderTest> {
  Future<void> loadList(BuildContext context) async {
    return Future.delayed(
      Duration(seconds: 1),
      () {
        return ListView.builder(
          itemCount: 40,
          itemBuilder: (context, index) {
            return Card(
              elevation: 8,
              child: Text(
                "Dummy Text $index",
                style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
              ),
            );
          },
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Future Builder Test"),
      ),
      body: FutureBuilder(
        future: loadList(context),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          if (snapshot.connectionState == ConnectionState.done) if (snapshot
              .hasError) {
            return Center(
              child: Text(snapshot.data.toString()),
            );
          }
          if (snapshot.data != null) {
            return snapshot.data;        // THIS LINE IS RETURNING THE ERROR
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

Answer 1

Nevermind I found the error by watching another tutorial, it was a type error, I had to correct the line: builder: (context, snapshot) by inserting the type, which now reads: builder: (BuildContext context, AsyncSnapshot snapshot)

Here is the working code for future reference (pun intented):

import 'package:flutter/material.dart';

class FutureBuilderTest extends StatefulWidget {
  @override
  _FutureBuilderTestState createState() => _FutureBuilderTestState();
}

class _FutureBuilderTestState extends State<FutureBuilderTest> {
  Future<void> loadList(BuildContext context) async {
    return Future.delayed(
      Duration(seconds: 1),
      () {
        return ListView.builder(
          itemCount: 40,
          itemBuilder: (context, index) {
            return Card(
              elevation: 8,
              child: Text(
                "Dummy Text $index",
                style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
              ),
            );
          },
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Future Builder Test"),
      ),
      body: FutureBuilder(
        future: loadList(context),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          if (snapshot.connectionState == ConnectionState.done) if (snapshot
              .hasError) {
            return Center(
              child: Text(snapshot.data.toString()),
            );
          }
          if (snapshot.data != null) {
            return snapshot.data;
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

Answer 2

The builder in the FutureBuilder returns a widget(like you did in returning CircularProgressIndicator). So you should not return snapshot.data as it is. Instead, put that into some widget to show on the screen. So like,

 if (snapshot.data != null) {
        print(snapshot.data);        
        return Center(
            child:Text(snapshot.data.toString(),
                ),
              ),
            );
}