【Flutter】extensionでコンポーネントを切り出す

やりたいこと

• UIの描画が肥大化するのが嫌だからコンポーネントに切り出したい

解決策

• extension構文を用いてコードを切り出すことが出来る。

edit_title_view.dart

class EditTitleView extends StatefulWidget {
  const EditTitleView({super.key});
  // 省略
}

extension EditTitleViewComponents on EditTitleViewState {
  Widget customTextField() {
    return TextFormField(
        controller: TextEditingController(text: 'これはTextFormField'),
        onFieldSubmitted: (value){
        // do something
        },
        autovalidateMode: AutovalidateMode.onUserInteraction,
        validator: (value){ 
            if(value == null || value.isEmpty){
                return '値を入力してください'; 
            }
            return null;
        },
    );
}

構文

extension EditTitleViewComponents on EditTitleViewState {

}

// extension {ComponetName} on {BaseView} 

謝辞

• TextFormFieldの中のコードはZennの@heyhey1028さんから拝借いたしました。