使用dio和futurebuilder,非同步獲取網路資料.在資料載入之前,頁面顯示載入圖示.

程式碼如下:

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Future<String> mockNetworkData() async {

    //請求url
    var url = 'http://xxx';
    try {
      Response response = await Dio().get(url);
      //print(response);
     // print("------------");
     // print(response.data.toString());
      return response.data.toString();

  } catch(e){
    print(e);
    return '獲取資料失敗';
  }
    
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
    
      child: FutureBuilder<String>(
        future: mockNetworkData(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          // 請求已結束
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              // 請求失敗，顯示錯誤
              return Text("Error: ${snapshot.error}");
            } else {
              // 請求成功，顯示資料
              return Text("Contents: ${snapshot.data}");
            }
          } else {
            // 請求未結束，顯示loading
            return CircularProgressIndicator();
          }
        },
    ),
      ),
    
    );
  }
}

 

其中,FutureBuilder會依賴一個Future，它會根據所依賴的Future的狀態來動態構建自身。

FutureBuilder建構函式：

FutureBuilder({
  this.future,
  this.initialData,
  @required this.builder,
})

• future：FutureBuilder依賴的Future，通常是一個非同步耗時任務。

• initialData：初始資料，使用者設定預設資料。

• builder：Widget構建器；該構建器會在Future執行的不同階段被多次呼叫，構建器簽名如下：Function (BuildContext context, AsyncSnapshot snapshot)

  
  snapshot會包含當前非同步任務的狀態資訊及結果資訊 ，比如可以通過snapshot.connectionState獲取非同步任務的狀態資訊、通過snapshot.hasError判斷非同步任務是否有錯誤等等，完整的定義可以檢視AsyncSnapshot類定義。