How to add highlighting border on buttonbar Flutter? - flutter

Question

I have buttonbar with a few buttons, here is the code:
ButtonBar(
children: [
Container(
width: 40,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: <Color>[
Colors.purpleAccent,
Colors.pinkAccent,
],
stops: const <double>[
0.5,
0,
],
),
shape: BoxShape.circle,
),
child: ElevatedButton(
onPressed: () =>
setColors(Colors.purpleAccent, Colors.pinkAccent),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
primary: Colors.transparent,
shadowColor: Colors.transparent,
),
child: Ink())
),
...
)
I want to highlight selected button with border, something like this:
How can I do this with current architecture?

Answer 1

Try below code I have try using ListView.builder(), not ButtonBar hope its help to you.use StatefulWidget for below code
declare index and bool variable:
bool isPressed = false;
int? buttonIndex;
Your Widget:
Center(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(2),
height: 40,
width: 40,
decoration: BoxDecoration(
color: isPressed && buttonIndex == index
? Colors.primaries[index]
: Colors.transparent,
shape: BoxShape.circle,
),
child: Container(
padding: EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: ClipOval(
child: Container(
height: 40,
width: 40,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
backgroundColor: Colors.primaries[index],
shape: CircleBorder(),
),
onPressed: () {
setState(() {
isPressed = !isPressed;
buttonIndex = index;
});
},
child: const SizedBox(),
),
),
),
),
);
},
),
),
Result Screen normal/without button click->
Result Screen with button click->
Test above code on Dartpad