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

Question

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!

Answer 1

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.

Answer 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),
),