如果 API 无法获取文件，则显示不同的小部件答案

【问题标题】：Show different widget if API fails to fetch files如果 API 无法获取文件，则显示不同的小部件
【发布时间】：2021-05-01 06:53:30
【问题描述】：

我正在开发一个应用程序，如果 API 无法获取数据并显示 ListView.builder() 是 API 获取数据，我需要显示一个按钮。

目前的进度是，如果 API 获取数据，会显示 ListView.builder()，但如果无法获取数据，则不会显示 Button，并且进度指示器会继续运行。

这是我的代码..

import 'package:flutter/material.dart';

import '../Services/fetch_nifty_data.dart';

class NiftyScreen extends StatefulWidget {
  @override
  _NiftyScreenState createState() => _NiftyScreenState();
}

class _NiftyScreenState extends State<NiftyScreen> {
  Map<String, dynamic>? niftyDetails = {};
  late bool? isLoading;

  @override
  void initState() {
    super.initState();
    getNiftyData();
  }

  getNiftyData() async {
    setState(() {
      isLoading = true;
    });
    this.niftyDetails = await fetchNiftyData();
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLoading!
          ? LinearProgressIndicator()
          : niftyDetails!.isNotEmpty
              ? ListView.builder(
                  itemCount: niftyDetails!["filtered"]["data"].length,
                  itemBuilder: (_, index) {
                    return ListTile(
                      title: Text(
                          '${niftyDetails!["filtered"]["data"][index]["strikePrice"]}'),
                    );
                  },
                )
              : Center(
                  child: MaterialButton(
                    onPressed: getNiftyData,
                    child: Text(
                      'Nothing to show. Refetch?',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    color: Colors.red[900],
                    textColor: Colors.white,
                  ),
                ),
    );
  }
}

谁能帮我解决这个问题？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

Flutter 有一个很棒的小部件，称为 FutureBuilder，它可以完美解决您的问题。我在下面添加了一个基本示例，如果您有任何问题，请告诉我。


class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: fetchNiftyData(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          // The request is processing.
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          } //
          // An error has occured.
          else if (snapshot.hasError) {
            return const Center(child: Text('An error occured!'));,
          } //
          // The request was successfull.
          else if (snapshot.hasData) {
            return ListView.builder(
              // Your listview that displays the data.
            );
          }

          return Container();
        },
      ),
    );
  }
}

【讨论】：