【Dart/Flutter開発】画面遷移とカレンダー機能を実装、実際の(自作)アプリと考え方を共に...【スマホアプリ】

 

こんにちは、たちつてとです。

【Dart/Flutter開発】表示制御と検索機能の実装、実際の(自作)アプリと考え方を共に...【スマホアプリ】では、一覧型の画面での機能:要素の非表示制御・検索機能について説明しました。

今回は、登録画面を紹介します。といっても、更新機能はOnPressやらOnTapに更新処理かますだけなんで、紹介するほどのことでもないと思います。更新の記述も人によってまちまちでしょうし...

 

で、今回は

  • タップ→登録画面への遷移
  • カレンダー

について、紹介しようと思います。

機能の外観は下画像になります。

 

ちなみに見た目に関しては、簡単にですが

【Flutter/Dart開発】見た目を整えるための基礎知識をまとめた【スマホアプリ】

でまとめました。

f:id:tachitutetoNosuke:20211004200806p:plain

 

画面遷移と値の引き渡し

タップイベントで画面遷移をさせます。

ここで、ただ画面遷移すると登録してあるのに

編集画面が空欄のままじゃないか!!

となるので、適切に登録データも

渡してやる必要があります。

 

まずタップイベントが仕込めるように

ListTile(
title: Column(children: <Widget>[中身]),
  onTap: () {
Navigator.push(
context,
MaterialPageRoute(
       // ここでdayMesaiという変数を飛ばす
builder: (context) => InputMoney(mesai: dayMesai)));
},
),

ListTileというのを利用しました。titleの中にボタンとか日付などのデータが(Containerとかで)配置してあります。onTap = タップイベント発火時

MaterialPageRouteというクラスで、

描画したいWidgetを渡します。

ここではこれに加え、

dayMesaiという(日付やら出費など)データが詰まった

引数に渡しています。

 

画面表示するだけでいいわ〜って場合なら、

特に引数は必要ありません。

ただの画面遷移で十分な方は、以下は読み飛ばしてもらって大丈夫です。

 

しかし、一覧→編集画面という動きでは

各入力欄に値が入っているのが自然です。

そこで、

class InputMoney extends StatefulWidget {
final Mesai? mesai = null;

 // 引数にMesai? mesaiとあることに注意
InputMoney({Key? key, Mesai? mesai, DateTime? iniDate}) : super(key: key) {
_InputMoney.mesai = mesai;//渡ってきたmesaiをStateに設定
_InputMoney.iniDate = iniDate;
//print(this.mesai!.memo);
}

@override
State<StatefulWidget> createState() {
return _InputMoney();
}
}

MaterialPageRouteに渡しているWidgetに、

Mesai(=明細)という自作クラスを渡せるようにしています。

さらにコンストラクタでは、

_InputMoneyというStateのmesaiという

staticなフィールドにセットしています。

_InputMoneyでは、セットされたmesaiから

日付などの内容にアクセス・表示します。

 

文字にすると、めちゃくちゃめんどくさいですね....

 

ちなみにmeisa、ひいてはMesaiクラスはこんな感じ。

@HiveType(typeId: 1)
class Mesai{
const Mesai({
this.categoryCd = -1
, required this.dateNo
, this.money = 0
, this.memo=''
});

@HiveField(0)
final int categoryCd;
@HiveField(1)
final String dateNo;
@HiveField(2)
final int money;
@HiveField(3)
final String memo;
}

category、date、money、memoというフィールドがあります。

※Hive〜というのは気にしないでください。

「Hive」というスマホのストレージに

データを保存する方針をとっていて、このための記述です。 

一応、

【Dart/Flutter開発】ローカルのストレージでデータ記録/管理できるHiveについてまとめた話

にHiveの使い方をまとめました。

この4つの項目が入力欄にセットされます。

 

一行でまとめると、

タップイベント発火時に、該当するStateまでにデータの入ったオブジェクトを引き渡していく

感じです。別にめんどくさくなかったわ。

 

 

カレンダーの実装

こちらは、date_pickerというのを利用しています。

dependencies:
flutter:
sdk: flutter

intl: ^0.17.0

こんな感じでintlというのをインストールします。

インテル?絶対違う...

import 'package:intl/intl.dart';
import 'dart:async';

該当ファイルで、importし、

↓メソッドを追記。

最初ifは僕のアプリ用の分岐なのでお気になさらず...

Future<void> _selectDate(BuildContext context) async {
DateTime date;
// 人によってまちまち
if (mesai == null) {
date = DateTime.now();
} else {
date = DateFormat('yyyy/MM/dd').parseStrict(mesai!.dateNo.split('_')[0]);
}
final DateTime? selected = await showDatePicker(
context: context,
initialDate: date, //DateTime.now(),
firstDate: DateTime(2021),
lastDate: DateTime(DateTime.now().year + 1),
);
if (selected != null) {
setState(() {
_dateText = (DateFormat('yyyy/MM/dd')).format(selected);// 選択された日付
});
}
}

さらに、

Container(
width: 130,
color: Color.fromRGBO(240, 255, 255, 1.0),
child: ElevatedButton(
child: (Text(
_dateText,// 選択された日付が表示
style: new TextStyle(
fontSize: 17.0,
),
)),
style: ElevatedButton.styleFrom(
elevation: 0.0,
shadowColor: Colors.transparent,
primary:
Color.fromRGBO(240, 255, 255, 1.0),
onPrimary:
Color.fromRGBO(47, 79, 79, 1.0),
),
//style: TextStyle(fontSize: 18),
onPressed: () {
_selectDate(context);
},
),
)

 

ElevatedButtonのOnPressでも、

日付選択ができるようになっています。

→日付が表示されているところをタップしても、

日付選択ができます。

_dateTextという変数のあたりにコメントをかいていますが、

例えば、この_dateTextを登録処理に取り込めば、

選択された日付をデータとして保存できます。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Javaのオブジェクト指向がゼッタイにわかる本[第2版] [ 立山秀利 ]
価格:2530円(税込、送料無料) (2021/9/26時点)

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Flutter モバイルアプリ開発バイブル [ 南里勇気 ]
価格:3509円(税込、送料無料) (2021/9/20時点)

エンジニア発オンラインスクール【RUNTEQ】