Flutter stateless UI life cycle - flutter

I have a Flutter app which is based on StatelessWidget. I saw an example with StatefulWidget which allows the programmer to perform some actions in the dispose() method. I am trying to see if the StatelessWidget also provides such feature?
import 'package:flutter/material.dart';
import 'routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
theme: ThemeData(
primarySwatch: colorCustom,
fontFamily: 'Roboto',
),
initialRoute: '/',
routes: routes,
);
}
}
UPDATED
import 'package:flutter/material.dart';
import 'routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Future<bool> _exitApp(BuildContext context) {
return showDialog(
context: context,
child: new AlertDialog(
title: new Text('Do you want to exit this application?'),
content: new Text('We hate to see you leave...'),
actions: <Widget>[
new FlatButton(
onPressed: () => Navigator.of(context).pop(false),
child: new Text('No'),
),
new FlatButton(
onPressed: () => Navigator.of(context).pop(true),
child: new Text('Yes'),
),
],
),
) ??
false;
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: WillPopScope(
child: MaterialApp(
theme: ThemeData(
primarySwatch: colorCustom,
fontFamily: 'Roboto',
),
initialRoute: '/',
routes: routes
),
onWillPop: () => _exitApp(context)
)
);
}
Hm, after updating the code, the AlertDialog does not pop up though?

The short answer is no, there is no method similar to dispose() available in a StatelessWidget since as the name suggests, it does not maintain a State.
The long answer is the dispose() mehtod -
The framework calls this method when this State object will never build again. After the framework calls dispose, the State object is considered unmounted and the mounted property is false. It is an error to call setState at this point.
This stage of the lifecycle is terminal: there is no way to remount a State object that has been disposed.
Since the StatelessWidget has no State associated with it, there is no dispose() method.
A similar solution for StatelessWidgets -
So what should we do if we want to run some code only after theStatelessWidgets are popped from the navigation stack or return some data from the StatelessWidget?
Well, this Flutter docmentation page has a this explained along with an example. Hope this helps!

Related

Flutter Navigator and Routing in separate files showing error: Could not find a generator for route RouteSettings("/details", null) in the _Widget

I am working on this Flutter app and trying to make routing works on separate files. Now I have a login page, and in it, there is a login button. When this login button is clicked, the app should navigate to the HomePage. I looked at a few tutorials, but they all put navigators and other widgets on the same page.
In my case, my file structure is:
and in routes.dart:
import 'package:flutter/material.dart';
import 'widgets/login.dart';
import 'widgets/homepage.dart';
void main() {
runApp(Nav2App());
}
class Nav2App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (context) => Login(),
'/homepage': (context) => HomePage(),
},
);
}
}
In login.dart:
child: TextButton(
style: ButtonStyle(
...
))),
child: const Text('Login'),
onPressed: () {
Navigator.pushNamed(
context,
'/homepage',
);
},
),
),
I think I need to do something in main.dart, like:
Widget build(BuildContext context) {
return MaterialApp(
// debugShowCheckedModeBanner: false,
title: 'Flutter Login Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyLoginPage(title: 'login page'),
routes: ***something***
);
}
You will want to replace the login page with the homepage. So use push replacement. That way they won’t get a back button in the top left.
As you said you updated the /details to /homepage in the comments above. But still not working make sure you do a full reload not just a hot reload.
Navigator.pushReplacementNamed(context, "/homepage");
Do not make a second material app in your your code like shows above. When you create another material app you also get a whole new navigator stack.
Use Scaffold instead. 1 material app is all you need.
class Nav2App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => Login(),
'/homepage': (context) => HomePage(),
},
);
}
}
There is no navigator for your /details name.
Change your login code like below:
child: TextButton(
style: ButtonStyle(
...
))),
child: const Text('Login'),
onPressed: () {
Navigator.pushNamed(
context,
'/homepage',
);
},
),
),

Show snack bar to handling missing URL receivers

I used the url_luncher package and it suggests handle the missing URL receiver in case of target platform can not handle the URL.
So I create a function to handle of onTap of CardTile widget and dial the phone number and if the target platform can not handle the request it shows a snake bar to inform the user in UI.
But I have two problems 1) if using an anonymous function I get a runtime error and my code would be wordly and long
Unhandled Exception: No ScaffoldMessenger widget found.
MyApp widgets require a ScaffoldMessenger widget ancestor.
The specific widget that could not find a ScaffoldMessenger ancestor was:
MyApp
The ancestors of this widget were:
[root]
Typically, the ScaffoldMessenger widget is introduced by the MaterialApp at the top of your application widget tree.
if use function name onTap of CardTile widget for example onTap : _urlLauncherFunction(context) I can not pass BuildContext context argument to the function and get a compile error
This expression has a type of 'void' so its value can't be used.
I could not figure out what did wrong so please guide and help me to solve this.
I paste the anonymous function version here
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
final telLaunchErrorSnackBar = SnackBar(
content:
Text('Your device can not handle this url'));
final String _myPhoneNumber = '+9812345678';
//use xml scheme to trigger error otherwise it should be tel
final Uri _telUri = Uri(scheme: 'xml', path: _myPhoneNumber);
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
CircleAvatar(
backgroundImage: AssetImage('images/image.jpg'),
),
Card(
child: ListTile(
leading: Icon(
Icons.phone,
),
title: Text(
'00 123 45657',
),
onTap: () async {
String telUri = _telUri.toString();
await canLaunch(telUri)
? await launch(telUri)
: ScaffoldMessenger.of(context)
.showSnackBar(telLaunchErrorSnackBar);
},
),
),
],
),
),
),
);
}
}
When I code as this , flutter throw a error.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// home: MyHomePage(title: 'Flutter Demo Home Page'),
home: Scaffold(
body: SafeArea(
child: Container(
alignment: Alignment.center,
child: GestureDetector(
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
onTap: (){
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('content')));
},
),
),
),
),
);
}
}
then I change
...
MaterialApp(
home:Scafford(...),
)
...
to
...
MaterialApp(
home:Home(),
)
...
class Home extends StatelessWidget {
#override
Widget build(BuildContext context){
return Scaffold(...);
}
}
It works.

AppWidget home not changing when state changes

Using Riverpod + StateNotifier but I think with other providers there is the same issue.
I have an authentication StateNotifier class and StateNotifierProvider and have wrapped the MaterialApp widget into a Riverpod Consumer to rebuild the complete app/widget tree when user is no longer authenticated.
As soon as I navigate with pushReplacementNamed to a third page and update the state of the authenticationStateNotifierProvider, I can see the build method of the consumer wrapping the App is triggered and the state is updated (print(state)) but the home page and widget tree is not rebuilt.
Sample app with 3 screen with the issue:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/all.dart';
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends ConsumerWidget {
#override
Widget build(BuildContext context, ScopedReader watch) {
final state = watch(authenticationNotifier.state);
print(state);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: state is Unauthenticated ? LoginScreen() : HomeScreen(),
onGenerateRoute: (RouteSettings settings) {
if (settings.name == '/second')
return MaterialPageRoute(builder: (_) => SecondScreen());
else
return MaterialPageRoute(builder: (_) => HomeScreen());
},
);
}
}
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HomeScreen'),
),
body: Column(
children: [
MaterialButton(
child: Text('Logout'),
onPressed: () => context.read(authenticationNotifier).toggle(),
),
MaterialButton(
child: Text('Second'),
onPressed: () => Navigator.pushReplacementNamed(
context,
'/second',
),
),
],
),
);
}
}
class SecondScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SecondScreen'),
),
body: MaterialButton(
child: Text('Logout'),
onPressed: () => context.read(authenticationNotifier).toggle(),
),
);
}
}
class LoginScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('LoginScreen'),
),
body: MaterialButton(
child: Text('Login'),
onPressed: () => context.read(authenticationNotifier).toggle(),
),
);
}
}
// Controller.
final authenticationNotifier =
StateNotifierProvider((ref) => AuthenticationNotifier());
class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
AuthenticationNotifier() : super(Unauthenticated());
void toggle() {
state = state is Unauthenticated ? Authenticated() : Unauthenticated();
}
}
// State.
abstract class AuthenticationState {}
class Authenticated extends AuthenticationState {}
class Unauthenticated extends AuthenticationState {}
If you test the app you will see state management works between login and home page as expected with the code, but as soon as you navigate to the second screen form the home page and press the logout button, state is changed on the App widged but widget tree is not updated.
The problem is in your onGenerateRoute you are always redirecting to the HomeScreen in your else case. The home property on MaterialApp is only called when the app first opens. So, to truly fix your problem (I saw this commit in your repo, which is a workaround that won't work if your user's session were invalidated externally), you should add something like the following:
home: state is Unauthenticated ? LoginScreen() : HomeScreen(),
onGenerateRoute: (RouteSettings settings) {
if (settings.name == '/second')
return MaterialPageRoute(builder: (_) => SecondScreen());
else
return MaterialPageRoute(builder: (_) => state is Unauthenticated ? LoginScreen() : HomeScreen());
},
I think that should work for you.

Flutter changing Text value using RiverPod State management

In this below code i made simply code to change Text widget string, default string can be shown into Text widget but when i try to click FloatingActionButton is doesn't change.
clicking on HotReload cause chage it to new value, where i should change to resolve this issue?
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/all.dart';
class MyString extends StateNotifier<String> {
MyString() : super('Hello World');
void change(String text) => state = text;
}
final showHello = StateNotifierProvider<MyString>((ref) => MyString());
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text('SAMPLE'),
),
body: Center(
child: Consumer(
builder: (context, watch, _) {
final s = watch(showHello).state;
return Text(s);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read(showHello).change('Clicked On Button'),
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
),
);
}
}
April 2021 Update: As of Riverpod >= 0.14.0 the syntax has now been updated (scroll down for original answer). The following demonstrates how the example code provided in the question could be converted to the updated syntax:
import 'package:flutter/material.dart';
// Note importing hooks_riverpod/all.dart is now deprecated
import 'package:hooks_riverpod/hooks_riverpod.dart';
class MyString extends StateNotifier<String> {
MyString() : super('Hello World');
void change(String text) => state = text;
}
// Note the extra parameter, String, to specify what is provided by the Notifier
final showHello = StateNotifierProvider<MyString, String>((ref) => MyString());
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text('SAMPLE'),
),
body: Center(
child: Consumer(
builder: (context, watch, _) {
// Note here, state does not need to be specified.
final s = watch(showHello);
return Text(s);
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Note that we now specify notifier here to access non-state
// attributes of the Notifier
context.read(showHello.notifier).change('Clicked On Button');
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}
More on upgrading to Riverpod 0.14.0+ can be found here.
The following contains the original answer to the question. It is only valid for riverpod <= 0.13.
Change:
final s = watch(showHello).state;
to:
final s = watch(showHello.state);
The reason for this behavior is that you are watching the notifier itself, not its state. Since the notifier object isn't actually being changed, just the state property, a rebuild is not triggered (which is why you see the update upon hot reload). By watching the state itself, we rebuild whenever the state changes.
This concept extends to other kinds of providers, e.g. listening to the last exposed value of a StreamProvider.
A similar question I answered in the past.

multi Provider doesn't work in material app in flutter?

I've created an app and I have used MultiProvider but it doesn't work when I use it inside MaterialApp
I want to use it to change app theme color but
it gives me an error:
*Note: when I use posts provider in any other screen it works.
My Code:
import 'package:blog_app/provider/posts.dart';
import 'package:blog_app/provider/settings.dart';
import 'package:blog_app/screens/splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
builder: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
builder: (context) => Settings(),
),
],
child: MaterialApp(
darkTheme: Provider.of<Settings>(context).darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
),
);
}
}
The Error :-
I/flutter ( 9316): The following ProviderNotFoundError was thrown building MyApp(dirty):
I/flutter ( 9316): Error: Could not find the correct Provider<Settings> above this MyApp Widget
I/flutter ( 9316):
I/flutter ( 9316): To fix, please:
I/flutter ( 9316):
I/flutter ( 9316): * Ensure the Provider<Settings> is an ancestor to this MyApp Widget
I/flutter ( 9316): * Provide types to Provider<Settings>
I/flutter ( 9316): * Provide types to Consumer<Settings>
I/flutter ( 9316): * Provide types to Provider.of<Settings>()
The following test code work without error, you can test with your case
Use Consumer to wrap MaterialApp
code snippet
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
create: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
create: (context) => Settings(darkModeEnabled: true),
),
],
child: Consumer<Settings>(builder: (_, settings, child) {
return MaterialApp(
darkTheme:
settings.darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
);
}),
);
full test code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class Posts extends ChangeNotifier {}
class Settings extends ChangeNotifier {
bool darkModeEnabled;
Settings({this.darkModeEnabled});
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
create: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
create: (context) => Settings(darkModeEnabled: true),
),
],
child: Consumer<Settings>(builder: (_, settings, child) {
return MaterialApp(
darkTheme:
settings.darkModeEnabled ? ThemeData.dark() : ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
);
}),
);
}
}
class SplashScreen extends StatefulWidget {
SplashScreen({Key key}) : super(key: key);
//final String title;
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("test"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
This error happens because you are creating your providers and your consumers in the same build method. This results in them having the same context, which doesn't have any Provider<Settings> registered yet. Provider.of<Settings>(context) is trying to find a Provider<Settings> above in the widget tree, but there is no such provider there.
Using Consumer seems like a valid workaround, but recreating the whole MaterialApp on every change might be pretty heavy.
I suggest instead creating separate widgets for providers and the app root:
class AppProviders extends StatelessWidget {
final Widget child;
AppProviders({this.child});
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Posts>(
builder: (context) => Posts(),
),
ChangeNotifierProvider<Settings>(
builder: (context) => Settings(),
),
],
child: child;
);
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
darkTheme: Provider.of<Settings>(context).darkModeEnabled ? ThemeData.dark() :
ThemeData.light(),
debugShowCheckedModeBanner: false,
title: 'Blogy',
theme: ThemeData(
primaryColor: Colors.deepPurple[900],
cursorColor: Colors.deepPurple[900],
accentColor: Colors.deepPurple[900],
fontFamily: 'Ubuntu',
),
home: SplashScreen(),
);
}
}
Then wrap the MyApp widget in AppProviders inside the runApp function.
void main() {
runApp(
AppProviders(
child: MyApp(),
)
);
}
This ensures that the Providers are registered above your root app widget and that they are visible in its context.
Alternatively you can declare three widgets where the third one is just AppProviders(child: MyApp()) and call that one in runApp. Note that creating AppProviders inside MyApp's build method will result in the same error as before, so don't try it that way.