Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】郵便番号から住所を自動入力する
2020.10.04
アプリの中で、住所を入力してもらうときに郵便番号だけで市区町村まで自動入力するようにしておくと使いやすくなります。
完成形
郵便番号検索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: '住所',
),
),
),
],
),
],
),
)
);
}
}
リンク
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13