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

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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
    //
  }
}