TextFormField 内に文字列がない場合に、ユーザーがログイン ボタンをクリックするとメッセージを表示するサンプル コードを作成しました。TextFormField の下に、ユーザーに電子メールを入力するよう警告するメッセージが表示されます。私ができるようにしたいのは、そのメッセージを別の場所、おそらくログインボタンの下に表示することです。
理想的には、ログインとパスワードのテキスト フィールドがあり、各テキスト フィールドの下にメッセージを表示する代わりに、ログイン ボタンの下にメッセージを表示したいと考えています。どんな助けでも大歓迎です!テキストコントローラーを調べましたが、バリデーターがメッセージなしで合格した場合、ウィジェットを同じ高さに保ちますが、バリデーターがメッセージを表示するのに失敗したときにのみ高さを拡張するように実装する方法がわかりません。
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: TextFieldExample(),
),
),
);
}
}
class TextFieldExample extends StatefulWidget {
@override
_TextFieldExampleState createState() => _TextFieldExampleState();
}
class _TextFieldExampleState extends State<TextFieldExample> {
final _formKey = GlobalKey<FormState>();
String email = '';
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 5),
padding: EdgeInsets.symmetric(horizontal: 15),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(29)),
child: Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
validator: (value) => value.isEmpty ? 'Enter an email' : null,
onChanged: (value) {
setState(() => email = value);
},
decoration:
InputDecoration(icon: Icon(Icons.person), hintText: "Email"),
),
Container(
margin: EdgeInsets.symmetric(vertical: 5),
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: RaisedButton(
padding: EdgeInsets.symmetric(vertical: 10),
onPressed: () async {
if (_formKey.currentState.validate()) {
//sign in;
}
},
child: Text("Login")))),
]),
),
);
}
}