我有一个CustomTextFormField,它是TextFormField的 Package 器,如下所示:
import 'package:flutter/material. dart';
class CustomTextFormField extends StatelessWidget {
final TextEditingController controller;
final String hintText;
final String label;
final bool obscureText;
final FormFieldValidator<String>? validator;
final ValueChanged<String>? onChanged;
const CustomTextFormField({
Key? key,
required this.controller,
required this.hintText,
this.obscureText = false,
required this.label,
this.validator,
this.onChanged,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
controller: controller,
obscureText: obscureText,
validator: validator,
onChanged: onChanged,
decoration: InputDecoration(
filled: true,
fillColor: Theme.of(context).colorScheme.surfaceVariant,
contentPadding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
labelText: label,
labelStyle: Theme.of(context).textTheme.labelSmall,
hintText: hintText,
hintStyle: Theme.of(context).textTheme.labelMedium,
border: OutlineInputBorder(
borderSide: BorderSide(width: 0.50, color: Theme.of(context).colorScheme.primary),
gapPadding: 0,
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
),
),
);
}
}
字符串
这在我的用户配置文件屏幕中使用如下:
class UserProfileScreen extends GetView<UserController> {
UserProfileScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
final _usernameFormKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('User Profile'),
),
drawer: CustomDrawer(),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Obx(() {
UserModel user = controller.user.value!;
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
const CircleAvatar(
radius: 50,
backgroundColor: Colors.grey,
child: Icon(
Icons.person,
size: 50,
),
),
const SizedBox(height: 20.0),
Text(
user.username,
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10.0),
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text('New Username'),
content: Form(
key: _usernameFormKey,
child: CustomTextFormField(
controller: controller.usernameController,
label: 'Username',
hintText: 'Enter your username',
onChanged: (value) {
user = user.copyWith(username: value);
controller.user.value = user;
},
validator: FormValidators.validateUsername,
),
),
actions: [
TextButton(
child: const Text('Cancel'),
onPressed: () => Navigator.of(context).pop(),
),
TextButton(
child: const Text('Save'),
onPressed: () {
if (_usernameFormKey.currentState!.validate()) {
controller.updateUser(user);
Navigator.of(context).pop();
}
},
),
],
),
);
},
child: const Text("Change Username"),
),
型
[...]
当TextFormField中没有文本时,错误消息会正确显示,但当用户开始键入时,错误消息会被垂直修剪。请参阅随附的屏幕截图以清楚。[
编辑:我的应用主题:
import 'package:flutter/material.dart';
import 'package:mastermind_together/src/ui/theme/color_scheme.dart';
import 'package:mastermind_together/src/ui/theme/text_styles.dart';
class AppTheme {
AppTheme._();
static ThemeData lightTheme = ThemeData(
colorScheme: lightThemeColors,
useMaterial3: true,
textTheme: textTheme,
buttonTheme: ButtonThemeData(
buttonColor: lightThemeColors.primary,
textTheme: ButtonTextTheme.primary,
),
canvasColor: lightThemeColors.surface,
);
static TextTheme textTheme = const TextTheme(
displayLarge: h1,
displayMedium: h2,
bodyLarge: bodyMedium,
bodyMedium: body,
bodySmall: labelSmall,
labelLarge: btnText,
labelMedium: placeholderBodyMedium,
labelSmall: labelText,
headlineMedium: h3,
titleMedium: bodyMedium,
);
}
import 'package:flutter/material.dart';
import 'package:mastermind_together/src/ui/theme/color_scheme.dart';
const String fontFamily = 'Inter';
const Color textColor = darkerPrimaryColor;
const Color textPlaceholderColor = placeholderColor;
const Color btnTextColor = Colors.white; //TODO move to color_scheme
const Color linkColor = Colors.blue;
const TextStyle h1 = TextStyle(
color: textColor,
fontSize: 64,
fontFamily: fontFamily,
fontWeight: FontWeight.w700,
);
const TextStyle h2 = TextStyle(
color: textColor,
fontSize: 42,
fontFamily: fontFamily,
fontWeight: FontWeight.w400,
);
const TextStyle h3 = TextStyle(
color: textColor,
fontSize: 26,
fontFamily: fontFamily,
fontWeight: FontWeight.w700,
);
const TextStyle body = TextStyle(
color: textColor,
fontSize: 16,
fontFamily: fontFamily,
fontWeight: FontWeight.w400,
);
const TextStyle bodyMediumLink = TextStyle(
color: textColor,
fontSize: 16,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
decoration: TextDecoration.underline,
);
const TextStyle linkStyle = TextStyle(
color: linkColor,
fontSize: 16,
fontFamily: fontFamily,
fontWeight: FontWeight.w700,
decoration: TextDecoration.underline,
);
const TextStyle bodyMedium = TextStyle(
color: textColor,
fontSize: 16,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
);
const TextStyle placeholderBodyMedium = TextStyle(
color: textPlaceholderColor,
fontSize: 16,
fontFamily: fontFamily,
fontWeight: FontWeight.w400,
height: 1.6,
);
const TextStyle labelText = TextStyle(
color: textColor,
fontSize: 14,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
// height: 2.0,
);
const TextStyle cardTitle = TextStyle(
color: textColor,
fontSize: 26,
fontFamily: fontFamily,
fontWeight: FontWeight.w600,
);
const TextStyle labelSmall = TextStyle(
color: textColor,
fontSize: 10,
fontFamily: fontFamily,
fontWeight: FontWeight.w400,
height: 0.4,
);
const TextStyle btnText = TextStyle(
color: btnTextColor,
fontSize: 16,
fontFamily: fontFamily,
fontWeight: FontWeight.w700,
);
型
3条答案
按热度按时间31moq8wy1#
检查您的应用程序的主题是否导致了这种情况。当我测试你的初始弹出对话框时,我没有遇到你描述的问题。尝试注解掉设置MaterialApp的主题设置,看看问题是否消失。如果它确实仔细查看您的主题,看看是什么导致了问题。
nbysray52#
您可以在一列中将TextField Package 在CustomTextFormField中,并在textfield下面添加文本小部件,而不是使用TextField的内置错误字段。这样你就可以轻松地控制错误小部件。
5cnsuln73#
看起来你的文本被剪切了,但是对话框的填充,试着调整内容填充和插入填充