Complete BLoC with Clean Architecture (group chat) Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Online Learning Course App (Riverpod) Online Learning Course App (Getx) Discount !! Shopping App (Provider) Cool Flutter Game Nodejs Flutter Complete App
Flutter Custom TextField includes features like focus node, next node, onTap function,
void main() async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final TextEditingController _addressController = TextEditingController();
final TextEditingController _contactPersonNameController = TextEditingController();
final TextEditingController _contactPersonNumberController = TextEditingController();
final FocusNode _addressNode = FocusNode();
final FocusNode _nameNode = FocusNode();
final FocusNode _numberNode = FocusNode();
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.blue,
fontFamily: "Lato",
),
home: Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
MyTextField(
hintText: 'Delivery address',
inputType: TextInputType.streetAddress,
focusNode: _addressNode,
nextFocus: _nameNode,
controller: _addressController,
),
MyTextField(
hintText: 'Person name',
inputType: TextInputType.name,
focusNode: _nameNode,
nextFocus: _numberNode,
controller: _contactPersonNameController,
)
],
),
),
),
);
}
}
final robotoRegular = TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
fontSize: 15,
);
class MyTextField extends StatefulWidget {
final String hintText;
final TextEditingController controller;
final FocusNode focusNode;
final FocusNode nextFocus;
final TextInputType inputType;
final TextInputAction inputAction;
final int maxLines;
final bool isPassword;
final VoidCallback? onTap;
final VoidCallback? onChanged;
final VoidCallback? onSubmit;
final bool isEnabled;
final TextCapitalization capitalization;
final Color? fillColor;
final bool autoFocus;
final GlobalKey<FormFieldState<String>>? key;
MyTextField(
{this.hintText = '',
required this.controller,
required this.focusNode,
required this.nextFocus,
this.isEnabled = true,
this.inputType = TextInputType.text,
this.inputAction = TextInputAction.next,
this.maxLines = 1,
this.onSubmit,
this.onChanged,
this.capitalization = TextCapitalization.none,
this.onTap,
this.fillColor,
this.isPassword = false,
this.autoFocus = false,
this.key});
@override
_MyTextFieldState createState() => _MyTextFieldState();
}
class _MyTextFieldState extends State<MyTextField> {
bool _obscureText = true;
@override
Widget build(BuildContext context) {
return TextField(
key: widget.key,
maxLines: widget.maxLines,
controller: widget.controller,
focusNode: widget.focusNode,
style: robotoRegular,
textInputAction: widget.inputAction,
keyboardType: widget.inputType,
cursorColor: Theme.of(context).primaryColor,
textCapitalization: widget.capitalization,
enabled: widget.isEnabled,
autofocus: widget.autoFocus,
//onChanged: widget.isSearch ? widget.languageProvider.searchLanguage : null,
obscureText: widget.isPassword ? _obscureText : false,
// inputFormatters: widget.inputType == TextInputType.phone ? <TextInputFormatter>[FilteringTextInputFormatter.allow(RegExp('[0-9+]'))] : null,
decoration: InputDecoration(
hintText: widget.hintText,
isDense: true,
filled: true,
fillColor: widget.fillColor != null ? widget.fillColor : Theme.of(context).cardColor,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
hintStyle: robotoRegular.copyWith(color: Theme.of(context).hintColor),
suffixIcon: widget.isPassword ? IconButton(
icon: Icon(_obscureText ? Icons.visibility_off : Icons.visibility, color: Theme.of(context).hintColor.withOpacity(0.3)),
onPressed: _toggle,
) : null,
),
onTap: widget.onTap,
onSubmitted: (text) => widget.nextFocus != null ? FocusScope.of(context).requestFocus(widget.nextFocus)
: widget.onSubmit != null ? widget.onSubmit! : null,
// onChanged: widget.onChanged,
);
}
void _toggle() {
setState(() {
_obscureText = !_obscureText;
});
}
}