【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part96 Input

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part96 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part95 Input

引き続き、Inputについて学びます。

Input

Form, FormFieldウィジェット

enabledBorder, disabledBorder, forcusedBorder, errorBorderプロパティ

ウィジェットの状態によってボーダーの色などを切り替えることができるようです。

  • enabledBorder・・・通常時(なにもしていないときの)のボーダーの装飾です。
  • disabledBorder・・・無効時(入力不可の時)のボーダーの装飾です。
  • focusedBorder・・・フォーカスが当たっているときのボーダーの装飾です。
  • errorBorder・・・エラーが発生しているときのボーダーの装飾です。

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'formsamplepage.dart';

void main() {
  // runApp(new MaterialApp(home: new MyApp()));
  runApp(new MaterialApp(home: new FormSamplePage()));
}

formsamplepage.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class FormSamplePage extends StatelessWidget {
  // これが必ず必要
  final _formKey = GlobalKey<FormState>();

  Widget _txt = TextFormField();
  FormSamplePage() {
    this._txt = getText(enable: true);
  }

  Widget getText({bool enable = true}) {
    return TextFormField(
      enabled: enable,
      decoration: const InputDecoration(
        // 通常時のボーダーです。
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Colors.green,
          ),
        ),

        // 無効時のボーダーです。
        disabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Colors.blueGrey,
          ),
        ),

        // フォーカス時のボーダーです。
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Colors.lightBlue,
          ),
        ),

        // フォーカス時のボーダーです。
        errorBorder: UnderlineInputBorder(
          borderSide: BorderSide(
            color: Colors.red,
          ),
        ),
        // border: OutlineInputBorder(),
        filled: true,
        icon: Icon(Icons.person),
        hintText: '名前を入力してください',
        labelText: '名前',
        prefixIcon: Icon(Icons.local_post_office, color: Colors.green),
        suffixIcon: Icon(Icons.accessibility_new_rounded, color: Colors.blue),
      ),
      validator: (value) {
        if (value!.isEmpty) {
          return '必須です。';
        }
        return null;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: const Text('テスト中!')),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              _txt,
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 16.0),
                // RaiseButtonは非推奨になりました。ElevatedButtonを使います。
                child: ElevatedButton(
                  child: const Text('Submit'),
                  onPressed: () {
                    // ここでvalidateを呼ぶ
                    if (_formKey.currentState!.validate()) {
                      // Scaffold.ofのshowSnackBarは非推奨となったようです。
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('Processing Data'),
                        ),
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

 

 

何もしていない状態だと緑の下線ですね。

フォーカスを当てると青の下線になりましたね。(人のアイコンまで青に!?)

エラーの場合は赤の下線になります。ラベルも赤に・・・デフォルトの動きだと思います。

無効にしてみます。

“`

FormSamplePage() {
this._txt = getText(enable: false);
}

“`

分かりにくいですが灰色(青灰色)になっています。

最後に

とても細やか!

今日はここまで!

参考

Flutterでテキストフィールドを囲う色を変える – Qiita

dart — flutterのテキスト編集フィールドを無効にする (uebu-kaihatsu.jp.net)

【Dart】【Flutter】関数の引数に初期値を与える|Flutterラボ|note