TextFormField のテンプレート作ってみた。

公式のパラメータで使いそうなやつをまとめただけ
めっちゃコメント書いたから説明なしで。
こうすると GrobalKey を使うとき面倒なんだよなぁ。。。

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

class TFFtemplate extends ConsumerStatefulWidget {
  const TFFtemplate({Key? key}) : super(key: key);

  @override
  TFFtemplateState createState() => TFFtemplateState();
}

class TFFtemplateState extends ConsumerState<TFFtemplate> {

  @override
  Widget build(BuildContext context) {

// parameter : ファイルを複製してべた書きでもOK
// -----------------------------------------------------------------------------
  // key   : 操作のためのキー（これだけProvider？）
    // 以下のように使う
    // これとほかにボタンを設置
    // onPressed に _key.currentState.save() とかく
    // これでボタンを押したときに onSave の内容が実施される
    // これ使わずに Riverpod に任せたほうが楽かも
    final _key = GlobalKey<FormState>();

    String _label        = "hahhahha----";     // form label
    String _placeholder  = "hah----";          // placeholder
  
// ここは固定値でOK
// -----------------------------------------------------------------------------
    // 通常時の枠線
    OutlineInputBorder _borderLine( String when ) {

      Color color = Colors.grey;
    
      if      ( when == "normal" ) { color = Colors.grey; }
      else if ( when == "error"  ) { color = Colors.red; }
    
      return OutlineInputBorder(
          borderSide: BorderSide(
            color: color,
            width: 1,
            style: BorderStyle.solid,
            ),
          borderRadius: const BorderRadius.all(
            Radius.circular(10)
          )
        );
    }

// main
// -----------------------------------------------------------------------------
    return  TextFormField(

    // key
      key: _key,

    // 検証モード
      // AutovalidateMode.disable           : 検証しない
      // AutovalidateMode.always            : 常に検証
      // AutovalidateMode.onUserInteraction : 行動を起こしたときに検証
      autovalidateMode: AutovalidateMode.always,

    // 検証内容
      validator:(value) {

        if      ( value == "" || value!.isEmpty ) { return null; }
        else if ( 20 < value.length )             { return "20文字以内で入力してください"; }

        return null;
      },

    // controller ??
      //controller: ,

    // 入力を許可するか？
      // true or false
      enabled: true,

    // 初期値( String? )
      initialValue: null,
    
    // 入力内容を隠すか（パスワード用）？ 
      obscureText: true,

    // 保存時の処理
      onSaved:(newValue) {
        debugPrint( newValue );
      },

    // 変更したときの処理
      onChanged: (value) {
        debugPrint( value );
      },

    // 装飾
      decoration: InputDecoration(

      // ラベル関係
        labelText : _label,
        labelStyle: TextStyle(),

      // プレースホルダー
        hintText: _placeholder,

      // 枠線
        // 通常時
        border      : _borderLine( "normal" ),
        // エラー時
        errorBorder : _borderLine( "error" ),

      ),

    );
  }
}