如何在页面加载前从API获取数据，避免列表为空错误？

Hey there! Let's work through this API loading issue you're facing in Flutter—this is a super common pitfall, so you're not alone here. The core problem is that async operations (like API calls) don't block the widget tree from rendering, so when you call them in a constructor or directly in build, your list is still empty by the time the UI tries to use it. Here are the best ways to fix this:

1. Use initState + Manual State Management (Simple Scenarios) #

For straightforward screens, you can kick off your API call in initState (which runs once when the widget initializes) and track loading/error states to avoid empty list crashes.

class DataPage extends StatefulWidget {
  @override
  _DataPageState createState() => _DataPageState();
}

class _DataPageState extends State<DataPage> {
  List<YourDataModel> _dataList = [];
  bool _isLoading = true;
  String? _errorMessage;

  @override
  void initState() {
    super.initState();
    // Start API call as soon as the widget is initialized
    _fetchData();
  }

  Future<void> _fetchData() async {
    try {
      final response = await http.get(Uri.parse("your_api_endpoint"));
      if (response.statusCode == 200) {
        // Parse JSON into your data model list
        final List<dynamic> rawData = json.decode(response.body);
        setState(() {
          _dataList = rawData.map((item) => YourDataModel.fromJson(item)).toList();
          _isLoading = false;
        });
      } else {
        throw Exception("API request failed with status: ${response.statusCode}");
      }
    } catch (e) {
      setState(() {
        _isLoading = false;
        _errorMessage = e.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Data List")),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : _errorMessage != null
              ? Center(child: Text("Oops: $_errorMessage"))
              : _dataList.isEmpty
                  ? const Center(child: Text("No data found"))
                  : ListView.builder(
                      itemCount: _dataList.length,
                      itemBuilder: (context, index) {
                        return ListTile(title: Text(_dataList[index].name));
                      },
                    ),
    );
  }
}

This approach ensures you:

• Show a loading spinner while data is fetched
• Handle errors gracefully
• Avoid rendering an empty list by checking states before building the UI

2. Use FutureBuilder (Cleaner for Single Requests) #

If you don't want to manually track loading/error states, FutureBuilder handles this automatically by listening to the state of your API call's Future.

class DataPage extends StatefulWidget {
  @override
  _DataPageState createState() => _DataPageState();
}

class _DataPageState extends State<DataPage> {
  // Store the API future in initState to avoid re-fetching on every build
  late Future<List<YourDataModel>> _dataFuture;

  @override
  void initState() {
    super.initState();
    _dataFuture = _fetchData();
  }

  Future<List<YourDataModel>> _fetchData() async {
    final response = await http.get(Uri.parse("your_api_endpoint"));
    if (response.statusCode == 200) {
      final List<dynamic> rawData = json.decode(response.body);
      return rawData.map((item) => YourDataModel.fromJson(item)).toList();
    } else {
      throw Exception("Failed to load data");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Data List")),
      body: FutureBuilder<List<YourDataModel>>(
        future: _dataFuture,
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return const Center(child: CircularProgressIndicator());
            case ConnectionState.done:
              if (snapshot.hasError) {
                return Center(child: Text("Error: ${snapshot.error}"));
              } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
                return const Center(child: Text("No data available"));
              } else {
                return ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) {
                    return ListTile(title: Text(snapshot.data![index].name));
                  },
                );
              }
            default:
              return const SizedBox.shrink();
          }
        },
      ),
    );
  }
}

Pro tip: Always store the Future in initState instead of creating it directly in FutureBuilder—this prevents the API call from re-running every time the widget rebuilds.

3. State Management Libraries (For Complex Apps) #

If your app has multiple screens sharing data or more complex state needs, use libraries like Riverpod, Provider, or Bloc to separate data fetching from your UI. Here's a quick Riverpod example:

First, define a provider for your data:

final dataProvider = FutureProvider<List<YourDataModel>>((ref) async {
  final response = await http.get(Uri.parse("your_api_endpoint"));
  if (response.statusCode == 200) {
    final List<dynamic> rawData = json.decode(response.body);
    return rawData.map((item) => YourDataModel.fromJson(item)).toList();
  } else {
    throw Exception("Failed to load data");
  }
});

Then use it in your widget:

class DataPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final dataAsync = ref.watch(dataProvider);

    return Scaffold(
      appBar: AppBar(title: const Text("Data List")),
      body: dataAsync.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (error, stack) => Center(child: Text("Error: $error")),
        data: (data) {
          if (data.isEmpty) return const Center(child: Text("No data"));
          return ListView.builder(
            itemCount: data.length,
            itemBuilder: (context, index) => ListTile(title: Text(data[index].name)),
          );
        },
      ),
    );
  }
}

This keeps your UI clean and lets you reuse the data across multiple screens without re-fetching.

Key Takeaways #

• Never call async API functions in a widget constructor—it's synchronous and won't wait for the data to load.
• Avoid calling async functions directly in build—it will re-run the request every time the widget rebuilds.
• Use initState + setState or FutureBuilder for simple screens, and state management libraries for larger apps.

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