Flutter : HttpClient

Xamarin –> Flutter の準備ができたので、

http://typea.info/blg/glob/2019/10/xamarin-flutter.html

なれるために、基本的な機能を試してみる。

に続いて、HttpClient

HttpClient

ボタンを押したら、GAEに置いた疎通用のAPIを呼び出して、結果をダイアログに表示してみる。

合わせて、HTTPヘッダの内容をログに吐き出す。

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';

class SecondRoute extends StatelessWidget{

  Future<void> _handleHello(BuildContext context) async {
    String message;
    HttpClient client = new HttpClient();
    await client.getUrl(Uri.parse("https://favophrase.com/api/hello"))
      .then((HttpClientRequest request) {
        return request.close();
      })
      .then((HttpClientResponse response) {
        print("<status> ${response.statusCode}");
        response.headers.forEach((k, v){
          print("<header> $k:$v");
        });
        response.transform(utf8.decoder).listen((contents){
          print("<contents> $contents");
          message = contents;
        });
       });

    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Hello'),
          content: Column(
            children: <Widget>[
              Text(message),
            ],
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              'Second Screen.',
            ),
            RaisedButton(
              onPressed: (){
                _handleHello(context);
              },
              child: Text('Hello'),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Back'),
            ),
          ]
        ),
      ),
    );
  }
}

ログに、ステータスコード、HTTPヘッダ、コンテンツを出力



10-03 22:57:23.773 7372-7459/info.typea.favo_phrase I/flutter: <status> 200 10-03 22:57:23.773 7372-7459/info.typea.favo_phrase I/flutter: <header> x-cloud-trace-context:[12a5548da17d4857f598d572e6a7437d;o=1] 10-03 22:57:23.773 7372-7459/info.typea.favo_phrase I/flutter: <header> content-type:[text/plain;charset=utf-8] 10-03 22:57:23.773 7372-7459/info.typea.favo_phrase I/flutter: <header> date:[Thu, 03 Oct 2019 13:57:21 GMT] 10-03 22:57:23.773 7372-7459/info.typea.favo_phrase I/flutter: <header> content-length:[42] 10-03 22:57:23.773 7372-7459/info.typea.favo_phrase I/flutter: <header> server:[Google Frontend] 10-03 22:57:23.793 7372-7459/info.typea.favo_phrase I/flutter: <contents> Hello. This is FavoPhrase Web Service API.

flutter_httpclient1

アラートダイアログにコンテンツを表示

flutter_httpclient2

なかなかいい感じだな。