環境構築
画面遷移
遷移元のクラス(ここではmain.dart)に以下のメソッドを追加main.dart
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
const <ここは遷移先のクラス>(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return child;
},
);
}
その後、ボタン等に上記で追加した遷移のイベントを仕込む。
以下の例ではchildrenの中に遷移ボタン（ElevatedButton）を仕込む
main.dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//ーーーーーーーーーーーーー ここから ーーーーーーーーーーーーー
ElevatedButton(
onPressed: () {
Navigator.of(context).push(_createRoute());//ボタン押下時イベント追加
},
child: const Text('詳細'),//ボタンのテキスト
),
//ーーーーーーーーーーーーー ここまで ーーーーーーーーーーーーー
],
),
),
);
}
ライブラリの追加
-
pubspec.yamlに使いたいライブラリを追記する。
追記するとき、インデントに注意する
今回は以下のライブラリを追加
pubspec.yaml
dependencies:
table_calendar: ^3.0.5 # インデントに注意
2.ターミナルでプロジェクトのディレクトリまで移動して、以下のコマンドを実行
flutter pub get
これで、プロジェクトがライブラリを認識するようになるのでライブラリを使用したいdartファイルを再度開いてimportすればエラー解消。
変数バインド時の注意点
1.コントロールに変数をバインドした際、値を動的に変化させたい場合例）カレンダーで別途配置したボタン(以下の例ではTextButton)を押下時、日付を変数の値とバインドしたい
main.dart
TableCalendar(
firstDay: DateTime(1900, 01, 01),
lastDay: DateTime.now().add(const Duration(days: 5000)),
focusedDay: _focusedDate,//変数をバインド
currentDay: _focusedDate,//変数をバインド
),
TextButton(
autofocus: true,
onPressed: _selectCurrentDate,
clipBehavior: Clip.hardEdge,
child: const Icon(Icons.add),
),
// ボタンを押したら「本日」を選択するメソッド
void _selectCurrentDate() {
_focusedDate = DateTime.now();
}
上記では_focusedDateの値が変更されても、コントロールに反映されない。
以下のように処理を修正する必要がある
void _selectCurrentDate() {
- _focusedDate = DateTime.now();
+ setState(() {
+ _focusedDate = DateTime.now();
+ });
}
ただし、setStateはパフォーマンスがよくないらしい。（下記URL参照）
後ほど、Providerでの書き換えも挑戦してみようと思います。
入力テキストの横幅指定
以下のようにTextFieldを複数追加して実行すると、エラーで落ちる・・・。main.dart
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:[
TextField(
decoration: InputDecoration(
hintText: 'ToDo',
),
),
TextField(
decoration: InputDecoration(
hintText: 'ToDo',
),
),
],
),
エラーの内容みると、TextFieldの横幅の初期値がdouble.infinityで複数無限となっているから、干渉しあってるみたいな雰囲気。
しかし、TextFieldにwidth等を指定するプロパティはない・・・。
調べてみると以下のようにExpandedやSizedBoxを使用して回避するらしい。若干使いづらい・・・。
main.dart
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Expanded(
flex: 1,
child: Container(
child: TextField(
decoration: InputDecoration(
hintText: 'ToDo',
),
),
),
),
Expanded(
flex: 1,
child: Container(
child: TextField(
decoration: InputDecoration(
hintText: 'ToDo',
),
),
),
),
],
),
文字列管理（多言語化対応含む）
Androidでいえばresources.xml（記憶曖昧）のようなもの。 *.arbファイルで管理する。 以下の参考URLで試したけど、インポートうまくいかない・・・。ってときはVSCodeを再起動したらインポートできるようになりました。参考URL
ローカルDBを構築
昔Android開発してた時はsqlite使ってたなーってちょこちょこ調べてたらflutter用sqliteみたいなの見つけたのでこちらを使ってみる。Webではプラグイン等導入しないと使えないようなので注意。（2022/03/28）
とりあえずdependenciesに追加。
pubspec.yaml
dependencies:
sqflite: ^2.0.2
path_provider: ^2.0.9
<追記中>
参考URL
ーーーーーーーーーーーーー追記中ーーーーーーーーーーーーー