{"id":568,"date":"2019-11-03T02:50:00","date_gmt":"2019-11-02T17:50:00","guid":{"rendered":"http:\/\/www.typea.info\/blog\/index.php\/2019\/11\/03\/flutter_http_postjson\/"},"modified":"2020-04-27T23:02:41","modified_gmt":"2020-04-27T14:02:41","slug":"flutter_http_postjson","status":"publish","type":"post","link":"https:\/\/www.typea.info\/blog\/index.php\/2019\/11\/03\/flutter_http_postjson\/","title":{"rendered":"Flutter : HTTP POST\u3068\u7d50\u679cJSON\u306e\u51e6\u7406"},"content":{"rendered":"

Flutter + Firebase \u3067\u30a2\u30d7\u30ea\u4f5c\u6210\u306e\u305f\u3081\u306e\u30d1\u30fc\u30c4\u3042\u3064\u3081\u3002<\/p>\n

1.\u3053\u3053\u307e\u3067\u306b\u78ba\u8a8d\u3057\u305f\u3053\u3068<\/h2>\n
    \n
  1. Flutter+Firebase\u74b0\u5883\u8a2d\u5b9a<\/a><\/li>\n
  2. \u753b\u9762\u9077\u79fb<\/a><\/li>\n
  3. Dialog<\/a><\/li>\n
  4. Http\u30af\u30e9\u30a4\u30a2\u30f3\u30c8<\/a><\/li>\n
  5. AndroidX\u5bfe\u5fdc<\/a><\/li>\n
  6. \u753b\u50cf\u306e\u9078\u629e<\/a><\/li>\n
  7. \u753b\u50cf\u306e\u5207\u308a\u629c\u304d<\/a><\/li>\n<\/ol>\n

    2.\u4eca\u56de\u78ba\u8a8d\u3059\u308b\u3053\u3068<\/h2>\n
      \n
    1. Image Pick\u30dc\u30bf\u30f3\u62bc\u4e0b\uff1a\u753b\u50cf\u3092\u9078\u629e\u3057\u3001\u753b\u50cf\u3092\u753b\u9762\u306b\u8868\u793a<\/li>\n
    2. OCR\u30dc\u30bf\u30f3\u62bc\u4e0b\uff1adio\u30d1\u30c3\u30b1\u30fc\u30b8<\/a> \u3092\u4f7f\u7528\u3057\u3066\u3001HTTP POST \u3067\u3001OCR\u30b5\u30fc\u30d3\u30b9(Google Cloud VIsioin API<\/a>)\u306b\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3001\u7d50\u679c\u3092JOSN\u3067\u5f97\u308b<\/li>\n
    3. \u7d50\u679c\u306eJSON\u3092\u51e6\u7406\u3057\u3066\u30c6\u30ad\u30b9\u30c8\u306b\u8868\u793a<\/a><\/li>\n<\/ol>\n

      3.\u30bd\u30fc\u30b9<\/h2>\n

      3.1 pubspwc.yaml<\/h3>\n

      dependencies:
      \n   image_picker: ^0.6.1+8
      \n   dio: ^3.0.3<\/p>\n

      3.2 \u30c6\u30fc\u30de\u306b\u8a72\u5f53\u3059\u308b\u90e8\u5206\u306e\u307f\u629c\u7c8b\u3002<\/h3>\n
      import 'dart:convert';\nimport 'dart:io';\n\nimport 'package:flutter\/material.dart';\nimport 'package:image_picker\/image_picker.dart';\nimport 'package:dio\/dio.dart';\n\nclass SecondRoute extends StatefulWidget {\n  @override\n  State<StatefulWidget> createState() {\n    return _SecondRoute();\n  }\n}\nclass _SecondRoute extends State<SecondRoute>{\n  Image _defaultImage = Image.network('https:\/\/flutter.github.io\/assets-for-api-docs\/assets\/widgets\/owl-2.jpg');\n  File _selectedFile;\n  final _textController = TextEditingController();\n\n  @override\n  void initState() {\n    super.initState();\n\/\/    _textController.addListener(_ocrText);\n  }\n\n  @override\n  void dispose() {\n    _textController.dispose();\n    super.dispose();\n  }\n\n  Future _handleImagePick(BuildContext context) async {\n    var imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);\n    setState(() {\n      _selectedFile = imageFile;\n    });\n  }\n\n  Future _handleOcr(BuildContext context) async {\n    var dio = new Dio();\n    var formData = new FormData.fromMap({\n      \"fileName\": \"ocrfile\",\n      \"file\": await MultipartFile.fromFile(_selectedFile.path ,filename: \"selected_file\")\n    });\n    var result = dio.post(\n        \"https:\/\/{google cloud vision api \u3092\u5b9f\u88c5\u3057\u305fWeb\u30b5\u30fc\u30d3\u30b9\u30a2\u30d7\u30ea\u306eURL}\",\n        options: Options(responseType:  ResponseType.json),\n        data: formData);\n\n    result.then((Response response){\n      print(\"<status> ${response.statusCode}\");\n      response.headers.forEach((k, v){\n        print(\"<header> $k:$v\");\n      });\n      var json = response.data;\n      print(json['text']);\n      setState(() {\n        _textController.text = json['text'];\n      });\n    });\n    return null;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: LayoutBuilder(\n        builder: (BuildContext context, BoxConstraints viewportConstraints) {\n          return SingleChildScrollView(\n            child: ConstrainedBox(\n              constraints: BoxConstraints(\n                minHeight: viewportConstraints.maxHeight,\n              ),\n              child: IntrinsicHeight(\n                child: Column(\n                  children: <Widget>[\n                    Container(\n                      \/\/ A fixed-height child.\n                      color: const Color.fromARGB(255, 255, 255, 255),\n                      height: 120.0,\n                    ),\n                    Expanded(\n                      \/\/ A flexible child that will grow to fit the viewport but\n                      \/\/ still be at least as big as necessary to fit its contents.\n                      child: Container(\n                        color: const Color(0xffffffff),\n                        height: 240.0,\n                        constraints: BoxConstraints(\n                            minWidth: viewportConstraints.maxWidth,\n                            minHeight: double.infinity\n                        ),\n                        child: Column(\n                          children: <Widget>[\n                            RaisedButton(\n                              onPressed: () {\n                                _handleImagePick(context);\n                              },\n                              child: Text('Image Pick'),\n                            ),\n                            RaisedButton(\n                              onPressed: (){\n                                _handleOcr(context);\n                              },\n                              child: Text('OCR'),\n                            ),\n                            (_selectedFile == null)?_defaultImage:Image.file(_selectedFile),\n                            TextField(\n                                controller: _textController,\n                                minLines: 6,\n                                maxLines: 15,\n                                decoration: InputDecoration(\n                                  border: OutlineInputBorder(),\n                                ),\n                            ),\n                          ],\n                        ),\n                      ),\n                    ),\n                  ],\n                ),\n              ),\n            ),\n          );\n        },\n      ),\n    );\n  }\n\n}<\/pre>\n
      4.\u5b9f\u884c<\/h2>\n
      Image Pick \u3067\u753b\u50cf\u3092\u30ed\u30fc\u30c9<\/p>\n
      \"flutter_ocr01\"<\/a><\/p>\n
      OCR\u30dc\u30bf\u30f3\u3067\u3001\u753b\u50cf\u3092\u30b5\u30fc\u30d3\u30b9\u306b\u9001\u4fe1\u3057\u3066\u3001\u7d50\u679c\u306eJSON\u3092\u30c6\u30ad\u30b9\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u8868\u793a<\/p>\n
      \"flutter_ocr02\"<\/a><\/p>\n
      <\/a>\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
      Flutter + Firebase \u3067\u30a2\u30d7\u30ea\u4f5c\u6210\u306e\u305f\u3081\u306e\u30d1\u30fc\u30c4\u3042\u3064\u3081\u3002 1.\u3053\u3053\u307e\u3067\u306b\u78ba\u8a8d\u3057\u305f\u3053\u3068 Flutter+Firebase\u74b0\u5883\u8a2d\u5b9a \u753b\u9762\u9077\u79fb Dialog Http\u30af\u30e9\u30a4\u30a2\u30f3\u30c8 AndroidX\u5bfe\u5fdc \u753b\u50cf\u306e\u9078 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","footnotes":""},"categories":[111],"tags":[],"class_list":["post-568","post","type-post","status-publish","format-standard","hentry","category-flutter"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=568"}],"version-history":[{"count":1,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/568\/revisions"}],"predecessor-version":[{"id":739,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/568\/revisions\/739"}],"wp:attachment":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}