Issue
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 😛
here’s how it should work ‘S’ changes to corresponding data
Solution
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.
Answered By – Stack Underflow
Answer Checked By – Marie Seifert (FlutterFixes Admin)