Home > database >  Showing card depending on button pressed in flutter
Showing card depending on button pressed in flutter

Time:05-16

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

  • Related