バリデーションエラーの文字の頭にアイコンを表示させたい

実現したいこと

上記の画像のようにバリデートエラーがあったら、エラーメッセージを表示して文字の先頭にIConを表示させたいです。

発生している問題

TextFormFieldのvalidatorはString型しかreturnできないためIconを設定することができません

該当のソースコード

Dart
1/// フォーム用ウィジェット 入力フォーム、ボタン
2class _SignInForm extends StatefulWidget {
3
4  @override
5  State createState() => _SignInFormState();
6}
7
8
9class _SignInFormState extends State<_SignInForm> {
10  TextEditingController _emailTextEditingController = TextEditingController();
11  TextEditingController _passwordTextEditingController = TextEditingController();
12
13  final _formKey = GlobalKey<FormState>();
14
15  @override
16  Widget build(BuildContext context) {
17
18    final TextStyle loginButtonTextStyle = TextStyle(
19      fontFamily: AppTheme.fontName,
20      fontWeight: FontWeight.w700,
21      fontSize: 14.sp,
22      letterSpacing: -0.04,
23      color: AppTheme.white,
24    );
25
26    final TextStyle forgetPasswordInfoTextStyle = TextStyle(
27        fontFamily: AppTheme.fontName,
28        fontWeight: FontWeight.w400,
29        fontSize: 12.sp,
30        color: AppTheme.mainText,
31        decoration: TextDecoration.underline
32    );
33
34    final TextStyle formlabelTextStyle = TextStyle( // Caption -> caption
35      fontFamily: AppTheme.fontName,
36      fontWeight: FontWeight.w400,
37      fontSize: 12.sp,
38      color: AppTheme.mainText
39    );
40    
41    final emailValidator = MultiValidator([
42      RequiredValidator(errorText: 'メールアドレスを入力してください。'),
43      EmailValidator(errorText: 'メールアドレスの形式を正しく入力してください。')
44    ]);
45
46    final passwordValidator = MultiValidator([
47      RequiredValidator(errorText: 'パスワードを入力してください。'),
48      MinLengthValidator(6, errorText: 'パスワードは6文字以上で入力してください。')
49    ]);
50
51    return
52      Form(
53          child: Padding(
54              padding: const EdgeInsets.symmetric(horizontal: 32),
55              child: Column(
56                  crossAxisAlignment: CrossAxisAlignment.start, children: [
57                Text(
58                  'メールアドレス',
59                  style: formlabelTextStyle,
60                ),
61                _CustomTextField(
62                  textEditingController: _emailTextEditingController,
63                  validator: emailValidator,
64                ),
65                SizedBox(height: 20.h),
66                Text(
67                  'パスワード',
68                  style: formlabelTextStyle,
69                ),
70                _CustomTextField(
71                  textEditingController: _passwordTextEditingController,
72                  obscureText: true,
73                  validator: passwordValidator,
74                ),
75                SizedBox(height: 20.h),
76                Align(
77                  alignment: Alignment.center,
78                  child: InkWell(
79                    child: Text(
80                      'パスワードを忘れた方はこちら',
81                      style: forgetPasswordInfoTextStyle,
82                    ),
83                    onTap: () => showModalBottomSheet(
84                        context: context,
85                        isScrollControlled: true,
86                        backgroundColor: Colors.transparent,
87                        builder: (context) => ForgetPasswordModalForm()
88                    )
89                  ),
90                ),
91                SizedBox(height: 20.h),
92                Container(
93                    width: double.infinity,
94                    child: FlatButton(
95                      color: AppTheme.mainText,
96                      padding: EdgeInsets.symmetric(vertical: 16),
97                      shape: RoundedRectangleBorder(
98                        borderRadius: BorderRadius.circular(30),
99                      ),
100                      onPressed: () async {
101                        String email = this._emailTextEditingController.text;
102                        String password = this._passwordTextEditingController.text;
103
104                        final firebaseAuth = context.read(authProvider);
105
106                        return showDialog(
107                          context: context,
108                          child: FutureBuilder<UserCredential>(
109                              future: firebaseAuth.signInWithEmailAndPassword(email: email, password: password),
110                              builder: (context, snapshot) {
111                                // If we`re loading data, Will show the spiner.
112                                if (snapshot.connectionState != ConnectionState.done) {
113                                  return FullScreenLoader();
114                                }
115
116                                //TODO Handle error
117                                if (snapshot.hasError) {
118                                  debugPrint(snapshot.error.toString());
119                                }
120
121                                // Done loading
122                                if (snapshot.hasData) {
123                                  debugPrint('sign in uid ::: ${snapshot.data.user.uid}');
124                                  debugPrint('sign in email ::: ${snapshot.data.user.email}');
125
126                                  // FutureBuilderのbuildが終わったらホームに戻る
127                                  WidgetsBinding.instance.addPostFrameCallback((_) {
128                                    //ホームに戻る
129                                    Navigator.pushAndRemoveUntil(context, MyApp.route(), (route) => true);
130                                  });
131                                }
132                                // ほんとはnullにしたいけどエラーになるのでContainerを返す
133                                return Container();
134                              }),
135                        );
136                      },
137                      child: Text(
138                        'ログイン',
139                        style: loginButtonTextStyle,
140                      ),
141                    )),
142              ]))
143      );
144  }
145}
146
147
148/// 入力フォーム共通化
149class _CustomTextField extends StatefulWidget {
150  TextEditingController textEditingController;
151
152  /// 入力されている文字を隠すかどうか
153  bool obscureText;
154
155  /// バリデート用コールバック関数 エラーがあったらStringをreturnするように実装してくだちい
156  FieldValidator validator;
157
158  _CustomTextField({this.textEditingController, this.obscureText = false, this.validator = null});
159
160
161
162  @override
163  State createState() =>
164      _CustomTextFieldState(textEditingController: this.textEditingController, obscureText: this.obscureText, validator: this.validator);
165}
166
167/// 入力フォームステート
168class _CustomTextFieldState extends State<_CustomTextField> {
169  TextEditingController textEditingController;
170
171  /// 入力されている文字を隠すかどうか
172  bool obscureText;
173
174  /// バリデート用コールバック関数
175  FieldValidator validator;
176
177
178  _CustomTextFieldState({this.textEditingController, this.obscureText, this.validator});
179
180
181  @override
182  Widget build(BuildContext context) {
183    return Container(
184        color: AppTheme.grayLighten50,
185        child: TextFormField(
186          autovalidateMode: AutovalidateMode.onUserInteraction,
187          // ignore: missing_return
188          validator: (value) {
189            var error = validator(value);
190            if (error is String) {
191              return error;
192            }
193          },
194          obscureText: this.obscureText,
195          controller: this.textEditingController,
196          decoration: InputDecoration(
197            // labelText:
198            floatingLabelBehavior: FloatingLabelBehavior.always,
199            filled: true,
200            fillColor: Colors.white,
201            border: OutlineInputBorder(
202              borderRadius: BorderRadius.circular(8),
203              borderSide: BorderSide(color: Color(0xFFEAE8E7)),
204            ),
205            focusedBorder: OutlineInputBorder(
206              borderRadius: BorderRadius.circular(8),
207              borderSide: BorderSide(color: Color(0xFFEAE8E7)),
208            ),
209            enabledBorder: OutlineInputBorder(
210              borderRadius: BorderRadius.circular(8),
211              borderSide: BorderSide(color: Color(0xFFEAE8E7)),
212            ),
213            errorStyle: TextStyle(
214              backgroundColor: AppTheme.grayLighten50,
215              fontFamily: AppTheme.fontName,
216              fontWeight: FontWeight.w400,
217              fontSize: 12.sp,
218              color: Colors.red,
219            ),
220          ),
221        ),
222    );
223  }