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

Answer 1

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