9.4 C
New York
Saturday, December 2, 2023

How to make rounded corners TextField in Flutter

The following examples show you how to make rounded-corners text fields in Flutter.

Using OutlineInputBorder borderRadius

You can create a rounded TextField by setting the borderRadius property of the OutlineInputBorder class to BorderRadius.circular(double radius), like this:Advertisements

TextField(
            decoration: InputDecoration(
                hintText: 'KindaCode.com',
                contentPadding: const EdgeInsets.all(15),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30))),
            onChanged: (value) {
              // do something
            },
),

Screenshot:

The full source code:

// main.dart
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,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30),
        child: Center(
          child: TextField(
            decoration: InputDecoration(
                hintText: 'KindaCode.com',
                contentPadding: const EdgeInsets.all(15),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30))),
            onChanged: (value) {
              // do something
            },
          ),
        ),
      ),
    );
  }
}

Wrap TextField inside a Container

Our strategy is to remove TextField’s border and wrap it inside a Container with circular BorderRadius (this Container itself should be wrapped by a Center widget or another Container with alignment property). The advantage of this approach is that you can easily adjust the width and height of the TextFiled by setting the width and height of the parent Container.

Screenshots:

Single-line rounded TextField

Center(
        child: Container(
          width: 300,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                  width: 1, color: Colors.purple, style: BorderStyle.solid)),
          child: TextField(
            decoration: const InputDecoration(
                hintText: 'Type someting here',
                contentPadding: EdgeInsets.all(15),
                border: InputBorder.none),
            onChanged: (value) {
              // Do something
            },
          ),
        ),
      ),

Multi-line rounded TextField

Center(
        child: Container(
          width: 300,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                  width: 1, color: Colors.purple, style: BorderStyle.solid)),
          child: TextField(
            minLines: 10,
            maxLines: 20,
            decoration: const InputDecoration(
                hintText: 'Type someting here',
                contentPadding: EdgeInsets.all(15),
                border: InputBorder.none),
            onChanged: (value) {},
          ),
        ),
      ),

Afterword

You’ve learned more than one technique to implement rounded corners TextFields in Flutter. This knowledge will be helpful when you want to build more attractive user interfaces. If you’d like to explore more new and exciting things in Flutter, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Advertisements

Related Articles

Latest Articles