Want to highlight selected widget in flutter

Question

I have made an demo app where I have created a custom widget and using this custom widget many times. now I want to highlight widget with different colour than others on tap..like BottomNavigationBarItem showing selected barite with differ colour than other

what should I implement to do it...specially any short way so that it can work with many same widgets..

here is my simple coding..

my custom widget

class MyContainer extends StatelessWidget {
  final VoidCallback ontap;

  MyContainer({required this.ontap});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: GestureDetector(
        onTap: ontap,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey.shade300,
            borderRadius: BorderRadius.circular(20),
            //border:isselected==true? Border.all(width: 2,color: Colors.blue):null,
          ),
        ),
      ),
    );
  }
}

and here is home file

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              child: Row(
            children: [
              Expanded(child: MyContainer(
                ontap: () {
                  setState(() {});
                },
              )),
              Expanded(child: MyContainer(
                ontap: () {
                  setState(() {});
                },
              ))
            ],
          )),
          Expanded(child: MyContainer(
            ontap: () {
              setState(() {});
            },
          )),
        ],
      ),
    );
  }
}

Only one widget should be selected at time..others should be deselected — Irfan Ganatra, Jul 13 '22 at 18:01

score 3 · Accepted Answer · answered Jul 13 '22 at 18:14

3

You can use nullable int to hold selected index, and index can be considered as widget ID. Also pass the bool to show selected condition.

class MyContainer extends StatelessWidget {
  final VoidCallback ontap;
  bool isSelected;
  MyContainer({
    required this.ontap,
    this.isSelected = false,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: GestureDetector(
        onTap: ontap,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey.shade300,
            borderRadius: BorderRadius.circular(20),
            border: isSelected == true
                ? Border.all(width: 2, color: Colors.blue)
                : null,
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
              child: Row(
            children: [
              Expanded(
                child: MyContainer(
                  isSelected: selectedIndex == 1,
                  ontap: () {
                    selectedIndex = 1;
                    setState(() {});
                  },
                ),
              ),
              Expanded(
                child: MyContainer(
                  isSelected: selectedIndex == 2,
                  ontap: () {
                    selectedIndex = 2;
                    setState(() {});
                  },
                ),
              )
            ],
          )),
          Expanded(
            child: MyContainer(
              isSelected: selectedIndex == 3,
              ontap: () {
                selectedIndex = 3;
                setState(() {});
              },
            ),
          ),
        ],
      ),
    );
  }
}

answered Jul 13 '22 at 18:14

Md. Yeasin Sheikh

54,221
7
29
56

Thanks for ur instants replies...so here I can also take an list array of my custom widget, right? like if I have to create many same widgets – Irfan Ganatra Jul 13 '22 at 18:34
Yes you can do that, just make sure to provide unique index like `isSelected: selectedIndex == 1,` – Md. Yeasin Sheikh Jul 13 '22 at 18:37
yes I will try my best...actually learning flutter and that's why posting such basic examples – Irfan Ganatra Jul 13 '22 at 18:42
You can also check [cookbook](https://docs.flutter.dev/cookbook) – Md. Yeasin Sheikh Jul 13 '22 at 18:44
Hi..Dont mind as I am asking non subjected question...want to know is flutter can be installed on windows 7? before formatting laptop I should know... – Irfan Ganatra Jul 15 '22 at 11:38
You can give a try by following [install guide](https://docs.flutter.dev/get-started/install/windows) – Md. Yeasin Sheikh Jul 15 '22 at 11:55
@YeasinSheikh It was helpful, is it possible to replace hardcoded index values with widget keys ? – Shreyz Nov 04 '22 at 10:37
1

@Shreyz you can use for loop or List.generator on Column – Md. Yeasin Sheikh Nov 04 '22 at 10:39
I have dynamically generated widgets, not necessarily in a list. I appreciate if you could help me use widget key itself for checking selected widget. – Shreyz Nov 04 '22 at 10:43
Feel free to create question with [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) , I will give a try after finishing my current task – Md. Yeasin Sheikh Nov 04 '22 at 10:46
help here to enhance your solution @YeasinSheikh https://stackoverflow.com/questions/74317537/flutter-question-how-to-select-highlight-widget-based-on-widget-key-or-unique-k – Shreyz Nov 04 '22 at 13:15

Want to highlight selected widget in flutter

1 Answers1

Linked