Flutterの4thステップのバックアップ(No.7)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- Flutterのファースト・ステップ
- Flutterのセカンド・ステップ
- Flutterのサード・ステップ
- Flutterの4thステップ

目次 †

↑

概要 †

Flutter の step by step（其の四）。

↑

手順１：気になっている所を修正する。 †

↑

画面遷移処理 †

画面内の遷移とDrawerの遷移がゴッチャになる。
調べていくと、最初に表示された画面は、ルートでPOPできない。
以下の修正を加えると、ソレっぽくなる。

↑

画面内の遷移は、スタックにプッシュする。 †

基本的に、戻るボタンで全画面に戻る。
処理次第でpopを明示的に実装する。

↑

Drawerの遷移は、一度スタックを空にする。 †

以下のように実装する。

ルートへの遷移
ルートまでpopする。

onTap: () {
  while(Navigator.of(context).canPop()){
    Navigator.of(context).pop();
  }
},

ルート以外への遷移
ルートまでpopした後、１つダケpushする。

onTap: () {
  while(Navigator.of(context).canPop()){
    Navigator.of(context).pop();
  }
  Navigator.of(context).pushNamed("/appauth");
},

↑

共通化 †

↑

Drawer †

定義して

import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(

使用する。

return Scaffold(
  ...,
  drawer: MyDrawer(),
);

↑

, etc. †

Widget系は、上記と同じ様な共通化が可能っぽい。

↑

参考 †

↑

Stack Overflow †

dart - Persisting AppBar? Drawer across all Pages Flutter
https://stackoverflow.com/questions/51659805/persisting-appbar-drawer-across-all-pages-flutter

↑

手順２：業務ぃーな、CRUDを実装してみる。 †

↑

入力フォームの作成 †

公式のサンプルに問題があるらしい。
取り敢えず、基本のTextFormField?を使ってみる。

↑

前編 †

ファースト・ステップ
以下のような感じ。

// main.dart
Form(
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'id'),
      ),
      TextFormField(
        decoration: InputDecoration(labelText: 'password'),
        obscureText: true, // 追加
      ),
    ],
  ),
)

セカンド・ステップ
以降、術は熱いうちに打てが参考になる。

doneボタンが押された時の処理を記述
doneからnextに変更しフォーカス移動
初期値設定と現状値の保存
インライン・バリデーション処理の実装

ポイント

その1: 意味もなくsave()するな。
単に、子要素のonSave()を呼ぶ処理なので。

その2: 意味もなくステートを持つな。
フォームの現在値にはFormFieldState?にGlobalKey?張ってアクセスできる。

その3: やたらめったらFormを書き換えるな。
要するに、setStateを書かなくてもイイというコトらしい。

その4: 初期値を入れるのにTextEditingController?を使うな。
TextFormField?.initialValueを使用する。

その5: AutofillHints?ちゃんと書こう。
HTML.Inputタグで言うところのautocomplete属性。

↑

後編 †

サード・ステップ

現状値の保存に対して、現状値の設定は？
フィールドの現在値にはFormFieldState?にGlobalKey?張ってアクセスできる。

バリデーション処理長い
- implements Validatableで部品化が可能。
- カスタム・コントロール的なコトも可能。

↑

一覧表示の作成 †

↑

DataTable? †

業務系では、DataTable?が使えそう。
Bindingは、DataTable?の、
- columns: で、列定義を行い、
- rows: で、DataRow? / DataCell?のlistを返す。
- JSONの場合、サンプルと同じ型にparseすれば良い。
```
List<Map<String, String>> jsonArray = JSON.decode(json);
```

↑

cardデザイン †

ListView?.builderのitemBuilderでcardデザインを返す。
cardデザインは手順１：プッシュ通知のサンプル中に含まれる。

↑

, etc. †

↑

参考 †

【誰でも分かる！】FlutterのFormを一から
作りながら解説してみたよ | 技術は熱いうちに打て！
https://blog.dalt.me/2036

[Flutter]入力フォームのインラインバリデーションを実装する | DevelopersIO
https://dev.classmethod.jp/articles/flutter-inline-validation/

Creating Custom Form Fields in Flutter
by AbdulRahman? AlHamali? | SAUGO 360 | Medium
https://medium.com/saugo360/creating-custom-form-fields-in-flutter-85a8f46c2f41

dart - How to add dynamically items to the table in flutter? - Stack Overflow
https://stackoverflow.com/questions/53997496/how-to-add-dynamically-items-to-the-table-in-flutter

↑

Qiita †

Flutter Form系Widgetの使い方〜すべてのWidgetを学習
https://qiita.com/kurun_pan/items/3378875ff034614f381a

お前らのFormのサンプルコードはすべて間違っている
https://qiita.com/hummer/items/8f1ba5ae09d31f42a465

【初心者】Flutter:APIでデータ取得して、一覧表示させるサンプルアプリ
https://qiita.com/yasutaka_ono/items/6d2a0d3b0856598f9788

↑

Flutterの4thステップ のバックアップ(No.7)

目次 †

概要 †

手順１：気になっている所を修正する。 †

画面遷移処理 †

画面内の遷移は、スタックにプッシュする。 †

Drawerの遷移は、一度スタックを空にする。 †

共通化 †

Drawer †

, etc. †

参考 †

Stack Overflow †

手順２：業務ぃーな、CRUDを実装してみる。 †

入力フォームの作成 †

前編 †

後編 †

一覧表示の作成 †

DataTable? †

cardデザイン †

, etc. †

参考 †

Qiita †

参考 †

Flutterの4thステップのバックアップ(No.7)