I am trying to implement a functionality so that when I press a button it displays a Card with some info. I got 2 buttons, depending on which I press it should show one card or another.
I simplified the code a bit not including some irrelevant parameters for this question.
class DogCardDetails extends StatelessWidget {
bool _visibleBehavior = true;
bool _visiblePhysical = true;
DogCardDetails({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(
right: 20,
left: 20,
),
child: Row(
children: [
ElevatedButton(
onPressed: () {
_visibleBehavior = false;
},
child: Text('Physical info'),
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(160.0),
side: BorderSide(color: Colors.white))))),
ElevatedButton(
onPressed: () {
_visibleBehavior = true;
},
child: Text('Behavior info'),
style: ButtonStyle(
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(160.0),
side: BorderSide(color: Colors.white))))),,
_visibleBehavior == true
? BehaviorCard()
: PhysicalCardInfoDog()
],
),
),
);
}
}
CodePudding user response:
you ned to wrap your functions with setState to redraw ui, like this
onPressed: () {
setState(() {
_visibleBehavior = true;
})
}
Also to use setState method you have to refactor your DogCardDetails StatelessWidget to StatefullWidget