How To Remove Underline From Inputfield Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

you can remove the underline by passing null to the decoration. TextField widget has a property decoration which has a sub property border: InputBorder.none.This property would Remove TextField Text Input Bottom Underline in Flutter Android iOS mobile app. The bottom underline shows us how much area in width Text Input is occupying on mobile screen.

How To Remove Underline From Input field Using Flutter App

Remove Underline From Inputfield
Compelete Code For  Remove Underline From Inputfield In Flutter
main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Transform',
      home: new MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textFieldController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('Remove Underline From InputField'),
      ),
      body: Center(
        child: Padding(
          //Add padding around textfield
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius:  BorderRadius.circular(32),
            ),
            child: TextField(
              decoration: InputDecoration(
                hintStyle: TextStyle(fontSize: 15,color: Colors.black45),
                hintText: 'Search your trips',
                suffixIcon: Icon(Icons.search,size: 18,),
                border: InputBorder.none,
                contentPadding: EdgeInsets.all(15),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Related Post