Flutter : HTTP POSTと結果JSONの処理

Flutter + Firebase でアプリ作成のためのパーツあつめ。

1.ここまでに確認したこと

2.今回確認すること

Image Pickボタン押下：画像を選択し、画像を画面に表示
OCRボタン押下：dioパッケージを使用して、HTTP POST で、OCRサービス(Google Cloud VIsioin API)に画像をアップロードし、結果をJOSNで得る
結果のJSONを処理してテキストに表示

3.ソース

3.1 pubspwc.yaml

dependencies:
image_picker: ^0.6.1+8
dio: ^3.0.3

3.2 テーマに該当する部分のみ抜粋。

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

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

class SecondRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SecondRoute();
  }
}
class _SecondRoute extends State<SecondRoute>{
  Image _defaultImage = Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg');
  File _selectedFile;
  final _textController = TextEditingController();

  @override
  void initState() {
    super.initState();
//    _textController.addListener(_ocrText);
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  Future _handleImagePick(BuildContext context) async {
    var imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _selectedFile = imageFile;
    });
  }

  Future _handleOcr(BuildContext context) async {
    var dio = new Dio();
    var formData = new FormData.fromMap({
      "fileName": "ocrfile",
      "file": await MultipartFile.fromFile(_selectedFile.path ,filename: "selected_file")
    });
    var result = dio.post(
        "https://{google cloud vision api を実装したWebサービスアプリのURL}",
        options: Options(responseType:  ResponseType.json),
        data: formData);

    result.then((Response response){
      print("<status> ${response.statusCode}");
      response.headers.forEach((k, v){
        print("<header> $k:$v");
      });
      var json = response.data;
      print(json['text']);
      setState(() {
        _textController.text = json['text'];
      });
    });
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: IntrinsicHeight(
                child: Column(
                  children: <Widget>[
                    Container(
                      // A fixed-height child.
                      color: const Color.fromARGB(255, 255, 255, 255),
                      height: 120.0,
                    ),
                    Expanded(
                      // A flexible child that will grow to fit the viewport but
                      // still be at least as big as necessary to fit its contents.
                      child: Container(
                        color: const Color(0xffffffff),
                        height: 240.0,
                        constraints: BoxConstraints(
                            minWidth: viewportConstraints.maxWidth,
                            minHeight: double.infinity
                        ),
                        child: Column(
                          children: <Widget>[
                            RaisedButton(
                              onPressed: () {
                                _handleImagePick(context);
                              },
                              child: Text('Image Pick'),
                            ),
                            RaisedButton(
                              onPressed: (){
                                _handleOcr(context);
                              },
                              child: Text('OCR'),
                            ),
                            (_selectedFile == null)?_defaultImage:Image.file(_selectedFile),
                            TextField(
                                controller: _textController,
                                minLines: 6,
                                maxLines: 15,
                                decoration: InputDecoration(
                                  border: OutlineInputBorder(),
                                ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }

}