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

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

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

目次 †

↑

概要 †

Flutter の step by step（其の四）。

↑

手順１：業務ぃーな、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: 意味もなくステートを持つな。
フォームの現在値にはFormにGlobalKey?<FormState?>張って、
GlobalKey?<FormState?>.currentState?.save()でアクセスできる。

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

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

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

↑

後編 †

サード・ステップ

現状値の保存に対して、現状値の設定は？
フィールドの現在値にはFormFieldState?にGlobalKey?<FormFieldState?>張って、
GlobalKey?<FormFieldState?>.currentState?.didChange(this._userId)でアクセスできる。

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

↑

一覧表示の作成 †

↑

WebAPIでデータを取得する。 †

↑

JSONをdecodeする。 †

decodeするdart:convertライブラリのサンプルが複数ある。

JSON.decodeは古いライブラリ。

今は、jsonDecodeのライブラリを使用する。

以下の何れかの方に変換される模様。
- Map<String, dynamic>
- List<dynamic>

DBの一覧ならList<dynamic>になる。

↑

DataTable?を使用した一覧 †

業務系では、DataTable?のWidgetが使えそう。

Bindingは、DataTable?の、
- columns: で、列定義を行い、
- rows: で、DataRow? / DataCell?のlistを返す。

↑

ListView?を使用した一覧 †

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

↑

, etc. †

↑

参考 †

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

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

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

↑

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

↑

画面遷移処理 †

画面内の遷移と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");
},

↑

Widgetの部品化 †

全体構成の見直しの commonに入れる。
StatelessWidget?でラップする方法と、Widgetをextendsする方法がある模様。

↑

Drawer †

定義して

import 'package:flutter/material.dart';

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

使用する。

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

↑

Button †

定義して

import 'package:flutter/material.dart';

class MyElevatedButton extends StatelessWidget {

  final String _caption;
  final VoidCallback _onPressed;

  const MyElevatedButton(
      this._caption, this._onPressed,
      {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(this._caption),
      ...,
      ),
      onPressed: this._onPressed,
    );
  }
}

使用する。

MyElevatedButton('EnglishWords Button', this._englishWords),

↑

FormField? †

定義して
使用する。

↑

, etc. †

↑

その他の共通化 †

全体構成の見直しの各フォルダに入れる。

↑

ボタンを「コンポーネント化」しよう｜Flutter ボタン自作入門
https://zenn.dev/heavenosk/books/flutter-button-diy/viewer/extracting_button

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

↑

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

目次 †

概要 †

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

入力フォームの作成 †

前編 †

後編 †

一覧表示の作成 †

WebAPIでデータを取得する。 †

JSONをdecodeする。 †

DataTable?を使用した一覧 †

ListView?を使用した一覧 †

, etc. †

参考 †

Qiita †

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

画面遷移処理 †

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

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

Widgetの部品化 †

Drawer †

Button †

FormField? †

, etc. †

その他の共通化 †

変数/定数クラス †

関数クラス †

サービス・クラス †

参考 †

参考 †

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