How show snacker (or push another page) in Flutter with Redux? - redux

Question

So I have a login page where the user enters the username and password, the code is below:
class LoginPage extends StatefulWidget {
#override
State<StatefulWidget> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
_ViewModel _viewModel;
TextEditingController _usernameController;
TextEditingController _passwordController;
#override
void initState() {
super.initState();
_usernameController = TextEditingController();
_passwordController = TextEditingController();
}
#override
Widget build(BuildContext context) {
return StoreConnector<AppState, _ViewModel>(
converter: (store) => _ViewModel.fromStore(store),
builder: (context, viewModel) {
_viewModel = viewModel;
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 40.0,
left: 16.0,
right: 16.0,
),
child: PrimaryTextField(
controller: _usernameController,
hintText: "Username",
),
),
Padding(
padding: EdgeInsets.only(
top: 40.0,
left: 16.0,
right: 16.0,
),
child: PrimaryTextField(
controller: _passwordController,
hintText: "Password",
obsecureText: true,
),
),
Container(
margin: EdgeInsets.only(top: 40.0),
child: _getLoginButtonOrProgress(),
),
],
),
);
},
);
}
_getLoginButtonOrProgress() {
return _viewModel.loadingData.status == LoadingStatus.LOADING
? PrimaryCircularProgress(
progressColor: Colors.blue,
)
: PrimaryButton(
text: "Login",
onPressed: () {
print('Clicking');
print(_usernameController.text);
print(_passwordController.text);
_viewModel.onLoginPressed(
username: _usernameController.text,
password: _passwordController.text,
);
},
);
}
}
class _ViewModel {
final LoadingData loadingData;
final Function({String username, String password}) onLoginPressed;
_ViewModel({
this.loadingData,
this.onLoginPressed,
});
factory _ViewModel.fromStore(Store<AppState> store) {
return _ViewModel(
loadingData: store.state.loginState.loadingData,
onLoginPressed: ({String username, String password}) {
store.dispatch(LoginAction(username: username, password: password));
},
);
}
}
When the button is pressed, LoginAction is dispatched, the middleware sends the http request and when the request is received LoginResponse is dispatched.
The problem I am facing is that how can I show a Snackbar when login result is received. The Snacker doesn't go into the widget tree during the build time, show can I do something out of the widget tree (after it has been built) when the application state changes.
Login Middleware:
class LoginMiddleware extends MiddlewareClass<AppState> {
Repository repository;
LoginMiddleware({
this.repository,
});
#override
void call(Store<AppState> store, action, NextDispatcher next) {
if (action is LoginAction) {
_sendLoginRequest(action, next);
}
}
_sendLoginRequest(LoginAction action, NextDispatcher next) async {
next(action);
var result = await repository.login(
username: action.username, password: action.password);
var responseAction;
if (result.status == Status.SUCCESS) {
responseAction = LoginResponseAction(isSuccessful: true);
} else {
responseAction = LoginResponseAction(isSuccessful: false);
}
next(responseAction);
}
}

Answer 1

What I do is using a Completer to go back into widget after dispatching an action.
You can check my answer here and see if it helps.