淺嘗flutter中的http請求

YuTao發表於2018-04-03
FlutterHTTP

本篇教程聊一聊flutter中http的坑，閱讀本教程之前假設你已經掌握了flutter的一些基礎知識，比如環境搭建，簡單的dart語法，及flutter元件化思想。

因為我是前端，所以資料互動邏輯都是以前端的思想設計，如果有不對的地方，歡迎大家指正。

先看效果圖

效果圖

整個頁面就是一個長list新聞列表，後臺是自己用django寫的，資料是python爬的，我們先寫一個新聞的模板，效果如圖：

模板
我們先新建一個模板的檔案News.dart,程式碼如下：

import 'package:flutter/material.dart';

class News extends StatefulWidget {
  final String title,imglink; 
  News(this.title,this.imglink);
  @override
  createState() => new NewsState();  
}
class NewsState extends State<News> {
  @override
  Widget  build(BuildContext context){   
    return new Center(
     child:new Container(
       height: 120.0,
       padding:new EdgeInsets.only(left:20.0,right:20.0),
       decoration: new BoxDecoration(
         border:new Border(
           bottom: new BorderSide(width: 1.0,color:const Color(0xff999999))
         )
       ),
       child: new Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: <Widget>[
           new Expanded(
             flex:2,
             child: new Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisAlignment:MainAxisAlignment.spaceBetween ,
               children: <Widget>[
                 new Container(
                   padding:new EdgeInsets.only(top:15.0),
                   decoration: new BoxDecoration(
                   ),
                   child:new Text(
                     widget.title,
                     style: new TextStyle(
                       fontSize: 18.0
                     ),
                   ),
                 ),
                  new Container(
                   padding:const EdgeInsets.only(right:13.0,bottom:15.0),
                   decoration: new BoxDecoration(
                   ),
                   child:new Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: <Widget>[
                       new Text(
                         '本地新聞',
                       ),
                        new Text(
                         '2018-03-11',
                       ),
                     ],
                   )
                 
                 ),
               ],
             ),
           ),
           new Expanded(
             flex:1,
             child: new Image.network(
               widget.imglink,
               scale: 1.0,
               fit: BoxFit.cover,
             ),
           ),
         ],
       ),
     ),
    );
  }
}

複製程式碼

關於這個模板頁面，前面有教程，大家可以自行前去淺嘗flutter中的flex佈局檢視

現在開始重點，我們在flutter中進行網路請求，首先到匯入兩個包：

import 'dart:io';

import 'dart:convert';

so

import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
複製程式碼

然後非同步請求資料，程式碼如下：

List<Map <String,String>> newTitle=[];
       _get() async {
         var responseBody;
         var url='http://127.0.0.1:8000/yt/getapp/';
         var httpClient = new HttpClient();
         var request = await httpClient.getUrl(Uri.parse(url));
         var response = await request.close();
         if (response.statusCode == 200) {
           responseBody = await response.transform(utf8.decoder).join();
           responseBody=JSON.decode(responseBody);
         }else{
           print("error");
         }
         await responseBody['msg'].map((Map item){
           newTitle.add(item);
         }).toList();     
       }
複製程式碼

整個邏輯也不會麻煩，所以全部程式碼如下：

import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
class TabPage3 extends StatefulWidget {
 @override
 createState() => new TabPage3States();  
}
class TabPage3States extends State<TabPage3> {
 @override
 Widget build(BuildContext context) {
       List<Map <String,String>> newTitle=[];
       _get() async {
         var responseBody;
         var url='http://127.0.0.1:8000/yt/getapp/';
         var httpClient = new HttpClient();
         var request = await httpClient.getUrl(Uri.parse(url));
         var response = await request.close();
         if (response.statusCode == 200) {
           responseBody = await response.transform(utf8.decoder).join();
           responseBody=JSON.decode(responseBody);
         }else{
           print("error");
         }
         await responseBody['msg'].map((Map item){
           newTitle.add(item);
         }).toList();     
       }
         _get();
     return new ListView(
           children: newTitle.map((Map  item){
         return  new News(item['title'],item['imglinks']);//News接收2個引數（標題和圖片url）
       }).toList(),
     );
 }
}


複製程式碼

這樣run的話，肯定會拋錯的，第一個坑：

 var url='http://127.0.0.1:8000/yt/getapp/';
複製程式碼

這個介面是我自己用django寫的，ajax測試完全沒有問題，但是在在模擬器上會報一個莫名其妙的錯誤，我明明是8000埠，它報錯38588有毛病：

埠錯誤

莫名其妙的錯誤讓人防不勝防，但是我也不是一個錯誤就能嚇到的，經過我多方查資料，大概意思就是Android底層是Linux核心，它本身就是一個作業系統，所以我們在模擬器的瀏覽器中輸入127.0.0.1所代表的是Android模擬器（Android吸泥機），並不是你的電腦，所以在模擬器中會出錯。在Android作業系統中，將本地電腦對映為10.0.2.2，所以只需要改成10.0.2.2就ok了。因為我這個介面是自己寫的，所以還需要在django的settings中配置一下：

ALLOWED_HOSTS = [
   '10.0.2.2',
   '127.0.0.1'
   ]
複製程式碼

第二個坑，因為我們_get()是非同步操作，ListView裡面newTitle的值始終是空

return new ListView(
           children: newTitle.map((Map  item){
         return  new News(item['title'],item['imglinks']);//item==>null
       }).toList(),
     );
複製程式碼

解決這個問題的過程很曲折，花了兩天時間，解決辦法很簡單，就是把_get()放到build外面去，還有個辦法就是，獲取future型別函式的返回值，傳送門flutter實戰3：製作新聞分類列表。

最後貼上全部程式碼：

import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';

class TabPage3 extends StatefulWidget {
  @override
  createState() => new TabPage3States();  
}
class TabPage3States extends State<TabPage3> {
  @override
  List<Map <String,String>> newTitle=[];
        _get() async {
          // List<Map> _newTitle=new List();
          var responseBody;
          var url='http://10.0.2.2:8000/yt/getapp/';
          var httpClient = new HttpClient();
          var request = await httpClient.getUrl(Uri.parse(url));
          var response = await request.close();
          if (response.statusCode == 200) {
            responseBody = await response.transform(utf8.decoder).join();
            responseBody=JSON.decode(responseBody);
          }else{
            print("error");
          }
          await responseBody['msg'].map((Map item){
            newTitle.add(item);
          }).toList();     
          }
  Widget build(BuildContext context) {
          _get();
  
      return new ListView(
            children: newTitle.map((Map  item){
          return  new News(item['title'],item['imglinks']);
        }).toList(),
      );
  }
}

複製程式碼

程式碼都是參考官網英文文件擼的，但是本人是英語渣，所以如果有不對的地方，歡迎大家指正！

相關文章