filledstacks/flutter-tutorials

The repo contains the source code for all the tutorials on the FilledStacks Youtube channel.

Flutter tutorials

The repo contains the source code for all the written tutorials by Filledstacks.

All Tutorials plus additional snippets and shorter posts can be found on the Official FilledStacks website.

Products

Flutter Web Mastery course

** Important **

When you want to run any of the code first run

flutter create .

In the repo to generate the platform projects for the tutorials.

Tutorials

087 - How to Build a Flutter Website in 2023 [ Video ] [ Source ] [ Written ] - The updated tutorial for building a Flutter Website

086 - Flutter Website Nested Layouts and Custom URL's [ Video ] [ Source ] - The updated tutorial for building a Flutter Website

085 - 6 Tips to Make your Flutter Website feel Premium [ Video ] [ Written ] - 6 Tips you can apply to immediately make your Flutter Website feel more premium

066 - Login and Create Account Implementation [ Video ] [ Source ] [ Written ] - This tutorial goes over implementation we'll be using for Login and Create Account functionality.

064 - New Improved Stacked Setup [ Video ] [ Source ] - This tutorial goes over the new and improved stacked setup that includes navigation, dependency registration and the traditional stacked statemanagement.

063 - Firebase Authentication in 5 minutes [ Video ] [ Source ] - In this tutorial we setup the firebase authentication for a flutter app in 5 minutes

062 - Code overview for Firebase Backend [ Video ] - This tutorial goes over the code required to build a scalable firebase backend

061 - Planning a Firebase Backend [ Video ] - In this tutorial we go over a detailed plan for building a scalable backend using Firebase Cloud Functions.

060 - Making Technical decisions [ Video ] - In this tutorial we go over the thinking and reasoning behind making some of the technical decisions required when planning for a large scale product development

059 - Planning a Food Delivery Service [ Video ] - This tutorial goes over the planning for a food delivery product

058 - Bottom Sheet Service | Using Flutter Bottom Sheets without context [ Video ] [ Written ] [ Source ] - This tutorial goes over the usage of the new BottomSheetService in the stacked_services package.

057 - SQLite in Flutter | Migrations and Schema Management [ Video ] [ Written ] - This tutorial goes over the SQLite implementation used in our production applications. It shows the basics of SQLite. The meat of the tutorial comes from the schema management solution we use.

055 - Lottie Splash Screen in Flutter [ Video ] [ Written ] - A tutorial that shows you how to implement an animated splash screen using Lottie and delay the navigation until it's complete.

054 - Flutter Architecture Part 7 - Dialog Service [ Video ] [ Written ] [ Source Code ] - A complete guide to the setup of the basics for a starter stacked architecture project.

053 - Flutter Architecture Part 6 - Bottom Navigation with Stacked [ Video ] [ Written ] [ Source Code ] - A guide to implementing a bottom navigation bar using stacked.

052 - Flutter Architecture Part 5 - How to Mock - Unit Testing [ Video ] [ Written ] [ Source Code ] - A complete guide to mocking in unit testing, how it's used for tests and what they're used for.

051 - Flutter Architecture Part 4 - How to Unit test a Unit Testing intro [ Video ] [ Written ] [ Source Code ] - An intro to unit testing and how to set it up in Flutter.

050 - Flutter Architecture Part 3 - Flutter Services [ Video ] [ Written ] [ Source Code ] - A complete guide on services, service classes, what they are used for and how to use them.

049 - Flutter Architecture Part 2 - Stacked State Management scenarios [ Video ] [ Written ] [ Source Code ] - This tutorial goes over common state management situation encountered in a real world application

048 - Flutter Architecture Part 1 - Stacked, Routing and GetIt setup [ Video ] [ Written ] [ Source Code ] - A complete guide to the setup of the basics for a starter stacked architecture project.

047 - Firebase and Flutter Part 10 - Remote Config [ Video ] [ Written ] - This tutorial goes over remote config and how to manage it in a flutter project.

046 - Firebase and Flutter Part 9 - Dynamic Links in Flutter [ Video ] [ Written ] - This tutorial covers the use of dynamic links in flutter to perform auto routing and deep linking.

045 - Firebase and Flutter Part 8 - Realtime Paginated Data using Firestore [ Video ] [ Written ] - This tutorial shows the implementation of getting real time firebase data when impelementing an infinte scrolling view.

044 - Firebase and Flutter Part 7 - Analytics [ Video ] [ Written ] - This tutorial shows you how to add analytics into your Flutter app for live monitoring of your users.

043 - Firebase and Flutter Part 6 - Push Notifications using Cloud Messaging [ Video ] [ Written ] - This tutorial goes over my implementation of Push Notification in Flutter using Firebase Cloud Messaging.

042 - Firebase and Flutter - Part 5 - Firebase Cloud Storage [Video ] [ Written ] - In this tutorial we go over the implementation details of using Firebase Cloud Storage inside a Flutter application.

041 - Firebase and Flutter - Part 4 - Firestore Security Rules [ Video ] [ Written ] - This tutorial covers the implementation of Firestore security rules and how to test them.

040 - Firebase and Flutter - Part 3 - CRUD using Firestore [ Video ] [ Written ] - This tutorial goes over the CRUD implementation using Firestore. We Create documents, Read the collection, Delete documents and Update existing documents data through Flutter.

039 - Firebase and Flutter - Part 2 - Custom Startup Logic and User Profiles [ Video ] [ Written ] - This tutorial goes over the process of making sure we startup on the correct view and the logic behind adding a custom user profile.

038 - Firebase and Flutter - Part 1 - Basic Authentication [ Video ] [ Written ] - This tutorial covers the setup of a firebase project and the basic functionality to perform a login / sign up using Firebase email authentication.

037 - Flutter Web Development - Part 6 - Advanced URL navigation [ Video ] [ Written ] - In this video we cover URL navigation in Flutter Web that allows us to navigation within a template and pass in query parameters.

036 - Flutter Web Development - Part 5 - Hover Effects [ Video ] [ Written ] - This video goes over how to add hover effects into Flutter Web.

035 - Flutter Web Development - Part 4 - State and API integration [ Video ] [ Written ] - In this video we integrate the provider_architecture package and create a simple API class to fetch our data.

034 - Flutter Web Development - Part 3 - Template Layouts [ Video ] [ Written ] - This tutorial contains the code for a Flutter Template Layout for Web Development.

033 - Flutter Web Development - Part 2 - Responsive UI [ Video ] [ Written ] - This guide goes over adding responsiveness to your Flutter web UI

032 - Flutter Web Development - Part 1 [ Video ] [ Written ] - In this tutorial we create a Flutter web app, build a basic UI and deploy it to firestore.

031 - Flutter Responsive UI - Part 3 [ Video ] [ Written ] - This tutorial goes over the process of adding Provider on top of an existing Responsive UI framework for state management.

030 - Flutter Responsive UI - Part 2 [ Video ] [ Written ] - This tutorial / guide goes over how you can build a responsive UI architecture to allow for a maintainable and manageable multi platform code base.

029 - Flutter Responsive UI - Part 1 [ Video ] [ Written ] - This tutorial goes over the process of building a base widget that provides us with all the information to build a responsive UI.

028 - Flutter Continuous Scroll [ Video ] [ Written ] - This tutorial goes over how to create a continuous scrolling list in Flutter using index numbers and not the scroll controller.

027 - Flutter Location Service [ Video ] [ Written ] - This tutorial covers the should be common task of wrapping a set of functionality within a service. We build a location service that provides continuous updates using the Location package.

026 - Flutter stream basics. Absolute basics [ Video ] [ Written ] - This is a short tutorial that covers the creation, usage and management of streams. I also cover how to manually create Streams using async* functionality.

025 - Flutter navigation without BuildContext | Navigation Service [ Video ] [ Written ] - This tutorial covers the creation of a Navigation Service to move your navigation logic out of your UI files into the business logic files.

024 - Abstraction in Flutter Pt2 | Better unit tests using Abstraction [ Video ] [ Written ] - In this tutorial we go over how using Abstraction can make your unit tests better.

023 - Abstraction In Flutter Pt1 | How it can save hours of development time [ Video ] [ Written ] - This tutorial is part one of the abstraction series that will cover the benefits of abstraction in practical use cases. In this one we look at how using a second implementation of an interface that returns fake data can speed up your application development.

022 - Build a Lifecycle manager for Background behaviour in Flutter [ Video ] [ Written ] - In this tutorial I go over how to build and hook up a LifeCycle manager to the Flutter AppLifeCycle. We use that to start and stop services within our architecture when the app enters a background state or come back to the foreground.

021 - Build an architecture for your dialog management in Flutter [ Video ] [ Written ] - This tutorial guides you on how to create a dialog manager in Flutter that allows you to show and access information from dialogs from your business logic.

020 - A Guide to using Futures [ Video ] [ Written ] - This tutorial goes over the functionality provided by Futures and how to use it.

019 - Flutter animation Guide | Deep Dive | Flutter Hooks and Flutter Sequence Builder [ Written ] [ Video ] - This tutorial goes over every way you can organise your animation code using the provided flutter functionality. Then we go to Flutter hooks to help reduce the code and we look at the sequence builder to create some combined animations.

018 - Bottom Sheet Guide in Flutter [ Written ] [ Video ] - This tutorial goes over everything you need to know to effectively make use of the BottomSheet in your app.

017 - Better Logging in Flutter [ Written - Effective Logging ] [ Written - Setup Guide ] [ Video ] - This set of tutorials cover logging in Flutter. It shows you how to set it up, and it also gives you guidelines on where to use it and what to log when using it.

016 - Flutter Navigation using Named Routing [ Written ] [ Video ] - This tutorial guides you through everything you need to know about navigation in Flutter using named routing.

015 - Animated SplashScreen with Flare [ Written ] [ Video ] - This tutorial shows how to setup your splash following up with a nice intro animation built in Flare.

014 - Flutter Provider V3 Architecture using ProxyProvider [ Written ] [ Video ] - In this tutorial we implement a previously built app using Provider only and show how an architecture with dependency injection can be setup using the ProxyProvider.

013 - Flutter Dependency Injection for Beginners [ Written ] [ Video ] - In this tutorial I explain what dependency injection is in plain english and show three ways of implementing it in Flutter.

012 - Flutter Provider - Sharing Data Between Models using Services [ Written ] [ Video ] - In this tutorial I expand on my previous tutorial showing how you share data between models using services.

011 - Network Sensitive UI in Flutter using Provider and Connectivity [ Written ] [ Video ] - In this tutorial I create a network sensitive UI that shows different states based on the status of your connection.

010 - Flutter Architecture - A complete guide to Provider [ Written ] [ Video ] - In this tutorial / guide I cover the complete architecture to build a production app using the provider package for state management.

009 - Build a User Feedback app using Flutter and Firebase [ Written ] [ Video ] - In this tutorial I guide you through the steps to implement a real time user feedback app using firebase, flutter and the ScopedModel architecture.

008 - Building a Realtime stats monitor using Flutter and Firebase [ Written ] [ Video ] - In this tutorial I go over the steps for implementing a real time stats monitor for AppSkeletons

007 - Flutter Architecture - A complete guide to the ScopedModel architecture [ Written ] [ Video ] [ AppSkeletons ]- In this tutorial we'll lay the foundation to develop an application using Flutter and ScopedModel that's easy to maintain and extend.

006 - Flutter + (Smart)Flare - Building a Gooey side menu [ Source ] [ Video ] [ Animation ] [ Written (code only) ] - In this tutorial I go over the process of building a slide out menu in Flare. Then importing into Flutter and using SmartFlare to add some interactive functionality to it.

005 - Overflown Stacks - A Guide to basic navigation in Flutter using Navigator [ Video ] [ Written ] [ Source ] - This repo contains an implementation of basic navigation using the code snippets defined in the guide.

004 - Flutter Foundation - Handling Async behaviour - From setState to Architecture [ Written ] [ Source ] [ Video ] - In this tutorial I show how you to handle async functionality and all it's states starting with setState and working up to a reactive architecture using streams.

003 - Using SmartFlare for Flare animation interactions [ Video ] [ Written ] [ Package ] [ Source ] - In this tutorial I introduce my SmartFlare package that wraps normal FlareActors into a more interactable widget.

002 - Smarter Flare Animations in Flutter - An Experiment [ Video ] [ Written ] [ Source ] - In this tutorial we look at how to reduce animation boiler plate code in Flutter using some basic calculations and the Awesome Flare.

001 - Building a UI in Flutter - TikTok example: [ Video ] [ Written P1 ] [Written P2] [Source] - In this tutorial we break down the UI into Flutter Widgets, complete our layout and then tweak to get our final design to match our screenshots.

flutter-tutorials's Issues

viewmodels - bloc pattern resemblance.

Hi @FilledStacks ,

I'm wondering if the approach used in the architecture you proposed resembles the bloc pattern.

For example, this code is using the bloc pattern:

class SignInBloc {
  final AuthBase auth;

  SignInBloc({@required this.auth});

  final StreamController<bool> _isLoadingController = StreamController<bool>();

  Stream<bool> get isLoadingStream => _isLoadingController.stream;

  void dispose() {
    _isLoadingController.close();
  }

  void _setIsLoading(bool isLoading) {
    if (!_isLoadingController.isClosed) {
      _isLoadingController.add(isLoading);
    }
  }
} 

And your implementation:

class FeedbackViewModel extends BaseModel {
  FirestoreService _firestoreService = locator<FirestoreService>();
  List<UserFeedback> userFeedback;

  FeedbackViewModel() {
    _firestoreService.feedback.asBroadcastStream().listen(_onFeedbackUpdated);
  }

  void markFeedbackAsRead({@required String feedbackId}) {
    _firestoreService.markFeedbackAsRead(feedbackId: feedbackId);
  }

  void _onFeedbackUpdated(List<UserFeedback> event) {
    userFeedback = event;

    if (userFeedback == null) {
      setState(ViewState.Busy);
    } else {
      setState(userFeedback.length == 0
          ? ViewState.NoDataAvailable
          : ViewState.DataFetched);
    }
  }
}

What do you think?

Improvement to ServiceNavigation for AppBar back button

In StartupViewModel change:

_navigationService.navigateTo(RoutePaths.Home);
to
_navigationService.replaceTo(RoutePaths.Home);

In NavigationService add:

Future<dynamic> replaceTo(String routeName, {dynamic arguments}) {
    return _navigationKey.currentState
        .pushReplacementNamed(routeName, arguments: arguments);
  }

This will avoid the Back icon on home page resetting the navigation state.

new provider library version

just update to the lasted Provider version,
We have some issues on MyApp class at userController.
How can I fix that,
Thanks!

errors after updating provider to 3.1.0

Hi,
there is issue on some circumstances:
in your lesson014 every instance of widget has its own widget of ModelView by calling constructor:

class _LoginViewState extends State<LoginView> {
 final TextEditingController _controller = TextEditingController();

 @override
 Widget build(BuildContext context) {
   return BaseWidget<LoginViewModel>(
     // HERE!
     model: LoginViewModel(authenticationService: Provider.of(context)),

But suppose we want to use provider instead of constructor:

class _LoginViewState extends State<LoginView> {
 final TextEditingController _controller = TextEditingController();

 @override
 Widget build(BuildContext context) {
   return BaseWidget<LoginViewModel>(
     // Like that
     model: Provider.of<LoginViewModel>(context),
 
// and of course do something like that:

List<SingleChildCloneableWidget> dependentServices = [
 ProxyProvider<Api, AuthenticationService>(
   builder: (context, api, authenticationService) =>
       AuthenticationService(api: api),
 ),
// HERE
 ChangeNotifierProxyProvider<AuthenticationService, LoginViewModel>(
   initialBuilder: null,
   builder: (context, authenticationService, loginViewModel) =>
       LoginViewModel(authenticationService: authenticationService),
 )
];

and all goes well until :

provider: ^3.0.0 –> provider: 3.1.0

after that we catch errors like that:

I/flutter (15123): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (15123): The following assertion was thrown building BaseWidget<LoginViewModel>(state:
I/flutter (15123): _BaseWidgetState<LoginViewModel>#16c62):
I/flutter (15123): The default constructor of ListenableProvider/ChangeNotifierProvider
I/flutter (15123): must create a new, unused Listenable.
I/flutter (15123): 
I/flutter (15123): If you want to reuse an existing Listenable, use the second constructor:
I/flutter (15123): 
I/flutter (15123): - DO use ChangeNotifierProvider.value to provider an existing ChangeNotifier:
I/flutter (15123): 
I/flutter (15123): MyChangeNotifier variable;
I/flutter (15123): ChangeNotifierProvider.value(
I/flutter (15123):   value: variable,
I/flutter (15123):   child: ...
I/flutter (15123): )
I/flutter (15123): 
I/flutter (15123): - DON'T reuse an existing ChangeNotifier using the default constructor.
I/flutter (15123): 
I/flutter (15123): MyChangeNotifier variable;
I/flutter (15123): ChangeNotifierProvider(
I/flutter (15123):   builder: (_) => variable,
I/flutter (15123):   child: ...
I/flutter (15123): )

I tried to fix it in base_widget.dart in that way:

 @override
 Widget build(BuildContext context) {
//    return ChangeNotifierProvider<T>(
//      builder: (context) => model,
   return ChangeNotifierProvider<T>.value(
     value: model,

is this correct?
Maybe you update samples some way?

flutter-tutorials/042-firebase-cloud-storage/lib/models/post.dart

Awesome tutorial tx

Would it be possible to add a example of how to populate a field of type array
i.e. Time [ int hours, int min, int sec ]

Not relevant

Hi,
From your repo "tutorials / provider_architecture / start":

• In "pubspec.yaml" is written " get_it:" with no version:
  This generates an error in "locator.dart" in the line "GetIt locator = GetIt.instance;"
• Adding the versión "get_it: ^4.0.1" solve this error.

Thank you for your excellent work/tutorial.
J. Pablo.

Provider pattern with exception handling

Hi, first of all, these are really great tutorials. I really love what you have done here.

After viewing most of them I have build my app with provider approach from this article:
https://www.filledstacks.com/post/flutter-architecture-my-provider-implementation-guide/

The way of handling idle and busy is awesome but it looks like it is missing the exception-handling part, sure I can write my own way of exception handling. But Im just wondering if there is an existing sample that has already got a nice approach integrated with your current design? Thanks

[AuthenticationService] type 'String' is not a subtype of type 'User'

Future _populateCurrentUser(FirebaseUser user) async {
    //_firebaseAuth.signOut();
    if (user != null) {
      _currentUser = await _firestoreService.getUser(user.uid);
      await _analyticsService.setUserProperties(
        userId: user.uid,
        userRole: _currentUser.userRole,
      );
    }
  }

"_currentUser
Exception has occurred.
_TypeError (type 'String' is not a subtype of type 'User')"

Your repo can't download

I can't download zip file or clone your repo. It's like corrupt. Can you try to check?

Force onModelReady

I am using your BaseModel-BaseWidget arquitecture from 014-provider-v3-updates.
I have the following:

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AppModule module = Provider.of<MyModel>(context).appModule;
    return BaseWidget<MyPageViewModel>(
        onModelReady: (model) => model.fetchData(module),
        model: MyPageViewModel(api: Provider.of(context)),
        builder: (context, model, child) => model.busy
            ? Center(
                child: CircularProgressIndicator(),
              )
            : Scaffold(

When the module changes I wanted my data to be fetched again, but I see the BaseWidget is only being rebuilt, without calling the onModelReady. I guess this is because the viewModel has not been disposed, right?

How can I approach these scenario?

27-location-service main.dart The return type 'Stream<userLocation> is not a StreamController<userLocation> as defined by anonmyous closure

I am getting error at this line

@OverRide
Widget build(BuildContext context) {
return StreamProvider(
builder: (context) => LocationService().locationStream,
child: MaterialApp(title: 'Flutter Demo', home: HomeView()));
}

012-provider-architecture-pt2 - Number of Like in HomeView does not update automatically

The 012-provider-architecture part 2 final could run smoothly on a real Android device.

When a post is selected and it goes to the PostListItem View then tap the Like button for a few times, the Like does increase in PostListItem View. However, it seems the notifyListeners() method has no effect when I go back to the HomeView using the back button . I need to refresh the page by drag down the scroll list again to reveal the updated Like number.

My flutter SDK version is 1.16.2-pre.41
LG D858HK (android-arm)

Hi guy, in in example 002-final-no-getit path library was not found

provider:
git:
url: https://github.com/rrousselGit/provider
ref: proxy-provider

tutorials 010 012 014 view rebuild many times

LoginView push to HomeView, HomeView push to PostView, loginView will rebuild

Request permission to translate your articles to Chinese

Hi Mackier,

I am Elton from Hong Kong. Thanks for sharing the brilliant architecture and design of using provider package. Beforehand, I found there are quite a lot of ways of implementing provider package, but your is the first that implements this in an elegant way, and your posts and YouTube videos explained it well.

As a result, I want to translate your posts into Traditional Chinese and post them onto Medium (and of coz are free for the public) so that more ppl can know about this design.

Thanks,
Elton Lau

graphql-flutter

hey there. first of all, thank you so much for you effort on bringing flutter architecture to the next level.

I've just followed your tutorial #14 and i am trying to implement graphql-flutter within the proposed architecture. I have a service (ApiGraphqlService) which depends on the AuthenticationService and should be consumed in e.g. PostViewModel.

I've already found a possible solution: zino-hofmann/graphql-flutter#339. But i thought it could be done a more "proper way"?

039 Unhandled Exception: NoSuchMethodError: Class 'NoSuchMethodError' has no instance getter 'message'.

E/flutter (14386): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: Class 'NoSuchMethodError' has no instance getter 'message'.
E/flutter (14386): Receiver: Instance of 'NoSuchMethodError'
E/flutter (14386): Tried calling: message
E/flutter (14386): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
E/flutter (14386): #1 FirestoreService.getUser
package:pasabay_app/services/firestore_service.dart:21
E/flutter (14386):
E/flutter (14386): #2 AuthenticationService._populateCurrentUser
package:pasabay_app/services/authentication_service.dart:74
E/flutter (14386): #3 AuthenticationService.isUserLoggedIn
package:pasabay_app/services/authentication_service.dart:68
E/flutter (14386):
E/flutter (14386): #4 StartUpViewModel.handleStartUpLogic
package:pasabay_app/viewmodels/startup_view_model.dart:14
E/flutter (14386): #5 StartUpView.build.
package:pasabay_app/…/views/startup_view.dart:13
E/flutter (14386): #6 _ViewModelProviderState.initState (package:provider_architecture/viewmodel_provider.dart)

Layout Templates for Flutter Web error in NavigationService goBack

Hello. Thanks for your videos.
The function goBack class NavigationService in project Layout Templates for Flutter Web (part 3) I'm getting an error that says:

{
	"resource": ".../flutter-tutorials/037-advanced-web-navigation/00-starting/lib/services/navigation_service.dart",
	"owner": "dart",
	"code": "return_of_invalid_type",
	"severity": 8,
	"message": "A value of type 'void' can't be returned from method 'goBack' because it has a return type of 'bool'.",
	"source": "dart",
	"startLineNumber": 11,
	"startColumn": 12,
	"endLineNumber": 11,
	"endColumn": 43,
	"tags": []
}

Can you please tell me why this is going on? Thank you in advance.

Error in base widget.

The following assertion was thrown building BaseWidget<LoginViewModel>(dirty, state: _BaseWidgetState<ChangeNotifier>#8af6b):
type '(BuildContext, LoginViewModel, Widget) => SingleChildScrollView' is not a subtype of type '(BuildContext, ChangeNotifier, Widget) => Widget'

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class BaseWidget<T extends ChangeNotifier> extends StatefulWidget {
  final Widget Function(BuildContext context, T model,Widget child) builder;
  final T model;
  final Widget child;
  final Function(T) onModelReady;
  final Function(T) onModelDestroy;
  BaseWidget({Key key, this.builder, this.model, this.child,this.onModelReady,this.onModelDestroy}) : super(key: key);

  @override
  _BaseWidgetState createState() => _BaseWidgetState();

}

class _BaseWidgetState<T extends ChangeNotifier> extends State<BaseWidget<T>> {
  T model;

  @override
  void initState() {
    model = widget.model;
    if(widget.onModelReady!=null){
      widget.onModelReady(model);
    }
    super.initState();
  }

  @override
  void dispose() {
    if(widget.onModelDestroy!=null){
      widget.onModelDestroy(model);
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>.value(
      value: model,
      child: Consumer<T>(
        builder: widget.builder,
        child: widget.child,
      ),
    );
  }
}

Login.dart

@override
  Widget build(BuildContext context) {
    return BaseWidget<LoginViewModel>(
      model: LoginViewModel(useCase: Provider.of(context)),
      builder: (context, model, child) {
        return SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Form(
            key: formKey,
            autovalidate: _autoValidate,
            child: Column(
              children: <Widget>[
                _loginTitle(),
                _buildUserName(),
                _buildPassword(),
              ],
            ),
          ),
        );
      },
    );
  }

Items getting disposed when using two or more slivers or listview builders while using Provider

I'm trying to implement two sliver widgets within a custom scroll view, and I'm facing a problem with the state of the data being passed in the Listview Builder which is the same case with the
sliverbuilderlist once I scroll down and come back up the items in the list are disposed and hence I'm getting an error. This is happening only when I use two or more sliver widgets together, the sliver list on its own is fine, right now I'm implementing a collapsable sliverappbar with two tabs, and I'm passing a ListviewBuilder two one of the tabs, and I get an error when I scroll down and up again after a few seconds, please help me understand the problem.

I tried keeping it alive with keepalive mixin but it didn't work

feed[i] paints objects from the Provider Feed

class FeedItemScreen extends StatefulWidget {
  @override
  _FeedItemScreenState createState() => _FeedItemScreenState();
}

class _FeedItemScreenState extends State<FeedItemScreen> with  AutomaticKeepAliveClientMixin<FeedItemScreen>
{
  @override
  Widget build(BuildContext context) {
    final feedData = Provider.of<Feed>(context);
    final feed = feedData.items;

    return ListView.builder(
           itemBuilder: (context, i) => ChangeNotifierProvider(
              builder: (ctx) => feed[i],
              child: FeedsItem(),
            ),
            itemCount: feed.length,
    );
  }

  @override
  bool get wantKeepAlive => true;
}


inside Defaulttabcontroller : I'm passing FeedScreen(), which builds the list to one of the tabs 

  body:  TabBarView(
              children: <Widget>[
                 new NotificationScreen(),
                new FeedScreen(),

I'm using the feed[i] items in another file to access the constructor of the FeedItem and its elements and display the relevant data

/flutter ( 5092): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5092): The following assertion was thrown building NotificationListener:
I/flutter ( 5092): A FeedItem was used after being disposed.
I/flutter ( 5092): Once you have called dispose() on a FeedItem, it can no longer be used.

FeedItem is the class which my data is passed to, and this is the error I'm getting, I'm getting the same error when using multiple slivers within a single viewport. or multiple scrollable list views bascially

011-network-sensitive-ui, the StreamProvider already deprecated builder and change it to create.

In Provider 3.2.0, it's already can not be used "builder" in StreamProvider, the error will come out, please change this to create, thanks a lot.

021-completer_dialogs - Error on locator.dart

How can I resolve this error? Thank you!

Single model over multiple pages

How to use the same model in multiple pages

I am making a cryptocurrency app and following your provider guide 010 using get it
For the main page, I made a HomeModel class with a list of Coin instances and used it in dashboard page by using BaseView<HomeModel>.
Now, for adding another item to list in HomeModel I move on to another page add_coin where also I use BaseView<HomeModel>.
But here if I register it using locator.registerLazySingleton(()=>HomeModel()); it gives error HomeModel was used after being disposed.
And if I register it using factory it does not change the value in initial page

You can see the code here:
https://github.com/Ayush789/crypto_provider

033 Episode_Exception caught by rendering library

══ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 6.0 pixels on the bottom.

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

037 - Advanced URL navigation Navigator issue

Hi, there is no template to report issues so I will jump right to it. With the latest changes and with adding navigatorKey to the MaterialApp, now we cannot easily close scaffold drawer.

Most users want to close the drawer onTap and be redirected. In the latest code if one tries to close the drawer like this:

    return GestureDetector(
      onTap: () {
        // DON'T EVER USE A SERVICE DIRECTLY IN THE UI TO CHANGE ANY KIND OF STATE
        // SERVICES SHOULD ONLY BE USED FROM A VIEWMODEL

        // NEW LINE ADDED TO CLOSE DRAWER
        Navigator.of(context).pop();
        locator<NavigationService>().navigateTo(navigationPath);
      },

it will end up with the following error:

Navigator operation requested with a context that does not include a Navigator.

Can you please direct me to a solution of this issue. There is no exposed DrawerController and I can only open the drawer programatically and I am not aware of other solution to close the drawer besides the above-mentioned one (link below):
https://api.flutter.dev/flutter/material/Drawer-class.html

045-paginated-realtime-firestore Stream if is empty

hi,

Im trying this code in this page https://www.filledstacks.com/post/how-to-perform-real-time-pagination-with-firestore/

 pagePostsQuery.snapshots().listen((postsSnapshot) {
      if (postsSnapshot.documents.isNotEmpty) {

if empty, the stream connectionState always remains waiting ?
if there is no data how can i solve this ?
Thank you

Dispose Issue on Tab Container

Demo: https://github.com/VictorUvarov/disposeDemo

• The disposing issue occurs when flipping through the tabs quickly. (May take a couple of pages to occur).

Tutorial 10, final-no-getit git issue with package

Hello, I'm having this issue. Might be about git ref of provider package.

Git error. Command: git rev-list --max-count=1 proxy-provider
fatal: ambiguous argument 'proxy-provider': unknown revision or path not in the working tree.
Use '--' to separate paths from revisions, like this:


'git <command> [<revision>...] -- [<file>...]'

pub get failed (69) -- attempting retry 5 in 16 seconds...

033_Drawer not showing

Question: Business logic of item in viewmodel list

Using your architecture what would you recommend for handling the business logic of an item in the view model's list. For example, using the post view, I would like to add a checkbox that when clicked will change background for this specific post to green. Preferably I'd like to include isChecked bool in the post model rather than creating another viewmodel and using post.id as a reference like the likebutton.

Mouse Tracking issue

- i have facing below error. check my code.

═══════════════════════════════════════════════════════
════════ Exception caught by gesture library ═══════════════════════════════════════════════════════
The following JSNoSuchMethodError was thrown while routing a pointer event:
NoSuchMethodError: invalid member on null: 'style'

When the exception was thrown, this was the stack:
package:flutter_demo/extensions/HoverExtensions.dart 12:46
package:flutter/src/rendering/proxy_box.dart 2742:22
package:flutter/src/gestures/mouse_tracking.dart 434:21 _dispatchDeviceCallbacks
package:flutter/src/gestures/mouse_tracking.dart 250:9
package:flutter/src/gestures/mouse_tracking.dart 365:26

════════ (2) Exception caught by scheduler library ═════════════════════════════════════════════════
Assertion failed: org-dartlang-app:///packages/flutter/src/gestures/mouse_tracking.dart:454:12
!_duringDeviceUpdate
is not true
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (3) Exception caught by gesture library ═══════════════════════════════════════════════════
Assertion failed: org-dartlang-app:///packages/flutter/src/gestures/mouse_tracking.dart:330:12
!_duringDeviceUpdate
is not true
═══════════════════════════════════════════════════════

My Code

HoverExtensions.dart

extension HoverExtensions on Widget {
static final appContainer =
html.window.document.getElementById('app-container');

Widget get showCursorOnHover {
return MouseRegion(
child: this,
onHover: (event) => appContainer.style.cursor = 'pointer',
onExit: (event) => appContainer.style.cursor = 'default',
);
}

Widget get moveUpOnHover {
return TranslateOnHover(
child: this,
);
}
}

TranslateOnHover.dart

class TranslateOnHover extends StatefulWidget {
final Widget child;

const TranslateOnHover({Key key, this.child}) : super(key: key);

@OverRide
_TranslateOnHoverState createState() => _TranslateOnHoverState();
}

class _TranslateOnHoverState extends State {
final nonHoverTransform = Matrix4.identity();
final hoverTransform = Matrix4.identity()..translate(0, -5, 0);

bool _hovering = false;

@OverRide
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (event) => _mouseEnter(true),
onExit: (event) => _mouseEnter(false),
child: AnimatedContainer(
duration: Duration(milliseconds: 200),
child: widget.child,
transform: _hovering ? hoverTransform : nonHoverTransform,
),
);
}

_mouseEnter(bool hovering) {
setState(() {
_hovering = hovering;
});
}
}

"architecutre" instead of "architecture"

Hi! if you ever find some time, you may want to fix the spelling error in project No 10.

architecutre --> architecture

From what I saw, you use it consequently throughout the code (which should make it work - not tested), but since you use the proper spelling the the Readme, it might still cause confusion aat some point and is probably a potential source of error.

Update repo with Provider 4

Hi,

@FilledStacks Thanks for the awesome repo. Any plans for updating the repo with updated provider package?

validationMessage not implemented in 014

https://github.com/FilledStacks/flutter-tutorials/blob/master/014-provider-v3-updates/2-final/lib/ui/views/login_view.dart

Thank you so much for creating these tutorials, unbelievably helpful! Providers is totally awesome and this example helps me understand it so much!

Would you mind implementing validationMessage in 014? I'm having trouble understanding the logic since BaseWidget gets passed in the child now and it doesn't cause it to render when the message changes.

Also, you're missing a dispose() of the controller in the above file.

I'm having issues with the architecture provider v3 tutorial

Hello, I followed your tutorial, change the deprecated aspects for the correct ones and now I'm having this issue that Idk how to fix:

I/flutter (17376): The following assertion was thrown building BaseWidget<LoginViewModel>(dirty, state:
I/flutter (17376): _BaseWidgetState<ChangeNotifier>#04890):
I/flutter (17376): type '(BuildContext, LoginViewModel, Widget) => Scaffold' is not a subtype of type '(BuildContext,
/flutter (17376): ChangeNotifier, Widget) => Widget'

sample infinite list with provider

hi, any sample for infinite list with provider ? i have trying to implement provider with your architecture, but get some trouble with infinite list

Issue with Models in provider architecture

HEllo, I've following your awsome tutorials for a while and I've having this issue with de provider architecture:
[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: A SignInModel was used after being disposed. E/flutter (32380): Once you have called dispose() on a SignInModel, it can no longer be used.

Idk if you can help me with that.

Dispose issue in feedback tutorial

Hi @FilledStacks ,

I would like to thank you for the awesome job you're doing. I love the architecture you proposed.
I'm trying to implement the real stats tutorial using get it and provider.

The issue is that using registerFactory I get the following: "Stream has already been listened too."

I followed your suggestion on the Dispose issue in provider architecture part 2, and I implemented the following code:

StreamSubscription<List<UserFeedback>> subscription;

  FeedbackViewModel() {
    subscription = _firestoreService.feedback.listen(_onFeedbackUpdated);
  }

  @override
  void dispose() {
    subscription.cancel();
    super.dispose();
  }

I'm still having the same issue.

Now, if I implement the following code: locator.registerSingleton(FeedbackViewModel()); ,
remove the dispose method and the subscription variable, I get the following error:

"A FeedbackViewModel was used after being disposed. Once you have called dispose() on a FeedbackViewModel, it can no longer be used."

Did you find a way around this bug?

Regards,

A value of type 'void' can't be returned from method 'pop' because it has a return type of 'bool'.

In tutorial 043-firebase-push-notifications , the pop() method of navigation_service.dart, it throws A value of type 'void' can't be returned from method 'pop' because it has a return type of 'bool'.

It seems that the _navigationKey.currentState.pop() would return void instead of bool

ScreenTypeLayout isn't defined for the type 'NavBar'

Hi Dane, many thanks for your great tutorials they have made learning Flutter fun!

I am having an issue following along with your #33 Responsive UI Web App tutorial. Once I attempt to pass the ScreenTypeLayout I am getting a error of "The method 'ScreenTypeLayout' isn't defined for the type 'NavBar'.\nTry correcting the name to the name of an existing method, or defining a method named 'ScreenTypeLayout'. Is there an earlier tutorial referencing the ScreenTypeLayout that I missed prior? Thanks.

Unhandled Exception: Once you have called dispose() it can no longer be used.

Hi,

Im getting the following error messages after implementing the CRUD code:

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: A HomeViewModel was used after being disposed.
E/flutter (13683): Once you have called dispose() on a HomeViewModel, it can no longer be used.

Do you have any suggestions on how to solve this?

Thanks!

021 & 037: how to manage the onGenerateRoute

Hi @FilledStacks ,

How to manage the onGenerateRoute to cater for both case 021 & 037?

021 - Completer dialog
037 - Advance url for web

Is creating HomeViewModel instance like this correct?

flutter-tutorials/031-responsive-architecture-provider/02-final-state-implementation/lib/views/home/home_view.dart

Line 15 in de32c20

viewModel: HomeViewModel(),

change Text string

flutter-tutorials/014-provider-v3-updates/2-final/lib/ui/views/post_view.dart

Line 9 in e3d2345

body: Center(child: Text('Home View')));

Change Text to Text('Post View').

022-lifecycle-manager

the repo lib/locator.dart:6:17 went wrong, the wrong message was:

lib/locator.dart:6:17: Error: Method not found: 'GetIt'.
GetIt locator = GetIt();

I dont know how to deal with it.

Dispose issue in provider architecture part 2

Hi,

In provider architecture pt2 there is an issue when views and widgets derived from BaseView are disposed.

To reproduce:
Launch the app, login to fetch and show posts on the homeview then go back to login screen.
You will see the FlutterError exception in the debug console content thrown by ChangeNotifier.

I/flutter (30244): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════

I/flutter (30244): The following assertion was thrown while finalizing the widget tree:

I/flutter (30244): A HomeModel was used after being disposed.

I/flutter (30244): Once you have called dispose() on a HomeModel, it can no longer be used.

I/flutter (30244):

I/flutter (30244): When the exception was thrown, this was the stack:

I/flutter (30244): #0      ChangeNotifier._debugAssertNotDisposed.<anonymous closure> 

I/flutter (30244): #1      ChangeNotifier._debugAssertNotDisposed 

I/flutter (30244): #2      ChangeNotifier.dispose 

I/flutter (30244): #3      _BaseViewState.dispose 

I/flutter (30244): #4      StatefulElement.unmount 

I/flutter (30244): #5      _InactiveElements._unmount 

I/flutter (30244): #6      _InactiveElements._unmount.<anonymous closure> 

I/flutter (30244): #7      ComponentElement.visitChildren 

I/flutter (30244): #8      _InactiveElements._unmount 
...

why you use StreamProvider in providerV3 sample code

could you describe me why you use StreamProvider for User
?

List<SingleChildCloneableWidget> uiConsumableProviders = [
  StreamProvider<User>(
    builder: (context) => Provider.of<AuthenticationService>(context, listen: false).user,
  )
];

Awesome Flutter

This repo is very welcome on https://github.com/Solido/awesome-flutter !

This expression has type 'void' and can't be used. return navigatorKey.currentState.pop();

in 034-flutter-web-part3-template-layouts i am getting this error plzz help me how to resolve this.

034 Flutter Web Template.... pop issue

Anychance someone could look at tis issue...

Dane Mackier

https://stackoverflow.com/questions/60152366/flutter-web-layout-templates-pop-returning-void-but-expects-bool

I am trying to follow along on the 3rd video of the tutorial