早速コーディングに入っていく。
環境
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.3, on macOS 13.4 22F66 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.78.2)
[✓] Connected device (3 available)
[✓] Network resources
• No issues found!
エリア選択ボタンの実装
ホーム画面にエリア選択のボタンがあり、タップすると東北、関東、中部など地方ごとに都道府県や地方を選べるページを開く。都道府県や地方を選んでタップすると、ホームに戻り、現在選んでいるエリアを表示する。絞り込みの機能は一旦置いといて見た目の大枠から作っていく。
ボタン側には選択したエリアの値を受け取る準備をしておく。
main.dart
ElevatedButton(
onPressed: () async{
String selectArea = await showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(10)),
),
builder: (BuildContext context) {
return const PrefecturesWindow();
},
);
setState(() {
_selectArea = selectArea;
});
},
child: const Text('エリアを選択する',),
),
続いてエリア選択のページ。
材料の用意から
const.dart
final List areaList = ['東北', '関東', '中部', '関西', '中国', '四国', '九州'];
final List touhokuList = ['青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県'];
final List kantouList = ['茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県'];
final List chuubuList = ['新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県'];
final List kansaiList = ['滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県'];
final List chuugokuList = ['鳥取県', '島根県', '岡山県', '広島県', '山口県'];
final List shikokuList = ['徳島県', '香川県', '愛媛県', '高知県'];
final List kyuushuuList = ['福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'];
最近見てかっこいいなと思ったshowModalBottomSheetに表示させる。
prefectures_window.dart
import 'package:flutter/material.dart';
import 'const.dart';
class PrefecturesWindow extends StatefulWidget {
const PrefecturesWindow({super.key});
@override
State<PrefecturesWindow> createState() => _PrefecturesWindowState();
}
class _PrefecturesWindowState extends State<PrefecturesWindow> {
@override
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width*0.95,
height: MediaQuery.of(context).size.height*0.95,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 16,),
ListTile(
title: const Text('全国'),
trailing: const Icon(
Icons.keyboard_arrow_right,
),
onTap: () {
setState(() {
Navigator.pop(context, '');
});
},
),
ListTile(
title: const Text('北海道'),
trailing: const Icon(
Icons.keyboard_arrow_right,
),
onTap: () {
setState(() {
Navigator.pop(context, ' ＞ 北海道');
});
},
),
ExpansionTile(
title: const Text('東北'),
children: [
Column(
children: [
const Divider(
height: 1,
),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: ListTile(
title: const Text('東北全域'),
trailing: const Icon(
Icons.keyboard_arrow_right,
),
onTap: (){
setState(() {
Navigator.pop(context, ' ＞ 東北全域');
});
},
),
),
Column(
children:
touhokuList.map((e) => Column(
children: [
const Divider(
height: 1,
),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: ListTile(
title: Text(e),
trailing: const Icon(
Icons.keyboard_arrow_right,
),
onTap: (){
setState(() {
Navigator.pop(context, ' ＞ 東北 ＞ $e');
});
},
),
),
],
)).toList(),
),
],
)
],
),
//以下省略
こんな感じ
スプラッシュ画面
ここで思い出したかのようにスプラッシュ画面を実装していく。
とても簡単に実装できるパッケージがあるとのこと。
https://pub.dev/packages/flutter_native_splash
pubspec.yaml
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_native_splash: ^2.3.1
flutter_native_splash:
color: '#1E1E1E'
image: assets/images/afua_splash.png
特にエラーは出ないがなぜだか表示されない、、、
結論から言うと、Android12以降の端末ではsplashに対するOS側の挙動が11以前と異なり、flutter_native_splashでもpubspec.yamlに別途記述が必要らしい。
iphoneの実機を使っているつもりでとりあえず追加していなかった記述だったが、使っていたのはしっかりAndroid12の実機だったという(失われし悲しみの数時間、、、)
pubspec.yaml
flutter_native_splash:
color: '#1E1E1E'
image: assets/images/splash.png
+ android_12:
+ icon_background_color: '#1E1E1E'
+ image: assets/images/splash_android.png
表示されるようになった。
今回はここまで。