CODEWITHSUNDEEP
flutterdart
Lukas Laudrain
Lukas Laudrain

Reputation: 425

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

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

Upvotes: 1

Views: 1110

Answers (2)

Ejim Favour
Ejim Favour

Reputation: 1

final myBorder = UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.grey[400], // You can change the color of the bottom border here
    width: 1.0, // Customize the width of the border
  ),
);

final myFocusedBorder = UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.blue, // Customize the color of the bottom border when the field is focused
    width: 2.0, // Customize the width of the border
  ),
);

final myEnabledBorder = UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.grey[400], // Customize the color of the bottom border when the field is enabled
    width: 1.0, // Customize the width of the border
  ),
);

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your text', // Optional label text
    labelStyle: TextStyle(color: Colors.grey[400]), // Optional label style
    enabledBorder: myEnabledBorder,
    focusedBorder: myFocusedBorder,
    border: myBorder,
  ),
)

This works for border bottom only

Upvotes: 0

Saichi Okuma
Saichi Okuma

Reputation: 254

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

Upvotes: 1

Related Questions