How to Add Borders to TextField in Flutter

Every Flutter developer knows the importance of the TextField widget. Having borders around TextField can make the component significant. In this tutorial, let’s learn how to set borders for TextField in Flutter.

By default, TextField doesn’t have any borders. You can style TextField using InputDecoration class. The OutlineInputBorder class helps you to add borders around the TextInput easily. See the code snippet given below.

TextField(
         decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter your name',
              ),)

Following is the complete example of Flutter TextField with custom rounded border.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextField Border Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextInput with Border'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                ),
                hintText: 'Enter your name',
              ),
              controller: myController,
            ),
          ),
        ));
  }
}

Following is the output of the above example.

Flutter TextField border example

See how to change TextField border color here.

That’s how you add borders to TextField widget. I hope this tutorial is helpful for you.

Leave a Comment

Your email address will not be published. Required fields are marked *