Question 245440 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to develop these two selectable containers?

enter image description here

Please check the above image.
I want to create these two selectable containers that if i i select home container the home container should be selected,and if i select office container, the office container should be selected and the border of selected container should be orange like this in the screen.

I tried it by making a simple container, i can create these statically but i want to make it selectable.

Tags:

2

Answers


  1. 0

    TextFormField has a property for setting the style when the input is Focused

     TextFormField{ 
  // ... other properties
  focusedBorder:OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.orange, width: 2.0),
        borderRadius: BorderRadius.circular(25.0),
      ),
    Login or Signup to reply.
  2. 0

    What you need is a value notifier or an attribute to store selected container value and update UI on change.

    If you use ValueNotifier you can wrap the Column that contains both containers with ValueListenableBuilder and add border based on selected value.

    If you have an attribute, you need to setState() on updating selected index.

    You can store the index of selection and show border if

    indexOfContainer==selected
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search