How to make the background of TextField rectangular box shape?

         TextField(
                  decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey, width: 2.0),
                  ),
                  hintText: 'Email',
                  prefixIcon: Icon(Icons.mail_outline),
                ),
              ),

Output:

enter image description here


Just remove the height and width property of the container.

Example:

   new Container(
      decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        border: new Border.all(
          color: Colors.black,
          width: 1.0,
        ),
      ),
      child: new TextField(
        textAlign: TextAlign.center,
        decoration: new InputDecoration(
          hintText: '1',
          border: InputBorder.none,

        ),
      ),
    )

or else just specify the border property of InputDecoration like

new TextField(
      textAlign: TextAlign.center,
      decoration: new InputDecoration(
        hintText: '1',
        border: new OutlineInputBorder(
          borderRadius: const BorderRadius.all(
            const Radius.circular(0.0),
          ),
          borderSide: new BorderSide(
            color: Colors.black,
            width: 1.0,
          ),
        ),
      ),
    )

Hope that helps


TextField(
  decoration: InputDecoration(
    filled: true, // <- this is required.
    border: const OutlineInputBorder(
      borderRadius: kStadiumBorderRadius,
      borderSide: BorderSide.none,
    ),
  ),
);

Tags:

Dart

Flutter