Flutter textformfield remove underline. In this article, I will be implementing Flutter textformfield remove underline in Flutter textformfield. Let’s make it very simple for you to understand how Flutter textformfield remove underline is implemented using step by step explanation. Let’s not waste anymore of your time and start implementing Flutter textformfield remove underline in Flutter textformfield using proper Flutter code example.
What is Flutter Textformfield Remove Underline?
If you want to understand how Flutter textformfield remove underline is implemented then first you have to understand what Flutter textformfield underline is. This underline is actually a default underline border. Now let’s use proper code to remove that underline border from Flutter textformfield.
Default Flutter Textformfield Underline Border
Let’s see what the default Flutter textformfield underline border looks like. See the below code:
TextFormField()
Implementing Flutter Textformfield Remove Underline
To implement Flutter textformfield remove underline, we have to use the decoration constructor of the Flutter textformfield and then we have to pass the input decoration class. Using the border constructor of the input decoration class, we can now implement Flutter textformfield remove underline using the input border none, see the below code:
TextFormField(
decoration: InputDecoration(
border: InputBorder.none),
)
Beautiful Flutter Textformfield Design Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: TextFormField(
style: TextStyle(color: Colors.grey),
cursorColor: Colors.purple,
decoration: InputDecoration(
filled: true,
fillColor: Colors.blue.withOpacity(.1),
hintText: 'This is hint text',
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(
Icons.person,
color: Colors.grey,
),
suffixIcon: Icon(
Icons.edit,
color: Colors.grey,
),
border: InputBorder.none,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(30)
.copyWith(topRight: Radius.circular(0))),
contentPadding: EdgeInsets.all(26),
)))),
));
}
}Conclusion
In conclusion, now you have a detailed practical understanding of how Flutter textformfield is implemented. I would love to have your feedback on this post. I would also encourage you to visit my other articles on Flutter app development, Flutter widgets explanations, beautiful Flutter templates, amazing Flutter animations and many more, links to some of these articles are listed below. Thank you for reading.
