Flutterの4thステップのバックアップ(No.9) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

「.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");
},

Widgetの部品化 †

手順２：全体構成の見直しの commonに入れる。

Drawer †

定義して

import 'package:flutter/material.dart';

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

使用する。

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

Button †

, etc. †

その他の共通化 †

†

†

参考 †

dart - Persisting AppBar? Drawer across all Pages Flutter
https://stackoverflow.com/questions/51659805/persisting-appbar-drawer-across-all-pages-flutter
ボタンを「コンポーネント化」しよう｜Flutter ボタン自作入門
https://zenn.dev/heavenosk/books/flutter-button-diy/viewer/extracting_button

手順２：業務ぃーな、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で部品化が可能。
- カスタム・コントロール的なコトも可能。

一覧表示の作成 †

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/

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

参考 †