Introduction to widgets
Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state more info.
Create a Widget in below
Widget txtBox1() {
return Center(
child: Container(
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 3),
alignment: Alignment.center,
height: MediaQuery.of(context).size.height / 15,
width: MediaQuery.of(context).size.width / 10,
child: TextFormField(
autofocus: true,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
controller: AllControllers.teOtpDigitOne,
textInputAction: TextInputAction.next,
onChanged: (_) => FocusScope.of(context).nextFocus(),
maxLength: 1,
decoration: InputDecoration(
errorStyle: TextStyle(height: 0),
counterText: '',
contentPadding: const EdgeInsets.all(5)),
validator: (value) {
if (value == null || value.isEmpty) {
Fluttertoast.showToast(
msg: "Please Enter OTP",
toastLength: Toast.LENGTH_LONG,
gravity: ToastGravity.TOP,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 13.0);
return '';
}
return null;
},
),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.white,
width: 3.0,
),
top: BorderSide(
color: Colors.white,
width: 3.0,
),
),
),
),
);
}
How to access the widget
Access to this Widget in Widget builds under the BuildContext context area. the user creates one or more widgets function on this page. In this widget access the under children widget.
First method
var txtBox = Padding(
padding: EdgeInsets.only(left: 50.0, right: 50.0),
child: Row(
children: <Widget>[
txtBox1(),
txtBox2(),
//...any many more
//...
],
));Second method
the second method is shown on the main body under the children’s widget.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor:WidgetColors.dateColor,
title: Text('widget screen'),
),
backgroundColor: Colors.white,
body: Form(
child: Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
txtBox1(),
txtBox2(),
//and many more widget
],
),
),
),
),
);
}In this article, we discussed the most valuable part of the flutter development widget and separated the container, and bind the widget view with children and direct access to the screen, to make our development life easier In future parts, I will share some important code of widget related to make your Flutter Development journey a bit faster and many tips related to Flutter and Dart.
I hope it was a helpful article, please share and subscribe to my channel, You have enjoyed the most. Thanks for reading and if you have any questions or comments, See you soon.
