TextField widget comes with decoration prop method. The decoration method is used to show decoration around TextField widget. The decoration method has borderRadius: BorderRadius.all(Radius.circular(double)) method with Radius parameter which enables the rounded corner radius border on Text Input widget. So in this tutorial we would Add Set Rounded Corner Border Around TextField Text Input in Flutter Android iOS App.
Contents in this project Set Rounded Corner Border Around TextField Text Input in Flutter Android iOS App:
1. Import material.dart package in your main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Widget build area in MyApp class and make Scaffold widget -> SafeArea widget -> Center widget.
|
1 2 3 4 5 6 7 8 9 10 11 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child : Center( ) ) ) ); } |
5. Create Container widget in Center widget. We would put TextField widget in Container widget because TextField widget directly dose not support width.
|
1 2 3 4 5 6 |
Container( width: 320, padding: EdgeInsets.all(10.0), child: ) |
6. Creating TextField widget in Container widget.
- autocorrect : Enables autocorrection.
- decoration : To set decoration around TextField widget.
- hintText : To set hint text.
- hintStyle : To set hint text style.
- fillColor : To set filled color inside TextField widget.
- borderRadius : Used to set border rounded radius.
- borderSide : Used to set border color and width.
- focusedBorder : Used to set border radius and color on TextField focus event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Type Text Here...', hintStyle: TextStyle(color: Colors.grey), filled: true, fillColor: Colors.white70, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(12.0)), borderSide: BorderSide(color: Colors.red, width: 2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.red), ), ),) |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child : Center( child : Container( width: 320, padding: EdgeInsets.all(10.0), child: TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Type Text Here...', hintStyle: TextStyle(color: Colors.grey), filled: true, fillColor: Colors.white70, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(12.0)), borderSide: BorderSide(color: Colors.red, width: 2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), borderSide: BorderSide(color: Colors.red), ), ),) )) ) ), ); } } |
Screenshots:
