flutter 訪問網頁+http請求

一、目錄

1、訪問網頁

2、http請求

-----------------------------這是分割線-----------------------------

1、訪問網頁

 基於url_launcher庫實現，最新版本號 5.0.2，沒有的話需要添加到pubspec.yaml中

然后get 該package

只要引入不報錯就ok了。

ex.dart

/*
  time: 2019-4-3
 */

// 引入資源包
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

// main fun
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
        title: 'url請求',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Example of packages'),
          ),
          body: new Center(
            child: new RaisedButton(
              onPressed: () {
                print(1);
                // url
                const url = "https://www.baidu.com";
                launch(url); // 打開瀏覽器跳轉至百度網頁
              },
              child: new Text('baidu'),
            ),
          ),
        ));
  }
}

運行效果如下

點擊baidu按鈕，打開網頁

 

 

 

 

2、http請求

2.1、Http請求

下載Http庫 版本號 0.12.0+2

ex.dart

/*
  time: 2019-4-3
  title: htttp請求
 */

// 引入資源包
import 'package:flutter/material.dart';
//import 'package:url_launcher/url_launcher.dart';
import 'package:http/http.dart' as http;

// main fun
void main () => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
        title: 'Http 請求示例',
        home: new Scaffold(
          appBar: new AppBar(
            title:  new Text('Http 請求示例'),
          ),
          body: new Center(
            child: new RaisedButton(
              onPressed: () {
                print(1);
                var url = 'http://www.cnblogs.com/';

                // get
                http.get(url).then((response) {
                  print("Response status: ${response.statusCode}");
                  print("Response body: ${response.body[10]}");
                });

                // post
                http.post(url,body: {"key": "value"}).then((response) {
                  print('this is post');
                  print("Response status: ${response.statusCode}");
                  print("Response body: ${response.body}");
                });
              },
              child: new Text('發送請求'),
            ),
          ),
        )
    );
  }
}

運行效果

我點擊發送請求之后，控制台輸出

請求成功，並返回了內容。

2.1、HttpClient請求

 ex.dart

/*
  time: 2019-4-3
  title: htttpClient請求
 */

// 引入資源包
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';

// main fun
void main () => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // 獲取天氣數據
  void getWeatherData() async {
    try {
      // 實例化一個HttpCLient對象
      HttpClient  httpClient = new HttpClient();

      // 發起請求
      HttpClientRequest request = await httpClient.getUrl(
          Uri.parse("http://wthrcdn.etouch.cn/weather_mini?city=重慶市")
      );
      // 等待服務器返回數據
      HttpClientResponse response = await request.close();
      // 使用utf-8.decoder從response解析數據
      var result = await response.transform(utf8.decoder).join();
      // 輸出
      print(result);
      // 關閉
      httpClient.close();

    } catch (e) {
      print("請求失敗：$e");
    }
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'HttpClient 請求示例',
      home: new Scaffold(
        appBar: new AppBar(
          title:  new Text('HttpClient 請求示例'),
        ),
        body: new Center(
          child: new RaisedButton(
              onPressed: getWeatherData,
              child: new Text('獲取天氣數據'),
          ),
        ),
      )
    );
  }
}

運行效果如下：

點擊按鈕之后，控制台輸出：

I/flutter (15353): {"data":{"yesterday":{"date":"6日星期六","high":"高溫 30℃","fx":"無持續風向","low":"低溫 14℃","fl":"<![CDATA[<3級]]>","type":"晴"},"city":"重慶","forecast":[{"date":"7日星期天","high":"高溫 32℃","fengli":"<![CDATA[<3級]]>","low":"低溫 15℃","fengxiang":"無持續風向","type":"晴"},{"date":"8日星期一","high":"高溫 32℃","fengli":"<![CDATA[<3級]]>","low":"低溫 18℃","fengxiang":"無持續風向","type":"多雲"},{"date":"9日星期二","high":"高溫 29℃","fengli":"<![CDATA[<3級]]>","low":"低溫 19℃","fengxiang":"無持續風向","type":"多雲"},{"date":"10日星期三","high":"高溫 24℃","fengli":"<![CDATA[<3級]]>","low":"低溫 18℃","fengxiang":"無持續風向","type":"陰"},{"date":"11日星期四","high":"高溫 25℃","fengli":"<![CDATA[<3級]]>","low":"低溫 18℃","fengxiang":"無持續風向","type":"多雲"}],"ganmao":"各項氣象條件適宜，發生感冒機率較低。但請避免長期處於空調房間中，以防感冒。","wendu":"3}