I am searching this topic and I must confess, I love the using function widgets for my applications. And in the my flutter experience, I never got any error or any unwanted result with this approach(I mean using function widgets).
But while my search, I couldn't totally understand the reason, why I must use the stateless widgets but not function widgets.
An example; I want to create a page, using scaffold, and appar.
My page must be statefull so I want to use
Scaffold scaffold({String pageTitle, Widget body, Widget floatingActionButton, Widget appBarLeading})=>Scaffold(
appBar: CustomAppBar(pageTitle: pageTitle, leading: appBarLeading),
body: body,
floatingActionButton: floatingActionButton,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
backgroundColor: Colors.blueGrey[50],
);
this code and, my custom appbar coming from Stateless Widget.
So what happen if I use this structure for the beginning ?
İf I use the setstate, my appbar creating from to beginning or used from widget three ?
I can understand the reasons why must use stateless widget because it has final variables and this way, it is reused in the program behalf but What happen If I use stateless widgets in my function widgets ?
Please help me for understanding this topic.
Thank you very much.
Related
I'am trying to understand how to use provider and where to place the provider widget.
Therefore I build an app from a tutorial using provider. Here you can see the widget tree according to the tutorial. The provider widget is wrapped around the MaterialApp widget and the arrows show, which widget uses which other widget.
As far as I understand, in general, the provider widget is supposed to be placed as far down the widget tree as possible and only as far up as neccessary. As neither MaterialApp, NavigationBase, Scaffold nor IndexedStack need information from the providers, I thought I could move those down the tree. But this doesn't work: When I wrap MultiProvider around Scaffold (or any other widget below MaterialApp as far as I tried it) I get an exception.
Error: Could not find the correct Provider<StudentsProvider> above this StudentsListScreen Widget
Apparently - although having read a lot on provider - I haven't fully understood how provider interacts. What did I miss?
The provider must be located at the very top of the tree above the MaterialApp widget and declared once. Then in this case the provider's data will be available from any widget within the tree.
...
return MultiProvider(
providers: [...],
child: MaterialApp(
...someAppSettings,
home: HomeWidget()
)
Everything inside the MaterialApp widget (even when moving between different routes) will have access to the data from the provider.
I use this structure in my application and it works great.
I want to use snack bar in a widget but the scaffold is in a different widget. I have used ScaffoldMessenger but not showing and no errors.[ScaffoldMessenger used in a widget that is two widget inside of parent widget which has a scaffold]
If you pass the BuildContext (of the different widget which holds the Scaffold) into the widget from where you'd like to show the Snackbar, you should be able to use ScaffoldMessenger.of(passedContext).showSnackBar()
If this doesn't answer your question. Please provide a minimal code snippet of what you've tried.
also, you can show SnackBar using GET,
you have to add get in your pubspec.yml in dependencies section
code : Get.snackbar("Hi..", "How are you !");
does anyone know how to use the SafeArea widget in a custom app bar. I am having a red overflow flex box appear on my custom app bar due to a notch in my emulator. I want to still show my custom app bar without the red overflow box in a way that looks presentable. When I tried surrounding my appbar in a safeArea widget I received an error in my Scaffold widget where I had placed my appBar. The code looked like this: Scaffold( appBar: customAppBar(context)). The error read: The argument type 'SafeArea' can't be assigned to the parameter type 'PreferredSizeWidget'. I believe that the Scaffold expects a PreferredSizeWidget but is receiving a safeArea widget instead. Please let me know if there are any other solutions out there other than using the SafeArea widget. Below is a photo of what my emulator looks like with the custom app bar and the red overflow box.
If you always want to make sure notches and punch holes don't get into your AppBar or UI, use the builder function from MaterialApp like this:
#override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) => SafeArea(child: child),
home: MyApp(),
);
}
Now every single Page/Screen will be safe from being cut on the top.
I have a Tabbar with two tabs. The Tabbar has its own Appbar which is used by both tabs. How do I have the sort button run custom (set state) functions inside each tab's stateful widget? Alternatively, is it possible for each tab to have its own unique Appbar? I am not sure what best approach is here.
Example method inside one of the tabs:
class _TabAState extends State<TabA> {
void sort() {
setState(() {
myList.sort((a, b) => b.dueDate.compareTo(a.dueDate));
});
}
...
Sort button:
IconButton(
icon: Icon(Icons.sort),
onPressed: () => DefaultTabController.of(context).index == 0
? TabA.sort() // Does not work
: TabB.sort(), // Does not work
),
Regarding your concern if this approach is the best approach:
From the documentation
The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds.
Based from this statement, I suggest that it's probably not a good idea to nest multiple Scaffold inside another Scaffold. This is related to your concern, whether to have nested AppBar inside a Scaffold, given that you can only have one AppBar per Scaffold.
I personally do not recommend the calling static or non static method from other Flutter Widget classes (eg. widget that serves as a standalone screen for your app) for executing the business logic of your application. Perhaps, you can continue implementing the business logic of your application using widgets such as ScopedModel and architectural patterns such as BloC, Redux or Mobx.
Further reading:
https://api.flutter.dev/flutter/material/Scaffold-class.html
https://www.didierboelens.com/2019/04/bloc---scopedmodel---redux---comparison/
How to call method from another class in Flutter(Dart)?
Let's say I have a container on one side of the screen which I want to be present at all times even during navigation through different screens.
Is there any way by which I can achieve this? If yes, how?
This is an interesting question. I can give you a solution but don't know if its the correct way to do that.
In the MaterialApp widget there is a builder parameter which gives whole screen view as a parameter and can be wrapped up by another Widget. Here is an example.
MaterialApp(
....
builder: (context, widget) {
return Stack(
children: [
_myPersistantWidget(), // you can add your widget. May be inside Positioned widget?
widget //this is the whole screen that we are wrapping in the stack
],
);
},
....
);