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