How to hide one side of Textfield in flutter?

Question

I am using the TextField class where I want to hide the left side border of the textfield as shown in the below picture.

                 TextField(
                      onChanged: bloc.changeUserName,
                      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

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

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

Comments

[Sangeet]

It is not working as BoxDecoration is applied to Container, not to Textfield.

[Sangeet]

It is working but again if there's an error message it is appearing inside the container which shouldn't happen. Can't we do changes in the Textfield?

[Stefano Amorelli]

I've modified the answer supporting the TextField border, example number #2!

[eko]

one bracket was missing at the end, i added and it works for me 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), ),)