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

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

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

目次 †

目次
概要
手順１：気になっている所を修正する。
手順２：業務ぃーな、CRUDを実装してみる。
参考

↑

概要 †

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(),
);

↑

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

↑

入力フォームの作成 †

公式のサンプルに問題があるらしい。

以下のような感じ。

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

ポイント

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

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

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

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

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

↑

一覧表示の作成 †

↑

参考 †

【誰でも分かる！】FlutterのFormを一から
作りながら解説してみたよ | 技術は熱いうちに打て！
https://blog.dalt.me/2036
[Flutter]入力フォームのインラインバリデーションを実装する | DevelopersIO
https://dev.classmethod.jp/articles/flutter-inline-validation/

↑

Qiita †

Flutter Form系Widgetの使い方〜すべてのWidgetを学習
https://qiita.com/kurun_pan/items/3378875ff034614f381a
【初心者】Flutter:APIでデータ取得して、一覧表示させるサンプルアプリ
https://qiita.com/yasutaka_ono/items/6d2a0d3b0856598f9788
お前らのFormのサンプルコードはすべて間違っている
https://qiita.com/hummer/items/8f1ba5ae09d31f42a465

↑

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

目次 †

概要 †

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

画面遷移処理 †

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

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

共通化 †

Drawer †

... †

参考 †

Stack Overflow †

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

入力フォームの作成 †

一覧表示の作成 †

参考 †

Qiita †

参考 †

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