Flutterラボの

プレミアム会員になる

【Flutter】郵便番号から住所を自動入力する

2020.10.04

アプリの中で、住所を入力してもらうときに郵便番号だけで市区町村まで自動入力するようにしておくと使いやすくなります。

完成形

画像1

郵便番号検索APIにGETメソッドでリクエストして、取得してきたJSON情報の都道府県、市区、町村の部分を、住所入力用のコントローラーに追加するという流れで処理しています。

GETメソッドについての記事もアップしているので、そちらを参考にしながら見ていただけると幸いです。

全体のコードはこちらです。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Hatchout',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: TopPage(),
   );
 }
}


class TopPage extends StatefulWidget {
 @override
 _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {

 final zipCodeController = TextEditingController();
 final addressController = TextEditingController();

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('GETメソッド'),
       centerTitle: true,
     ),
     body: Padding(
       padding: const EdgeInsets.all(10.0),
       child: Column(
         children: [
           Row(
             children: [
               Container(child: Text('郵便番号', style: TextStyle(fontSize: 18.0),), width: 90),
               Expanded(
                 child: TextFormField(
                   maxLines: 1,
                   controller: zipCodeController,
                   keyboardType: TextInputType.number,
                   decoration: InputDecoration(
                     labelText: '郵便番号',
                     suffixIcon: IconButton(
                       highlightColor: Colors.transparent,
                       icon: Container(
                           width: 36.0, child: new Icon(Icons.clear)),
                       onPressed: () {
                         zipCodeController.clear();
                         addressController.clear();
                       },
                       splashColor: Colors.transparent,
                     ),
                   ),
                 ),
               ),
               OutlineButton(
                 child: Text('検索'),
                 onPressed: () async {
                   var result = await get('https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipCodeController.text}');
                   Map<String, dynamic> map = jsonDecode(result.body)['results'][0];
                   addressController.text = '${map['address1']}${map['address2']}${map['address3']}';
                 },
               ),
             ],
           ),
           Padding(padding: EdgeInsets.symmetric(vertical: 10.0)),
           Row(
             children: [
               Container(child: Text('住所', style: TextStyle(fontSize: 18.0)), width: 90,),
               Expanded(
                 child: TextFormField(
                   maxLines: 1,
                   controller: addressController,
                   decoration: InputDecoration(
                     labelText: '住所',
                   ),
                 ),
               ),
             ],
           ),
         ],
       ),
     )
   );
 }

}

リンク

ハッチアウトスクール A new Flutter application.ハッチアウトスクールの公式サイトです hatchout.net
プログラミングで副業!アプリ開発学習 | ONthe UMEDA 企業のファン獲得から個人の生活品質向上まで、ますます需要の高まる"アプリ"の開発を、ご自身のペースで学べる教材・学習サポー onthe.osaka
郵便番号検索API - zipcloud 日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。 zipcloud.ibsnet.co.jp
http | Dart Package A composable, multi-platform, Future-based API for HTTP reque pub.dev


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt