How to make side-only borders on TextInput with Flutter?

user_13695338 0
Viewed 126

I am making a text input with Flutter using the TextFormField and DropdownButtonFormField yet. However, I need the inputs to be side by side with borders and if putting them by default, there are two borders between them. Anyway, I need to apply borders only on some sides using a TextInput while keeping the ability to change the border depending on the input state (error, focus, disabled...). I have thought of wrapping the input field with a Container and giving this container a border but I couldn't handle the input states.

The "doubled" border created by the two fields :

enter image description here

dart flutter
1 Answers

You can use the "decoration" field in TextFormField to configure the borders and the colors, depending on the state.

The decoration can be also changed directly in the App's Theme, to change the default behavior.

 decoration: InputDecoration().copyWith(
      // alternatively UnderlineInputBorder(),
      border: const OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(12.0)),
        borderSide: BorderSide(),
      ),
    );
user_142304710
Related