0

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

1 Answer 1

2

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

4
  • can I do that in a Stateless Widget?
    – Lash
    May 15, 2022 at 15:51
  • no, that's why it's called stateless, it can't change it's state by itself
    – Nik Evi
    May 15, 2022 at 15:54
  • could you give some hint on how to implement it with a SatefulWidget?
    – Lash
    May 15, 2022 at 15:57
  • it's simple to refactor StatelessWidget to Statefull. If you use VS Code just click on StatelessWidget word, then Ctrl+Shift+R and choose convert to StatefullWidget
    – Nik Evi
    May 15, 2022 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.