Flutter新手求助：FutureBuilder返回null及Future<List>实例打印异常

Hey there! Let's work through your Flutter issues step by step—they're common pitfalls when starting out with FutureBuilder, so don't worry!

1. Why you're seeing "Instance of 'Future'" instead of your data #

The clusters variable you're printing is a Future object, not the actual list data from your API. A Future is just a placeholder that represents a value that will be available later (once your API call finishes).

To print the real data, you need to access snapshot.data instead—this is where the resolved data from your Future is stored once the API call completes.

2. Fixing the "A build function returned null" error #

Flutter requires that every build function (including the builder callback in FutureBuilder) always returns a non-null Widget. Your current code returns null when the snapshot doesn't have data yet (like during loading or if there's an error), which violates this rule.

You need to handle all possible states of the AsyncSnapshot:

• Loading state: Show a loading indicator (like CircularProgressIndicator)
• Error state: Show an error message
• Data state: Show your content (or print the data)

Here's your fixed code with explanations #

class _SuperVisorSheetState extends State<SuperVisorSheet> { 
  Future <List> clusters; 

  Future<List> getClusters() async{ 
    var response = await Dio().get('http://192.168.100.3:8080/api/v1/clustertable'); 
    return response.data; 
  } 

  @override 
  void initState() { 
    clusters = getClusters(); 
    super.initState(); 
  } 

  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        backgroundColor: Color(0xff392850), 
        title: Text("Supervisor "), 
      ), 
      body: Container( 
        padding: EdgeInsets.all(10), 
        child: FutureBuilder<List>( 
          future: clusters, 
          builder: (BuildContext context, AsyncSnapshot<List> snapshot) { 
            // Handle loading state while API call is in progress
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            }
            // Handle error state if API call fails
            else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            }
            // Handle successful data load
            else if(snapshot.hasData){ 
              // Print the actual API response data here
              print(snapshot.data); 
              return Text("Hello"); 
            }
            // Fallback for unexpected states
            else {
              return Center(child: Text('No data available'));
            }
          }, 
        ) 
      ) 
    ); 
  } 
}

Key changes made:

• Replaced print(clusters) with print(snapshot.data) to log the actual API response
• Added handling for ConnectionState.waiting to show a loading spinner during the API call
• Added error handling to display a user-friendly message if the API request fails
• Removed the invalid return null and replaced it with valid Widgets for all possible states

内容的提问来源于stack exchange，提问作者blackbird