'How to hide one side of the border of a TextField, in Flutter?

I am using the TextField widget, and I want to hide the left side border, as shown here:

TextField(
  decoration: new InputDecoration(
      border: new OutlineInputBorder(
          borderSide: const BorderSide(width: 2.0, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(50.0)),
      focusedBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.grey, width: 2.0),
        borderRadius: BorderRadius.circular(50.0),
      ),
      hintText: 'User Name',
      hintStyle: new TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
      suffixIcon: const Icon(Icons.person, size: 30.0, color: Colors.grey),
      errorText: snapshot.error),
);

Thanks in advance!

Solution 1:^[1]

borderRadius can be specified only for uniform borders, that is, borders that have the same width and color for each side.

You can achieve a similar effect, by wrapping the TextField into a Container and making use of the BoxShadow property:

Follows a full snippet of the screenshotted example:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          decoration: BoxDecoration(
            //borderRadius: BorderRadius.circular(10),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                offset: Offset(2, 0),
                color: Colors.grey,
                spreadRadius: 0,
                blurRadius: 2,
              ),
            ],
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
          child: TextField(
            textAlign: TextAlign.center,
            decoration: new InputDecoration(
              border: InputBorder.none,
              hintText: 'User Name',
              hintStyle: new TextStyle(
                  color: Colors.grey, fontWeight: FontWeight.bold),
              suffixIcon: const Icon(
                Icons.person,
                size: 30.0,
                color: Colors.grey,
              ),
            ),
          ),
        ),
      ),
    );
    //
  }
}

A second, hackier, work-around, would be to use a Stack and a Container positioned to the far left to hide the left border. Although, in this case, it might be difficult to use a Colors.transparent background.

Follows the full snippet:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          height: 50,
          child: Stack(
            overflow: Overflow.visible,
            children: [
              TextField(
                textAlign: TextAlign.center,
                decoration: new InputDecoration(
                  border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey, width: 1),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  hintText: 'User Name',
                  hintStyle: new TextStyle(
                      color: Colors.grey, fontWeight: FontWeight.bold),
                  suffixIcon: const Icon(
                    Icons.person,
                    size: 30.0,
                    color: Colors.grey,
                  ),
                ),
              ),
              Positioned(
                left: 0,
                bottom: 0,
                child: Container(
                  width: 20,
                  height: 50,
                  color: Theme.of(context).scaffoldBackgroundColor,
                ),
              ),
            ],
          ),
        ),
      ),
    );
    //
  }
}

Solution 2:^[2]

You can change your BoxDecoration

decoration: BoxDecoration(
   border: Border(
    left: BorderSide(width: 16.0, color: Colors.transparent),
    top: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
    right: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
    bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
),

Solution 3:^[3]

As of 2022 I'd like to add a solution using package assorted_layout_widgets:

NonUniformOutlineInputBorder

Can be used to style text-fields and containers.

Similar to Flutter's native OutlineInputBorder, but you can hide some of the sides, by setting hideTopSide, hideBottomSide, hideRightSide and hideLeftSide to true.

Usage for text-fields:

TextField(
   decoration: InputDecoration(
      enabledBorder: NonUniformOutlineInputBorder(hideLeftSide: true, ...),
      ...

Usage for containers:

Container(
   decoration: ShapeDecoration(
      shape: NonUniformOutlineInputBorder(
         hideLeftSide: true,
         borderSide: BorderSide(width: 10),
         borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            bottomRight: Radius.circular(35),
         ),          
   ...

NonUniformRoundedRectangleBorder

Can be used to style buttons and containers.

Similar to Flutter's native RoundedRectangleBorder but you can hide some of the sides, by setting hideTopSide, hideBottomSide, hideRightSide and hideLeftSide to true.

Usage for buttons:

ElevatedButton(
   style: ElevatedButton.styleFrom(
      shape: NonUniformRoundedRectangleBorder(
         hideLeftSide: true,
         side: BorderSide(color: Colors.black87, width: 15.0),
         borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            bottomRight: Radius.circular(35),
         ), 
      ...

Usage for containers:

Container(
   decoration: ShapeDecoration(
      shape: NonUniformRoundedRectangleBorder(...)),
   ...

Note: I'm the author of that package.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ash Khachatryan
Solution 3

'How to hide one side of the border of a TextField, in Flutter?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]