.......................................................................................................................................................................................................................................
Example : #1 [ TextField ]
Example : #1 [ TextField ]
Introduction to TextField
A TextField widget allows collection of information from the user. The code for a basic TextField is as simple as
1. TextField()
2. Working with autofocus
TextField(
autofocus: true,
),
3 . Keyboard Type
TextField(
keyboardType: TextInputType.number,
),
TextInputType.text (Normal complete keyboard)
TextInputType.emailAddress (Normal keyboard with an “@”)
4. TextInputAction
TextField(
textInputAction: TextInputAction.continueAction,
),
TextField(
textInputAction: TextInputAction.send,
),
5. Autocorrect
TextField(
autocorrect: false,
),
6. Text Capitalization
TextField(
textCapitalization: TextCapitalization.sentences,
),
TextCapitalization.words
TextCapitalization.characters
TextCapitalization.sentences
7. Text alignment inside the TextField
TextField(
textAlign: TextAlign.center,
),
8. Styling the text inside the TextField
TextField(
style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
),
9. Changing the cursor in the TextField
TextField(
cursorColor: Colors.red,
cursorRadius: Radius.circular(16.0),
cursorWidth: 16.0,
),
10. Controlling the Size and Maximum Length in a TextField
TextField(
maxLength: 4,
),
11. Making an expandable TextField
TextField(
maxLines: 3,
)
12. Obscuring Text
TextField(
obscureText: true,
),
13. Adjust the Styles
style: TextStyle(height: 2.0), //increases the height of cursor
14. Increase the width of the Cursor:
TextField(
cursorWidth: 5.0,
),
15. Add Decorations
decoration: InputDecoration(
hintText: "Hint text sample",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(
color: Colors.amber,
style: BorderStyle.solid,
),
),
),
16. Enable or disable the TextField:
enabled:true, //dafult, makes the textfield interactive
enabled:false, //make the textfield non editable
17. Make the cursor invisible: We can make the cursor invisible with showCursor:
showCursor: false,
18. toolbarOptions:
Adds or removes toolbar options such as cut, copy, paste, selectAll.
toolbarOptions: ToolbarOptions(
cut: true,
copy: false,
selectAll: true,
paste: false,
),
.......................................................................................................................................................................................................................................
Example : #2
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
String _username, _email, _password = "";
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(30),
child: Column(
children: [
UserInput(),
EmailInput(),
PasswordInput(),
SubmitButton()
],
),
);
}
}
Widget UserInput() {
return TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(labelText: 'Enter Email'),
textInputAction: TextInputAction.next,
);
}
Widget EmailInput() {
return TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(labelText: 'Enter Username'),
textInputAction: TextInputAction.next,
);
}
Widget PasswordInput() {
return TextFormField(
obscureText: true,
keyboardType: TextInputType.text,
decoration: InputDecoration(labelText: 'Enter Password'),
textInputAction: TextInputAction.done,
);
}
RaisedButton SubmitButton() {
return RaisedButton(
onPressed: () {},
child: Text('Submit'),
);
}
.......................................................................................................................................................................................................................................
Example : #3 [ Validation ]
Example : #3 [ Validation ]
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
GlobalKey<FormState> formKey = GlobalKey<FormState>();
void validate() {
if (formKey.currentState.validate()) {
print('Successfull');
} else {
print('Error');
}
}
String emailvalidate(value) {
if (value.isEmpty) {
return 'Enter Email Address';
} else {
return null;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Validatetor'),
),
body: Padding(
padding: EdgeInsets.all(30.0),
child: Center(
child: Form(
key: formKey,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Enter Email',
border: OutlineInputBorder(),
),
validator: emailvalidate,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: RaisedButton(
child: Text('Login'),
onPressed: validate,
),
)
],
)),
),
),
);
}
}
.......................................................................................................................................................................................................................................
Example : #4
Example : #4
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Forms',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Forms'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextStyle textstyle =
TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
final InputDecoration decoration = InputDecoration(
border: OutlineInputBorder(),
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(30.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FlutterLogo(
size: 190,
),
SizedBox(
height: 15,
),
TextFormField(
decoration: decoration,
),
SizedBox(
height: 15,
),
TextFormField(
decoration: decoration,
),
SizedBox(
height: 15,
),
MaterialButton(
onPressed: (){},
color: Colors.red,
minWidth: 160,
child: Text(
'Google',
style: textstyle,
),
),
MaterialButton(
onPressed: (){},
color: Colors.blue,
minWidth: 160,
child: Text(
'Facebook',
style: textstyle,
),
),
MaterialButton(
onPressed: (){},
color: Colors.orange,
minWidth: 160,
child: Text(
'E-mail',
style: textstyle,
),
),
],
),
),
),
),
);
}
}
Happy Coding :)
.......................................................................................................................................................................................................................................
Example : #4
Example : #4
No comments:
Post a Comment