在flutter中從api獲取資料時看不到circleprogressindicator

我正在嘗試顯示來自 api 的資料，并且在加載資料時，應該顯示一個回圈進度指示器，

但是當我啟動應用程式時..它直接顯示資料而不是回圈進度指示器

class _HomeScreenState extends State<HomeScreen> {
  bool isloading = false;
  var maplist ;
  Future<void> fetchdata() async {

   setState(() {
     isloading=true;
   });
    var resp =
        await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    maplist = json.decode(resp.body);
   setState(() {
      isloading = false;
       });
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fetchdata();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: MyBody(),
    ));
  }

  MyBody() {
    return isloading==true ? Center(child: CircularProgressIndicator()) : ListView.builder(
        itemCount: maplist.length,
        itemBuilder: (context,index){
          return Container(
            padding: EdgeInsets.all(8.0),
              
              child: Text(maplist[index]['title']));
        });
  }
}

uj5u.com熱心網友回復：

它實際上作業得很好，它顯示得太快，因為它正在快速接收資料（ 可能是快取情況）。

如果你想有更多的延遲，你可以添加，future.delay 這是不必要的

  Future<void> fetchdata() async {
    setState(() {
      isloading = true;
    });
    var resp =
        await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    maplist = json.decode(resp.body);
    // get more delay
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      isloading = false;
    });
  }

使用 FutureBuilder 處理未來方法的更好方法

uj5u.com熱心網友回復：

你需要使用，使用函式 inFutureBuilder不好，試試這個：asyncinitState

FutureBuilder<List<Map>>(
        future: fetchdata(),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Center(child: CircularProgressIndicator());
            default:
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                List<Map> data = snapshot.data ?? [];

                return ListView.builder(
                    itemCount: data.length,
                    itemBuilder: (context, index) {
                      return Container(
                          padding: EdgeInsets.all(8.0),
                          child: Text(data[index]['title']));
                    });
              }
          }
        },
      ),

您還需要將您的更改fetchdata為：

Future<List<Map>> fetchdata() async {
    var resp =
        await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    return json.decode(resp.body);
  }

uj5u.com熱心網友回復：

試試下面的代碼：

class _HomeScreenState extends State<HomeScreen> {
  var maplist;
  Future<void> fetchdata() async {
    var resp =
        await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    setState(() {
      maplist = json.decode(resp.body);
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: MyBody(),
    ));
  }

  MyBody() {
    return FutureBuilder(
      future: fetchdata(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }

        return ListView.builder(
        itemCount: maplist.length,
        itemBuilder: (context,index){
          return Container(
            padding: EdgeInsets.all(8.0),
              
              child: Text(maplist[index]['title']));
        });
      }
  }
}

uj5u.com熱心網友回復：

試試這個，設定 isloading 默認為 true

class _HomeScreenState extends State<HomeScreen> {
  bool isloading = true;
  var maplist ;
  Future<void> fetchdata() async {

    var resp =
        await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    maplist = json.decode(resp.body);
   setState(() {
      isloading = false;
       });
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fetchdata();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: MyBody(),
    ));
  }

  MyBody() {
    return isloading ? Center(child: CircularProgressIndicator()) : ListView.builder(
        itemCount: maplist.length,
        itemBuilder: (context,index){
          return Container(
            padding: EdgeInsets.all(8.0),
              
              child: Text(maplist[index]['title']));
        });
  }
}

uj5u.com熱心網友回復：

你可以這樣使用

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool isloading = false;
  var maplist;
  Future<void> fetchdata() async {
    setState(() {
      isloading = true;
    });
    var resp = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    maplist = json.decode(resp.body);

    setState(() {
      isloading = false;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: isloading ? const CircularProgressIndicator() : const MyBody(),
    );
  }
}

class MyBody extends StatelessWidget {
  const MyBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      //Write your code here
    );
  }
}

標籤：扑

上一篇：如何使用flutter讀取firestore子集合中的一個欄位？

下一篇：FlutterWeb：滾動頁面時不顯示分隔線顏色