A rounded input is mostly a matter of making its fill, padding, and border states agree. This small example uses a white fill and matching borders to create an email field with rounded ends.
Historical snippet. The code is preserved from the original Flutter note. Its
bloc.validateEmail.pushcallback belongs to the surrounding application; this excerpt does not define that BLoC or claim a newly tested Flutter build.
The decoration
TextField(
onChanged: bloc.validateEmail.push,
autofocus: true,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(25.7),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(25.7),
),
hintText: 'Email',
),
),filled enables the decoration’s background, while fillColor chooses its color. The padding sets the space around the text. Both border states use the same radius, so the field keeps its rounded shape when focus changes.
The example uses an OutlineInputBorder for the focused state and an UnderlineInputBorder for the enabled state. Their white border colors blend into the white fill; that detail is part of this particular appearance rather than a general recommendation for every theme.
The result
The input shown in the original note.
Fit it to the interface
When adapting the idea, review the background contrast, focus visibility, label, and error state together. The old snippet sets autofocus: true; whether the screen should immediately focus an email field depends on that screen’s interaction.
The decoration properties are documented in Flutter’s InputDecoration API. The visual idea is small enough to keep as a note: a coherent fill, consistent radius, and deliberate spacing do most of the work.