Conditionally show a Stepper

130 views
Skip to first unread message

Gavin Henry

unread,
Jun 6, 2019, 12:46:18 PM6/6/19
to Flutter Development (flutter-dev)
Hi all,

I'm using a Stepper for a setup wizard and shared_prefs to save that setup is complete.

I only want to show this Stepper based on that bool. Where the best place to do this in below in my Scaffold?

Thanks!

body: Container(
child: new Stepper(

Andy Greenshaw

unread,
Jun 6, 2019, 12:52:10 PM6/6/19
to Flutter Development (flutter-dev), Gavin Henry
Read the shared_prefs in initState() and set your bool accordingly, then show empty Container if you don’t want the Stepper.

    child: myBool ? Stepper(…) : Container();

Cheers,
Andy
--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/6d5c2797-17c5-452f-879c-7d412d2df928%40googlegroups.com.

Steven McDowall

unread,
Jun 6, 2019, 1:00:32 PM6/6/19
to Andy Greenshaw, Flutter Development (flutter-dev), Gavin Henry

I don't think the solution is exactly correct although certainly close -- IIRC reading shared_prefs is an async operation -- which you can't do exactly in initState() .. 

So in initState you can call another function that is async() and then read the shared_prefs and then do something like

void getPrefs() async {
bool _someBool = await shared_prefs.get('foo'); // or whatever the syntax is
if(mounted) {
setState(() => {}); 
}

Sort of thing .. the syntax isn't exactly right its from the top of my head .. then have the condition like you did .. 

Cheers



Mouad Debbar

unread,
Jun 6, 2019, 1:04:19 PM6/6/19
to Flutter Development (flutter-dev)
Have you considered using a FutureBuilder?


On Thursday, June 6, 2019 at 10:00:32 AM UTC-7, Steven McDowall wrote:

I don't think the solution is exactly correct although certainly close -- IIRC reading shared_prefs is an async operation -- which you can't do exactly in initState() .. 

So in initState you can call another function that is async() and then read the shared_prefs and then do something like

void getPrefs() async {
bool _someBool = await shared_prefs.get('foo'); // or whatever the syntax is
if(mounted) {
setState(() => {}); 
}

Sort of thing .. the syntax isn't exactly right its from the top of my head .. then have the condition like you did .. 

Cheers

On Jun 6, 2019, at 12:51 PM, Andy Greenshaw <andy...@gmail.com> wrote:

Read the shared_prefs in initState() and set your bool accordingly, then show empty Container if you don’t want the Stepper.

    child: myBool ? Stepper(…) : Container();

Cheers,
Andy
On 6 Jun 2019, 17:46 +0100, Gavin Henry <gavin...@gmail.com>, wrote:
Hi all,

I'm using a Stepper for a setup wizard and shared_prefs to save that setup is complete.

I only want to show this Stepper based on that bool. Where the best place to do this in below in my Scaffold?

Thanks!

body: Container(
child: new Stepper(

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.

Gavin Henry

unread,
Jun 6, 2019, 1:58:14 PM6/6/19
to Flutter Development (flutter-dev)


On Thursday, June 6, 2019 at 5:52:10 PM UTC+1, Andy Greenshaw wrote:
Read the shared_prefs in initState() and set your bool accordingly, then show empty Container if you don’t want the Stepper.

    child: myBool ? Stepper(…) : Container();


That's pretty close to where I am. I'm just not sure where to check my bool/state. I have this for my FCM token, then once I have the user scan and post their QR Code back to our API, I set the wizard as complete:

_firebaseMessaging.getToken().then((String token) {
assert(token != null);

_loadSetupComplete();

setState(() {
fcmToken = token;
});
print("Push Messaging token: $fcmToken");

// User has cleared app data, re-run Wizard:
// https://firebase.google.com/docs/reference/android/com/google/firebase/iid/FirebaseInstanceId
if (fcmToken != savedFcmToken) {
_setFcmToken();
_setupNeeded();
}
});

and

_loadSetupComplete() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
setState(() {
setupComplete = prefs.getBool('setupComplete');
print("Loading setupComplete as: $setupComplete");
});
}


_setSetupComplete() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setBool('setupComplete', true);
setState(() {
setupComplete = true;
});
print("Setting setupComplete to true.");
}

Gavin Henry

unread,
Jun 6, 2019, 1:59:25 PM6/6/19
to Flutter Development (flutter-dev)
I guess my question is if there is a design pattern that is nicer than ? : ; conditionals which is what I seem to be seeing on example apps, so etc.

Gavin Henry

unread,
Jun 6, 2019, 2:01:28 PM6/6/19
to Flutter Development (flutter-dev)


On Thursday, June 6, 2019 at 6:04:19 PM UTC+1, Mouad Debbar wrote:
Have you considered using a FutureBuilder?

 I was reading up on that last night and think I have committed that code in my vcs and then removed it as I couldn't use it in my Steppers steps which are like so (I was trying to call
String qrCode = await BarcodeScanner.scan();
inside a static step. Doh.

List<Step> setupSteps = [
Step(
title: Text("Step 1"),
subtitle: Text("Find your QR Code"),
content: Text(
"On your desktop, please go to $SUREVOIP_PORTAL and navigate to:" +
"\n\nSettings -> Notifications"),
isActive: true),
Step(
title: Text("Step 2"),
subtitle: Text("Scan your QR Code"),
content: Text("Get ready!"),
isActive: true),
Step(
title: Text("Step 3"),
subtitle: Text("Test your notifications"),
content: Text("Make a test call to one of your numbers."),
state: StepState.complete,
isActive: true),
];
Reply all
Reply to author
Forward
0 new messages