Followed documentation not sure what could be causing this.

setState() or markNeedsBuild() called during build.


This _DefaultInheritedProviderScope<ProfileViewModel> widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.

The following exception is thrown when clicking on a custom snackbar without specifying the optional onTap parameter:

The following _CastError was thrown while handling a gesture:
Null check operator used on a null value

When the exception was thrown, this was the stack
#0      SnackbarService.showCustomSnackBar.<anonymous closure>
package:stacked_services/…/snackbar/snackbar_service.dart:191
#1      SnackbarController._getBodyWidget.<anonymous closure>.<anonymous closure>
package:get/…/snackbar/snackbar_controller.dart:236
#2      GestureRecognizer.invokeCallback
package:flutter/…/gestures/recognizer.dart:198
#3      TapGestureRecognizer.handleTapUp
package:flutter/…/gestures/tap.dart:613
#4      BaseTapGestureRecognizer._checkUp
package:flutter/…/gestures/tap.dart:298
#5      BaseTapGestureRecognizer.acceptGesture
package:flutter/…/gestures/tap.dart:269
#6      GestureArenaManager.sweep
package:flutter/…/gestures/arena.dart:157
#7      GestureBinding.handleEvent
package:flutter/…/gestures/binding.dart:449
#8      GestureBinding.dispatchEvent
package:flutter/…/gestures/binding.dart:425
#9      RendererBinding.dispatchEvent
package:flutter/…/rendering/binding.dart:329
#10     GestureBinding._handlePointerEventImmediately
package:flutter/…/gestures/binding.dart:380
#11     GestureBinding.handlePointerEvent
package:flutter/…/gestures/binding.dart:344
#12     GestureBinding._flushPointerEventQueue
package:flutter/…/gestures/binding.dart:302
#13     GestureBinding._handlePointerDataPacket
package:flutter/…/gestures/binding.dart:285
#17     _invoke1 (dart:ui/hooks.dart:170:10)
#18     PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:331:7)
#19     _dispatchPointerDataPacket (dart:ui/hooks.dart:94:31)
(elided 3 frames from dart:async)
Handler: "onTap"

Here's line 191 in snackbar_service.dart:

onTap: (object) => onTap!(),

And cheers for all your work on Stacked -- it's great

The plugin flutter_statusbarcolor_ns uses a deprecated version of the Android embedding. To avoid unexpected runtime failures, or future build failures, try to see if this plugin supports the Android V2 embedding. Otherwise, consider removing it since a future release of Flutter will remove these deprecated APIs. If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration. i was going to open an issue to the author but he closed the issue section. fyi this happened in the latest flutter update 2.5

Motivation

A question that comes up often is how to deal with localisation in stacked. I try my best to make stacked something that builds on top of Flutter meaning that everything you can currently do in Flutter should be able to be done the same using stacked. That means localisation can work exactly the same as well. Given that we've implemented localisation 3 times, once with my way through a LocalisationService and twice using the Flutter style setup I have clear examples of how I'd like to implement localisation.

Description

This issue will details what I am thinking of implementing in hopes that I can get feedback on certain parts or pointers to work with. The way that I plan an implementation or package is by defining exactly how I'd like to use it in the application. Then I reverse engineer that code to produce concrete details for the implementation

Dream Localisation Usage

I would personally like localisation to be available in the models and services for three reasons:

1. Easily rebuild the UI if the strings have been updated
2. Allow for easier translation of exceptions
3. Allow translation of strings with String reliant services like the dialog service

These are a few examples of what I'd like to do in code.

1. Translation in the View (UI) files

 Widget build(BuildContext context) {
    return ViewModelBuilder<HomeViewModel>.reactive(
      builder: (context, model, child) => Scaffold(
        body: Text(model.translate(HomeViewStrings.title))
      ),
      viewModelBuilder: () => HomeViewModel(),
    );
  }

2. Use translated exceptions (if needed)

throw Exception(translate(HomeViewScreen.feedFetchFailedException));

3. Show dialog

_dialogService.showDialot(title: translate(HomeViewScreens.dialogSuccessTitle));

That is how i'd like to use it in code. This is obviously personal opinion but I think if I look at it objectively that it's the cleanest and least intrusive approach to localisation. So lets reverse engineer this syntax and figure out what's required to build this localisation service.

Implementation

The first thing we'll need it the functionality to get strings from the ViewModel. This will be a simple function that indexes into the LocalisationService and requests the string for a key.

class LocalisedViewModel {

String translate(String key) => _localisationService[key];

}

This means in the localisation service we would need the following

class LocalisationService {
  // this value will be reloaded when the app is started up or when it comes back from the background.
  Map<String, String> _localisedStrings;

  /// Returns the value from the localisedStrings dictionary or the key that was requested.
  String operator[](String key) => _localisedStrings[key] ?? key;

  Future initialise() {
    // get the current locale
    // load the strings from disk into the _localisedStrings
  }
}

This is an example of how a language file would look that would be used with the keys above

{
  "HomeViewStrings" : {
     "title" : "Home View Title",
     "dialogSuccessTitle" : "You have successfully done something on HomeView",
     "feedFetchFailedException" : "We could not fetch your home feed. Please check connection and try again",
  }
}

The type safe String keys generated will look like this.

// This title comes from the object in the json file above
class HomeViewStrings {
  static String title = 'title';
  static String dialogSuccessTitle =  'dialogSuccessTitle';
  static String feedFetchFailedException = 'ffeedFetchFailedException';
}

Dynamic Values

There are other parts of the service that need to be implemented as well like dynamic value substitution which can be done by passing in a set of replacements into the translate function. If you take an example string like this

{
  "CounterViewStrings" : {
     "timesCounted" : "You have tapped {0} times",
  }
}

we could change the translate function to this.

String translate(String key, {List<dynamic> replacements} {
  var stringFromFile = _localisationService[key];
  for(int i = 0; i < replacements.length; i++) {
    stringFromFile = stringFromFile.replace('{$i}, replacements[i]);
  }

  return stringFromFile;
}

This would allow us to handle dynamic values by using a positioned based replacement function.

Conclusion

That's basically it. The things that would have to be done for this package to be complete is:

• [x] Create the localisation service
• [x] Create a generator to generate the String key files
• [x] Write the Readme instructions
• [x] publish the package

I am not sure if this should be a feature request as I might be misunderstanding the proper usage of the stacked package in this scenario.

Essentially: what do I do if I need a view model that reacts to the widget tree.

Say, I have the following:

// A widget contains a ViewModelBuilder
viewModelBuilder: () => AppleViewModel(apples)

Now, the AppleViewModel will be initalized with 10. However, the AppleWidget might change and have 11 apples at a later point. Unfortunately, the view model needs to act differently with 11 apples. However, the viewModelBuilder will not be called again.

How do I update a view model based on a value that changed in the widget tree?

To add a little bit of context, the apples value would also be controlled by a view model. Thus, I basically want to update a view model from a parent view model.

If this is not yet implemented and I am not missing how to properly use the architecture, this would be a feature request 🙂 (let me know if my train of thought here is incorrect altogether)

StatefulWidget

Usually, this task would be accomplished using a StatefulWidget and to my understanding, I should not use them with stacked. In a StatefulWidget, I have access to didChangeDependencies, which allows me to solve the above problem using Provider/InheritedWidget or I can use didUpdateWidget if the value is passed as a parameter.

Hello there,

I am using the navigation service in my app..

I have a view (QR scanner view) that is accessable from 2 places..

the first place is as a startup view,,, in this case I am showing a button to take me to the dashboard..

the second place is in the dashboard... in this case I am not showing a button to take me to the dashboard, I am just using the back button.

when I access the view from the dashboard simply by calling locator<NavigationService>().navigateTo(QRScannerRoute);

In the QRScannerView I want to check if my currentRoute is empty "which means It is the startup view" Show the link to take me to the dashboard... but if my current route is not empty which indicates I accessed it from the dashboard just use the default backButton... But in all the cases currentRoute is always empty,,, same applies to the previous route..

To summarise...

locator<NavigationService>().navigateTo(QRScannerRoute);

leads to empty currentRoute in the target view always.

also I couldn't find a way to access the navigation stack to check if it is empty or not..

Since upgrading to the latest version of stacked and using only stacked for routing and dependency injection I can't run the app on release mode in flutter web. I've added the error logs obtained from the web console. App works perfectly in debug mode.

main.dart.js:40167 Uncaught TypeError: Cannot read property 'cy' of null at aNJ.a6L (main.dart.js:87425) at aNJ.$1$3$instanceName$param1$param2 (main.dart.js:87427) at aNJ.$3$instanceName$param1$param2 (main.dart.js:87430) at aAv.$1$0 (main.dart.js:112800) at Object.buV (main.dart.js:15228) at main.dart.js:23709 at aZ6.a (main.dart.js:3939) at aZ6.$2 (main.dart.js:39137) at Object.n (main.dart.js:3925) at Object.b_m (main.dart.js:23717)

Hi,

As the title implies, Streams are not changing when calling notifySourceChanged. Only after killing the app the streams change.

Regards,

Edit:

I'm using firestore to get 2 streams. The issue here is that if I logout and login with a different user, the stream is giving me the previous user. If I add a value, the stream gets the correct stream (new user). I'm using the exact example from the repo but with firestore.

This PR has the following modifications:

• Modified the dialog service so that it can handle platform choosing for dialog designs 👍, more info in the file where it is documented 📜✨ • Modified example app to show how the dialog service works now. 🚀

I'm getting an error when launching

flutter pub run build_runner watch --delete-conflicting-outputs

Source code

pubspec.yaml

dependencies:
  ...
  stacked: ^2.1.3

  stacked_services: ^0.8.6

dev_dependencies:
  ...
  build_runner:

  stacked_generator: ^0.4.2

app.dart

@StackedApp(
  routes: const [
    const MaterialRoute(page: HomeView, initial: true),
  ],
)
class App {}

Logs

[INFO] Generating build script...
[INFO] Generating build script completed, took 772ms

[INFO] Setting up file watchers...
[INFO] Setting up file watchers completed, took 28ms

[INFO] Waiting for all file watchers to be ready...
[INFO] Waiting for all file watchers to be ready completed, took 198ms

[INFO] Initializing inputs
[INFO] Reading cached asset graph...
[INFO] Reading cached asset graph completed, took 111ms

[INFO] Checking for updates since last build...
[INFO] Checking for updates since last build completed, took 1.4s

[INFO] Running build...
[INFO] 1.2s elapsed, 1/2 actions completed.
[INFO] 2.4s elapsed, 1/2 actions completed.
[INFO] 3.5s elapsed, 1/2 actions completed.
[INFO] 4.5s elapsed, 1/2 actions completed.
[INFO] 20.3s elapsed, 1/2 actions completed.
[WARNING] No actions completed for 19.8s, waiting on:
  - stacked_generator:stackedFormGenerator on lib/app/app.dart

[SEVERE] stacked_generator:stackedRouterGenerator on lib/app/app.dart:

type '_CompactLinkedHashSet<String?>' is not a subtype of type 'Set<String>' in type cast
[INFO] Running build completed, took 21.1s

[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 89ms

[SEVERE] Failed after 21.2s

This PR has the following modifications:

• Added a new service to Stacked Services called TtsService, aka Text-To-Speech Service. • Modified example app to show how the TtsService works by creating a new screen. • Upgraded minSdkVersion to 21.

All those things are under one commit since they are related and would not make sense to make each one as a separate commit.

When creating a flutter project with stacked cli - the dialogs & bottomsheets are not configured via @StackedApp - instead they are present inside ui/setup

@StackedApp( dialogs: [ // @stacked-dialog StackedDialog(classType: InfoAlertDialog), ], bottomsheets: [ // @stacked-bottomsheet StackedBottomsheet(classType: NoticeSheet), ],

Currently Navigation works fine also on web, however there is no support to protect named routes in Flutter Web. Go_router provides a redirection function on each new navigation event or at the route level for a specific route. We use Stacked in a corporate environment and would love to use it in our Web projects too. Currently as a workaround we are using go_router in our Web Projects. Since Flutter 3 with better support for Web, Flutter Web gains more traction therefore it would be super nice if Stacked provides support for this and general Web support. I would offer myself to implement the feature when being guided from the stacked team. I need to understand how it works at the moment and would love to discuss how this can be implemented, maybe in a call to get deeper insights from stacked navigation. Cheers!

When using a default snack bar via the showSnackbar method the following SnackbarConfig values are not used:

• icon
• maxWidth
• padding
• borderRadius
• borderColor
• borderWidth
• leftBarIndicatorColor
• boxShadows
• backgroundGradient
• dismissDirection
• showProgressIndicator
• progressIndicatorController
• progressIndicatorBackgroundColor
• progressIndicatorValueColor
• snackStyle
• forwardAnimationCurve
• reverseAnimationCurve
• animationDuration
• overlayBlur
• overlayColor
• userInputForm

It would be nice to be able to set these values using SnackbarConfig and have them apply to the basic showSnackbar without having to create a custom snack bar.

I am just starting to use stacked and I am really enjoying it. tks for doing that! Previously I was using code I got from https://github.com/Kavantix/hn_state_example.git, which has a similar approach, and I think there are a few good things there that seems easy to implement here. I say 'seems' because I am kinda new to programming and so I might be missing some stuff. For example, the view model builder has some optional params like loaderBuilder, errorBuilder, showLoader, showError that simply reflects on the build method, but it makes it easier to deal with those situations:

  @override
  Widget build(BuildContext context) {
    _model.refreshProvided(context);
    return (widget.showLoader ?? false || widget.showError ?? false)
        ? AnimatedSwitcher(
            duration: const Duration(milliseconds: 330),
            child: _model.isLoading && (widget.showLoader ?? false)
                ? widget.loaderBuilder?.call(context) ??
                    const Center(
                      child: CircularProgressIndicator(),
                    )
                : _model.hasError && (widget.showError ?? false)
                    ? widget.errorBuilder?.call(context, _model) ??
                        ConnectionErrorIndicator(model: _model)
                    : widget.builder(context, _model, widget.child),
          )
        : widget.builder(context, _model, widget.child);
  }

class ConnectionErrorIndicator extends StatelessWidget {
  final BaseModel model;
  final double topPadding;

  const ConnectionErrorIndicator({
    Key key,
    @required this.model,
    this.topPadding = 24,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: topPadding),
          const Icon(Icons.error),
          const SizedBox(height: 16),
          Text(
            Strings.of(context).errors.failedLoading,
            textAlign: TextAlign.center,
          ),
          ElevatedButton(
            onPressed: model.retryLoading,
            child: Text(Strings.of(context).errors.tryAgain),
          ),
        ],
      ),
    );
  }
}

Also, as you can see from about, the base model that extends changenotifer has a retryLoading method:

abstract class BaseModel extends ChangeNotifier implements Providable {
  bool _isLoading = false;
  bool get isLoading => _isLoading;

  bool _hasError = false;
  bool get hasError => _hasError;

  VoidCallback _retryCallback;

  var _isDisposed = false;

  bool startLoading() {
    if (isLoading || hasError) return false;
    _isLoading = true;
    notifyListeners();
    return true;
  }

  void doneLoading() {
    assert(isLoading);
    _isLoading = false;
    notifyListeners();
  }

  void loadingFailed(VoidCallback retryCallback) {
    assert(isLoading);
    _retryCallback = retryCallback;
    _isLoading = false;
    _hasError = false;
    notifyListeners();
  }

  void retryLoading() {
    if (!hasError || _retryCallback == null) return;
    _hasError = false;
    _retryCallback();
    _retryCallback = null;
    notifyListeners();
  }

  @override
  @mustCallSuper
  void notifyListeners() {
    if (_isDisposed) return;
    super.notifyListeners();
  }

  @override
  @mustCallSuper
  void dispose() {
    _isDisposed = true;
    super.dispose();
  }

  @override
  void refreshProvided(BuildContext context) {}

  bool get usesAppLifecycle => false;

  void didChangeAppLifecycleState(AppLifecycleState state) {}
}

Similar to the views we should be able to scaffold bottom sheets with viewmodels and without. This command should:

• Create the new enum value (if there isn't one then create the enum)
• Register the builder to the setupBottomSheetsUi function
• Create the sheet view file with completer and request passed in
• Create the viewmodel for the sheet (If the option is true, by default it should be true)
• Create the viewmodel tests for the sheet if above is true