我正在尝试使用自定义文本字段

Question

我正在尝试使用customTextField这是包含Widget 的文件

import 'package:flutter/material.dart';
Widget defaultFormField({
required TextEditingController controller,
required TextInputType type,
required Function validate,
Function? onSubmitted,
Function? onChange,
Function? onTap,
required String label,
required IconData prefix,
}) =>
Form(
child: TextFormField(
controller: controller,
validator: (value) => validate(value),
// validator: validate(),
onFieldSubmitted: onSubmitted!(),
onChanged: onChange!(),
onTap: onTap!(),
keyboardType: type,
decoration: InputDecoration(
labelText:label,
prefixIcon: Icon(prefix),
border: const OutlineInputBorder(),
),
),
);

我这样称呼它在我的主页

@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
backgroundColor: Colors.red,
title: Text(titles[currentIndex]),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.redAccent,
onPressed: () {
if (isBottomSheet) {
Navigator.pop(context);
isBottomSheet = false;
setState(() {
fabIcon = Icons.edit;
});
} else {
scaffoldKey.currentState?.showBottomSheet(
(context) => Column(mainAxisSize: MainAxisSize.min, children: [
Form(
key: formdKey,
child: defaultFormField(
controller: titleController,
type: TextInputType.text,
validate: (String value) {
if (value.isEmpty) {
return 'title must not be empty';
}
return null;
},
label: 'Title Task',
prefix: Icons.title),
),
]));
isBottomSheet = true;
setState(() {
fabIcon = Icons.add_task;
});
}
},
child: Icon(fabIcon),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black54,
backgroundColor: Colors.red,
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
onTap: (value) {
setState(() {
currentIndex = value;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.new_label), label: 'Tasks'),
BottomNavigationBarItem(
icon: Icon(Icons.check_circle), label: 'Done'),
BottomNavigationBarItem(
icon: Icon(Icons.archive), label: 'Archive'),
]),
body: screens[currentIndex],
);
}

Answer 1

您必须使用一个类而不是该代码，您的代码是错误的。这是我的一个自定义TextFormField。这包含自己的另一个类，但无论如何你都可以使用它：

import 'package:flutter/material.dart';
import 'package:plasco/config/textfield_validator.dart';
import 'package:plasco/utils/colors.dart';
class PlascoTextFormFild extends StatefulWidget {
final String? text;
final FontWeight? fontWeight;
final double? fontSize;
final double? counterFontSize;
final TextAlign? textAlign;
final TextInputType? keyboardType;
final int? maxLength;
final String? hint;
final int? maxLines;
final Color? color;
final TextEditingController? controller;
final bool? enabled;
final Validator? validator;
final bool publicValidator;
const PlascoTextFormFild(
{Key? key,
this.text,
this.fontWeight,
this.publicValidator = false,
this.fontSize,
this.color = Colors.transparent,
this.counterFontSize,
required this.textAlign,
this.keyboardType,
this.maxLength = 800,
this.hint,
this.maxLines,
this.controller,
this.enabled = true,
this.validator})
: super(key: key);
@override
_PlascoTextFormFildState createState() => _PlascoTextFormFildState();
}
class _PlascoTextFormFildState extends State<PlascoTextFormFild> {
bool _focused = false;
bool _hasError = false;
String _error = '';
late FocusNode? _keyboardFocus;
@override
void initState() {
_keyboardFocus = FocusNode();
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
_keyboardFocus!.addListener(() {
setState(() {
if (!_keyboardFocus!.hasPrimaryFocus) {
_focused = false;
}
});
});
return Directionality(
textDirection: TextDirection.rtl,
child: Container(
decoration: BoxDecoration(
color: widget.color,
borderRadius: BorderRadius.circular(5),
),
child: TextFormField(
controller: widget.controller,
enabled: widget.enabled,
cursorHeight: 20,
textDirection: TextDirection.rtl,
focusNode: _keyboardFocus,
maxLines: widget.maxLines,
maxLength: widget.maxLength,
textAlign: widget.textAlign!,
keyboardType: widget.keyboardType,
validator: (text) {
if (widget.validator == null) {
if (widget.publicValidator) {
var a = PublicValidator(text!, widget.text!);
if (a) {
return "";
} else {
return null;
}
} else {
return null;
}
} else {
if (widget.validator!.hasError(text!)) {
setState(() => _hasError = true);
_error = widget.validator!.getError();
return '';
} else {
setState(() => _hasError = false);
return null;
}
}
},
style: TextStyle(
color: PlascoColor.Black1,
fontFamily: 'IRANSansMobile',
fontSize: widget.fontSize,
letterSpacing: 0,
fontWeight: widget.fontWeight,
height: widget.maxLines != null ? 2 : 1),
decoration: InputDecoration(
counterText: "",
labelStyle: TextStyle(
color: _hasError
? PlascoColor.Red1
: _focused
? PlascoColor.Yellow1
: PlascoColor.Gray1,
fontFamily: 'IRANSansMobile',
fontSize: widget.fontSize,
letterSpacing: 0,
fontWeight: widget.fontWeight,
height: 1,
),
hintStyle: TextStyle(
color: PlascoColor.Gray2,
fontFamily: 'IRANSansMobile',
fontSize: widget.fontSize,
letterSpacing:
0 /*percentages not used in flutter. defaulting to zero*/,
fontWeight: widget.fontWeight,
height: 1),
counterStyle: TextStyle(
color: PlascoColor.Gray1,
fontFamily: 'IRANSansMobile',
fontSize: widget.counterFontSize,
letterSpacing: 0,
fontWeight: widget.fontWeight,
height: 1),
floatingLabelBehavior: FloatingLabelBehavior.always,
// border: OutlineInputBorder(),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(
color: PlascoColor.Gray2,
width: 1.0,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(
color: PlascoColor.Gray2,
width: 1.0,
)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(
color: PlascoColor.Yellow1,
width: 1.0,
)),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(
color: PlascoColor.Red1,
width: 1.0,
)),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: const BorderSide(
color: PlascoColor.Red1,
width: 1.0,
)),
labelText: _hasError ? _error : widget.text,
hintText: widget.hint,
contentPadding: EdgeInsets.fromLTRB(8, 8, 8, 8),
),
// autofocus: false,
),
),
);
}
}