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

Posted 2023-03-07

【中文标题】如果 API 无法获取文件，则显示不同的小部件

【英文标题】：Show different widget if API fails to fetch files

【发布时间】：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,
                  ),
                ),
    );
  

谁能帮我解决这个问题？

【参考方案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();
        ,
      ),
    );