Want to highlight selected widget in flutter-CodePudding

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

CodePudding user response：

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