Posts

Skica Flutter app update! Progress slow and steady. Provider making me mad.

avatar of @nolyoi
25
@nolyoi
·
·
0 views
·
2 min read

App update!

So, the last couple weeks I've been working on finishing up the applications home page and refactoring as much of the code as possible. I think I'm about done with that with the exception of the 'Recommended Products' section which may or may not be in the initial release.

I've begun coding the 'Routines' page. This is where users can add/edit/delete steps from their skincare routines. In the future they will also be able to add/edit products as well. I still have a long way to go for the routines features, but I'll get it done!

Check down below for an animated GIF of the app! It's super slow for some reason, but it wizzes through what I completed so far.

Some struggles

The only thing I really struggled with lately is getting Provider to work the way I want. When you have a Stream that depends on another Provider/Stream it is near impossible to get them to work together.

I originally thought ProxyProvider would do the trick. But, it doesn't seem to play well with Stream for some reason. Idk, maybe I was doing it wrong. I wanted it to look something like this, neat with a ProxyProvider inside my MultiProvider. But, you can't always get what. you want I guess.

class App extends StatelessWidget { 
  static FirebaseAnalytics analytics = FirebaseAnalytics(); 
  final _random = new Random(); 
  String next(int min, int max) => 
      (min + _random.nextInt(max - min)).toString(); 
  String _randomTip; 
 
  @override 
  Widget build(BuildContext context) { 
    _randomTip = next(1, 33); 
    return MultiProvider( 
      providers: [ 
        ChangeNotifierProvider<AuthProvider>(create: (_) => AuthProvider()), 
        StreamProvider<User>.value( 
          value: FirebaseAuth.instance.authStateChanges(), 
        ), 
        StreamProvider<Tip>.value( 
          value: TipProvider().streamTip(_randomTip), 
        ), 
        ProxyProvider<User, UserData>(update: (_, user, __){ 
          return RoutineProvider().userRoutineStream(user.uid) 
        }) 
      ], 
      child: MaterialApp( 
              home: Wrapper(), 
              navigatorObservers: [ 
                FirebaseAnalyticsObserver(analytics: analytics) 
              ], 
              theme: skicaTheme, 
            ), 
          ); 
           
  } 
} 

The only solution that worked for me was nesting them like so:

class App extends StatelessWidget { 
  static FirebaseAnalytics analytics = FirebaseAnalytics(); 
  final _random = new Random(); 
  String next(int min, int max) => 
      (min + _random.nextInt(max - min)).toString(); 
  String _randomTip; 
 
  @override 
  Widget build(BuildContext context) { 
    _randomTip = next(1, 33); 
    return MultiProvider( 
      providers: [ 
        ChangeNotifierProvider<AuthProvider>(create: (_) => AuthProvider()), 
        StreamProvider<User>.value( 
          value: FirebaseAuth.instance.authStateChanges(), 
        ), 
        StreamProvider<Tip>.value( 
          value: TipProvider().streamTip(_randomTip), 
        ), 
      ], 
      child: Consumer<User>(builder: (_, user, __) { 
        return StreamProvider<UserData>.value( 
          initialData: UserData( 
            name: 'Friend', 
            uid: '0', 
          ), 
          value: UserProvider().userData(user.uid), 
          child: StreamProvider<Routine>.value( 
            value: RoutineProvider().userRoutineStream(user.uid), 
            child: MaterialApp( 
              home: Wrapper(), 
              navigatorObservers: [ 
                FirebaseAnalyticsObserver(analytics: analytics) 
              ], 
              theme: skicaTheme, 
            ), 
          ), 
        ); 
      }), 
    ); 
  } 
} 

If anyone has flutter experience here and can tell me what I did wrong in the first example, I'd appreciate it. Note: I also tried declaring ProxyProvider<User, Stream<UserData>> but it didn't return the way a typical StreamProvider would.

Anyway here's the gif of the app progress so far! Thanks for reading if you made it this far!

You can visit the app's website at: https://skica.me/ and signup to receive updates.

Posted Using LeoFinance Beta