• 首先進行網絡請求配置

Flutter網絡請求配置.png

• 進入需要進行網絡請求的界面導入 “import 'package:http/http.dart' as http;”

一般網絡請求在initState里面發送、具體按需求再改 下面事例參考中發請求里面的Map轉模型請回看Flutter (四)Map轉模型

• 方法備注 下面是具體發送網絡請求代碼參考

1.initState() :初始化方法-只會調用一次
2.getDatas():發送網絡請求的方法
3.Widget build(BuildContext context) :渲染界面的方法
4.Widget _buildItemForRow(BuildContext context, int index) : ListView 上返回Item的方法

  class _ChatPageState extends State<ChatPage> {
  bool _cancelConnect = false;//防止多次請求
  //初始化對象的時候只調用一次
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //.then是處理返回的數據
    getDatas().then((List<Chat> datas) {
      if(!_cancelConnect){
        //datas 就是返回的數據
        setState(() {
          _datas = datas;
        });
      }
    }).catchError((error) {
      print(error);
    }).whenComplete((){
      print('該請求完畢');
    }).timeout(Duration(seconds: 10)).catchError((timeout){//判斷請求超時回調
      _cancelConnect = true;
      print('超時:${timeout}');
    });

  //Future 類似可選類型 表示接下來的值可能有值也可能有錯誤
  Future<List<Chat>> getDatas() async {//異步請求  注意:async和await 要成對出現
    _cancelConnect = false;//防止多次請求
    final response = await http.get('http://rap2api.taobao.org/app/mock/224518/api/chat/list');
    if(response.statusCode==200) {
      //獲取相應數據,并且轉換成Map類型
      final responseBody = json.decode(response.body);
      //轉換模型數組
      List<Chat> chatList = responseBody['chat_list']
          .map<Chat>((item) => Chat.formJson(item))
          .toList();
      return chatList;//數據返回
    }else {
      throw Exception('statusCode:${response.statusCode}');//拋請求異常
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: WeChatThemeColor,
        centerTitle: true, //這個是解決安卓機型上導航標題居中顯示
        title: Text('Flutter Demo'),
        actions: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 10),
            child: PopupMenuButton(
              offset: Offset(0, 60.0),
              child: Image(
                image: AssetImage('images/圓加.png'),
                width: 25,
              ),
              itemBuilder: _buildPopupMunuItem,
            ),
          ),
        ], //右側加號按鈕 要加手勢點擊
      ),
      body: Container(
        child: _datas.length == 0
            ? Center(
                child: Text('Loading...'),
              )
            : ListView.builder(
              itemCount: _datas.length,
              itemBuilder: _buildItemForRow,
          ),
      ),
    );
  }
}
//返回 ListView 上Item 的小部件
  Widget _buildItemForRow(BuildContext context, int index) {
    return ListTile(
      title: Text(_datas[index].name),
      subtitle: Container(
        height: 20,
        width: 20,
        child: Text(
          _datas[index].message,
          overflow: TextOverflow.ellipsis,
        ),
      ),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(_datas[index].imageUrl),
      ),
    );
  }

壯士且慢, 需要Demo請繼續關注,后面會一起上傳！！！?? 贊一下再走

重磅：

至此：感謝簡友的持續關注,決定提供一份完整Flutter項目，關注下面"技高易愁"公眾號獲取:【Flutter項目-微信】

請關注"技高易愁"微信公眾號.jpg

QQ：522608370

?? 點下贊唄！！！

Flutter （二）布局
Flutter （三） 狀態管理
Flutter （四） Map轉模型
Flutter （五） 網絡請求
Flutter （六） 保留界面狀態
Flutter （七） 混合開發 [配置]
Flutter （八） 混合開發 [Flutter完整項目嵌入到原生]