change value onTap

Question

I have 2 Inkwells that are controllers of a pageView, when I press on either is switches to a corresponding page.

                    Padding(
                  padding:
                      const EdgeInsetsDirectional.fromSTEB(0, 12, 1, 0),
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Padding(
                          padding: const EdgeInsetsDirectional.fromSTEB(
                              16, 0, 0, 0),
                          child: InkWell(
                            onTap: () async {
                              isSecondButton = false;
                              isFirstButton = true;
                              setState(() {});
                              await pageViewController.animateToPage(
                                0,
                                duration: const Duration(milliseconds: 500),
                                curve: Curves.ease,
                              );
                            },
                            child: Material(
                              color: Colors.transparent,
                              elevation: 2,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: Container(
                                width: 100,
                                height: 100,
                                decoration: BoxDecoration(
                                    color: const Color(0xFF0D1821),
                                    borderRadius: BorderRadius.circular(8),
                                    shape: BoxShape.rectangle,
                                    border: isFirstButton
                                        ? Border.all(color: Colors.white)
                                        : null),
                                child: Stack(
                                  children: [
                                    Align(
                                      alignment: const AlignmentDirectional(
                                          0, -0.05),
                                      child: Column(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            'assets/images/memes/standardbuild.jpg',
                                            width: 50,
                                            height: 50,
                                            fit: BoxFit.cover,
                                          ),
                                          Padding(
                                            padding: EdgeInsetsDirectional
                                                .fromSTEB(0, 8, 0, 0),
                                            child: AutoSizeText(
                                              'STANDARD BUILD',
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.lexendDeca(
                                                color: Color(0xFF8B97A2),
                                                fontSize: 13,
                                                fontWeight:
                                                    FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsetsDirectional.fromSTEB(
                              16, 0, 0, 0),
                          child: Material(
                            color: Colors.transparent,
                            elevation: 2,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Container(
                              width: 100,
                              height: 100,
                              decoration: BoxDecoration(
                                  color: const Color(0xFF0D1821),
                                  borderRadius: BorderRadius.circular(8),
                                  border: isSecondButton
                                      ? Border.all(color: Colors.white)
                                      : null),
                              child: InkWell(
                                onTap: () async {
                                  isSecondButton = true;
                                  isFirstButton = false;
                                  setState(() {});
                                  await pageViewController.animateToPage(
                                    1,
                                    duration:
                                        const Duration(milliseconds: 500),
                                    curve: Curves.ease,
                                  );
                                },
                                child: Stack(
                                  children: [
                                    Align(
                                      alignment: const AlignmentDirectional(
                                          0, -0.05),
                                      child: Column(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            'assets/images/memes/pepechad.png',
                                            width: 50,
                                            height: 50,
                                            fit: BoxFit.cover,
                                          ),
                                          Padding(
                                            padding: EdgeInsetsDirectional
                                                .fromSTEB(0, 8, 0, 0),
                                            child: AutoSizeText(
                                              'ALTERNATIVE BUILD',
                                              textAlign: TextAlign.center,
                                              style: GoogleFonts.lexendDeca(
                                                color: Color(0xFF8B97A2),
                                                fontSize: 13,
                                                fontWeight:
                                                    FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

On top of that I'd like to add, that on the same onTap to change another value of widget below which is a simple string, stored in model data and is called from with widget.data.tier1<-- first value and widget.data.tier2 <-- 2nd value:

                  Padding(
                padding:
                    const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 15),
                child: AutoSizeText(
                  ' lane',
                  style: GoogleFonts.lexendDeca(
                    color: Color(0xFF8B97A2),
                  ),
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    AutoSizeText(
                      widget.data.tier,
                      style: GoogleFonts.lexendDeca(
                        color: Color(0xFFFFFFFF),
                        fontSize: 45,
                        fontWeight: FontWeight.normal,
                      ),
                    ),

So for example:

onTap 1st button --> corresponding pageview page + widget.data.tier1 2nd button --> corresponding pageview page + widget.data.tier2

basically adding function that changes widget.data from 1 to 2.

any clarification is greatly appreciated, also sorry if there's anything unclear I'm new to this :P

here's how it should work 'S' changes to corresponding data

It's unclear what you're asking. Are you having an issue changing the value, or with updating the UI after changing it? Can you not just add the value change in the onTap along with the page navigation? — Stack Underflow, Jan 24 '22 at 23:38
the problem is this text is not a part of a pageview, but a separate widget so I'm not sure how to change the value in there, I uploaded whole code but its quite chunky :F — Adrian Dworak, Jan 25 '22 at 00:07
https://github.com/1restless/wild-wild-rift-app/blob/main/lib/builds/single_page_portrait.dart also added gif of how it should work — Adrian Dworak, Jan 25 '22 at 00:12
Okay, so it seems like the problem you're having is with state management. Correct me if I'm wrong but it looks like you haven't implemented any state management libraries yet like riverpod or bloc or anything like that? — Stack Underflow, Jan 25 '22 at 00:31
correctamudno :D, didn't dig to that yet however if you have any suggestions I'd appreciate to point me in a direction or just an example of how it works — Adrian Dworak, Jan 25 '22 at 00:50
Implementing state management isn't very difficult but it's also not super trivial. There are quick and dirty ways to do it that will get the job done but will become problematic as the application grows and becomes more complex. The easiest way to get it done fast is to use global state like a Singleton which various parts of the app can access although that's obviously not necessarily the best way to go about it. — Stack Underflow, Jan 25 '22 at 01:12

Stack Underflow · Accepted Answer · 2022-01-25T01:56:18.483

0

For a quick and dirty solution to make it work, create a singleton to hold the tier state. Add the following class:

class GlobalState {
  static final GlobalState _globalState = GlobalState._();

  factory GlobalState() {
    return _globalState;
  }

  GlobalState._();

  String tier = 'S';
}

In the onTap of your InkWells, set the tier to whatever you want it to be:

setState(() {
  GlobalState().tier = 'S';
});

When displaying the tier, grab the value from the singleton:

AutoSizeText(
  GlobalState().tier,
  ...

I would highly recommend looking into implementing a state management library such as riverpod.

Also, I noticed that you initialized both isFirstButton and isSecondButton to false. If you want to default to the standard tier, you can initialize isFirstButton to true and have the tier variable initialized to 'S' (as in the singleton above).

If you want the entire Data objects to be updated, you'd need to store them in the singleton as well so that they can be accessed/updated by the different parts of the application. This is why global state isn't the best solution for this and proper state management should be implemented. But it can be done with the singleton if you want.

edited Jan 25 '22 at 01:56

answered Jan 25 '22 at 01:41

Stack Underflow

2,363
2
26
51

Thank you for explanation ! In short this tiers are fetched from my data model, and almost every one of them is unique because they vary depending on the patch, meta and so on so I have to update them manually. I need it only for this particular case, given the above how can I fetch data ? I have both of them on false but it doesnt really matter, ```isFirstButton``` can be true by default – Adrian Dworak Jan 25 '22 at 02:41
Can I do it like this ? ```class GlobalState { static final GlobalState _globalState = GlobalState._(); final Data data; String tier1, tier2; factory GlobalState() { return _globalState; } GlobalState._(this.data) { tier1=data.tier1; tier2=data.tier2; } }``` – Adrian Dworak Jan 25 '22 at 02:42
In that case, I would have a `Data data` property in `GlobalState` and set it as soon as you retrieve it from the data model. You won't be able to do it as in your comment because the only time the `GlobalState._()` constructor is called is once when the static `_globalState` variable is initialized. That's the mechanism that makes this a singleton, preventing other code from creating a new instance of the GlobalState class. – Stack Underflow Jan 25 '22 at 18:39

change value onTap

1 Answers1