I have a scaffold which includes a floatingActionButton as demonstrated below:
return new Scaffold(
appBar: new AppBar(
title : new Text('Test Flutter'),
),
body: new Center(
child: new ListSection(),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.add),
onPressed: null
),
);
List section:
class ListSection extends StatelessWidget
{
#override
Widget build(BuildContext context) {
return new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new WeekSection(),
// new MonthSection(),
// new YearSection()
]
)
);
}
}
Lastly WeekSection is defined as follow:
class WeekSection extends StatefulWidget
{
#override
_WeekSectionState createState() => new _WeekSectionState();
}
How would I go about using the floatingActionButton.onPressed to updated the sate in _WeekSectionState
Basic way would be to have a private var in your MyApp where scaffold, and to pass the reference to that field all the way down to the WeekSection,
So you pass this variable trough constructor to the ListSection and pass it down again trough constructor to WeekSection.
inside WeekSectionState you can access it as widget.someField from WeekSection;
Later, when you call setState inside MyApp directly in the listener of the FloatingActionButton it will rebuild WeekSection because the Widget that holds information for the state has changed. The flutter checks all the children that need rebuilding.
Related
I'm new to Flutter and I'm trying to access a variable between two Statefull Widgets within build method but my approaches are not working.
I took help from this how to access an object created in one stateful widget in another stateful widget in flutter but didn't work for me.
Here's Error (Second Class):
bottomNavigationBar: new Material(
child: new TabBar(
controller: tabController, //can't accessible
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.account_balance),
),
new Tab(
icon: new Icon(Icons.wb_sunny),
)
],
),
Here's my First Class
class BottomNavBar extends StatefulWidget {
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar>
with SingleTickerProviderStateMixin /*used for vsync*/ {
/*controller*/
TabController tabController; //wanna access this to Second Class
#override
void initState() {
// TODO: implement initState
super.initState();
tabController =new TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return new TabBarView(
children: <Widget>[
new NewPage("1st"),
new NewPage("2st"),
],
controller: tabController,
);
}
}
Here's my Second Class
class BottomNav extends StatefulWidget {
#override
_BottomNavState createState() => _BottomNavState();
}
class _BottomNavState extends State<BottomNav> {
//BottomNavBar _bottomNavBar=new BottomNavBar();
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Drawer App"),
elevation: TargetPlatform.android != null ? 0 : 5,
),
body: new BottomNavBar(),
bottomNavigationBar: new Material(
child: new TabBar(
controller: tabController, //can't accessible
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.account_balance),
),
new Tab(
icon: new Icon(Icons.wb_sunny),
)
],
),
),
);
}
}
I am trying to create a Switch widget add it to a List of widgets inside the initState and then add this list to the children property of a Column in the build method. The app runs successfully and the Switch widget does show but clicking it does not change it as if it is not working. I have tried making the same widget inside the build method and the Switch works as expected.
I have added some comments in the _onClicked which I have assigned to the onChanged property of the Switch widget that show the flow of the value property.
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: App(),
));
}
class App extends StatefulWidget {
#override
AppState createState() => new AppState();
}
class AppState extends State<App> {
List<Widget> widgetList = new List<Widget>();
bool _value = false;
void _onClicked(bool value) {
print(_value); // prints false the first time and true for the rest
setState(() {
_value = value;
});
print(_value); // Always prints true
}
#override
void initState() {
Switch myWidget = new Switch(value: _value, onChanged: _onClicked);
widgetList.add(myWidget);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('My AppBar'),
),
body: new Container(
padding: new EdgeInsets.all(32.0),
child: new Center(
child: new Column(children: widgetList),
),
),
);
}
}
initState is to initialize the state, not widgets. build is to create widgets.
There reason it fails is because the widgets needs to be rebuilt when the value changes (when you call setState), but it isn't because when build() is called, the previously (in initState) created widget is reused.
#override
Widget build(BuildContext context) {
List<Widget> widgetList = [];
Switch myWidget = new Switch(value: _value, onChanged: _onClicked);
widgetList.add(myWidget);
return new Scaffold(
appBar: new AppBar(
title: new Text('My AppBar'),
),
body: new Container(
padding: new EdgeInsets.all(32.0),
child: new Center(
child: new Column(children: widgetList),
),
),
);
}
I have this:
final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
key: _scaffoldkey,
drawer: Menu(),
appBar: AppBar(
title: Container(
child: Text('Dashboard'),
),
bottom: TabBar(
tabs: <Widget>[
...
],
),
),
body: TabBarView(
children: <Widget>[
...
],
),
),
);
}
}
Now, the drawer: Menu() is imported from another menu.dart file, which looks like this:
class Menu extends StatelessWidget {
final GlobalKey<ScaffoldState> drawerKey = new GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return new Drawer(
key: drawerKey,
child: new ListView(
children: <Widget>[
new ListTile(
dense: true,
title: new Text('My Text'),
onTap: () {
// On tap this, I want to show a snackbar.
scaffoldKey.currentState.showSnackBar(showSnack('Error. Could not log out'));
},
),
],
),
);
}
}
With the above approach, I get
NoSuchMethodError: The method 'showSnackBar' was called on null.
An easy solution is to tuck the entire menu.dart contents in the drawer: ... directly.
Another way I'm looking at is being able to reference the parent scaffold in order to display the snackbar.
How can one achieve that?
Why can't one even just call the snackbar from anywhere in Flutter and compulsorily it has to be done via the Scaffold? Just why?
You should try to avoid using GlobalKey as much as possible; you're almost always better off using Scaffold.of to get the ScaffoldState. Since your menu is below the scaffold in the widget tree, Scaffold.of(context) will do what you want.
The reason what you're attempting to do doesn't work is that you are creating two seperate GlobalKeys - each of which is its own object. Think of them as global pointers - since you're creating two different ones, they point to different things. And the state should really be failing analysis since you're passing the wrong type into your Drawer's key field...
If you absolutely have to use GlobalKeys for some reason, you would be better off passing the instance created in your outer widget into your Menu class as a member i.e. this.scaffoldKey, but this isn't recommended.
Using Scaffold.of, this is what your code would look like in the onTap function:
onTap: () {
// On tap this, I want to show a snackbar.
Scaffold.of(context).showSnackBar(showSnack('Error. Could not log out'));
},
You can achieve this functionality by using builder widget you don't need to make separate GlobalKey or pass key as a parameter. Just wrap a widget to Builder widget
class CustomDrawer extends StatelessWidget {#override Widget build(BuildContext context) {
return new Drawer(
child: new ListView(
children: <Widget>[
new Builder(builder: (BuildContext innerContext) {
return ListTile(
dense: true,
title: new Text('My Text'),
onTap: () {
Navigator.of(context).pop();
Scaffold.of(innerContext).showSnackBar(SnackBar(
content: Text('Added added into cart'),
duration: Duration(seconds: 2),
action: SnackBarAction(label: 'UNDO', onPressed: () {}),
));
}
);
})
],
),
);}}
From your first question
In other to reference the parent scaffold in the menu widget you can pass the _scaffoldkey to the menu widget as parameter and use ScaffoldMessenger.of() to show snackbar as shown below
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// Root Widget
#override
Widget build(BuildContext context) {
return MaterialApp(
// App name
title: 'Flutter SnackBar',
// Theme
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Test(title: 'SnackBar'),
);
}
}
class Test extends StatefulWidget {
final String? title;
final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
Test({#required this.title});
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
key: widget._scaffoldkey,
drawer: Menu(parentScaffoldkey:widget._scaffoldkey),
appBar: AppBar(
title: Container(
child: Text('Dashboard'),
),
bottom: TabBar(
tabs: <Widget>[
Tab(text:"Home"),
Tab(text:"About")
],
),
),
body: TabBarView(
children: <Widget>[
Text("Home"),
Text("About")
],
),
),
);
}
}
Menu part as shown
class Menu extends StatelessWidget {
final parentScaffoldkey;
Menu({this.parentScaffoldkey});
#override
Widget build(BuildContext context) {
return new Drawer(
child: new ListView(
children: <Widget>[
new ListTile(
dense: true,
title: new Text('My Text'),
onTap: () {
// On tap show a snackbar.
// ScaffoldMessenger will call the nearest Scaffold to show snackbar
ScaffoldMessenger.of(this.parentScaffoldkey.currentContext).showSnackBar(SnackBar(content:Text('Error. Could not log out')));
},
),
],
),
);
}
}
Also,you have to call snackbar via Scaffold because it provides the SnackBar API and manages it
I'm creating a basic Material App and i have a drawer for navigation.
With the simple way of pushing a route the whole widget is getting replaced and it's like opening a whole new page that includes a whole new drawer.
My goal is to create the atmosphere of a page and a drawer, and when the user taps a drawer item the drawer will collapse and only the content of the page will be replaced.
I have found these two Questions/Answers:
Replace initial Route in MaterialApp without animation?
Flutter Drawer Widget - change Scaffold.body content
And my question is what is the best/correct way to achieve what i'm trying to do?
The 1st method is just creating the illusion by removing the push/pop animation, although it still actually behaves like the original method i described.
The 2nd method actually replaces the content only, and the solution i thought of is instead of changing the text to create multiple Container widgets and changing between them.
Since i'm still new and learning flutter i would like to know what is the right practice to do so.
EDIT:
I created this and it works pretty well. I still don't know about how effective/efficient it is but for now that's exactly what i wanted to achieve:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blueGrey,
),
home: new TestPage(),
);
}
}
class TestPage extends StatefulWidget {
#override
_TestPageState createState() => new _TestPageState();
}
class _TestPageState extends State<TestPage> {
static final Container info = new Container(
child: new Center(
child: new Text('Info')
),
);
static final Container save = new Container(
child: new Center(
child: new Text('Save')
),
);
static final Container settings = new Container(
child: new Center(
child: new Text('Settings')
),
);
Container activeContainer = info;
#override
Widget build(BuildContext context) {
return new Scaffold(
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new Container(child: new DrawerHeader(child: new Container())),
new Container (
child: new Column(
children: <Widget>[
new ListTile(leading: new Icon(Icons.info), title: new Text('Info'),
onTap:(){
setState((){
activeContainer = info;
});
Navigator.of(context).pop();
}
),
new ListTile(leading: new Icon(Icons.save), title: new Text('Save'),
onTap:(){
setState((){
activeContainer = save;
});
Navigator.of(context).pop();
}
),
new ListTile(leading: new Icon(Icons.settings), title: new Text('Settings'),
onTap:(){
setState((){
activeContainer = settings;
});
Navigator.of(context).pop();
}
),
]
),
)
],
),
),
appBar: new AppBar(title: new Text("Test Page"),),
body: activeContainer,
);
}
}
Is not what you are trying to achieve is exactly what in the second answer, No ? :/
Here I am illustrating it by switching colors, but you can apply this to the content itself or basically any other widget.
class NavDrawer extends StatefulWidget {
#override
_NavDrawerState createState() => new _NavDrawerState();
}
class _NavDrawerState extends State<NavDrawer> {
final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();
Color contentColor = Colors.white;
#override
initState(){
super.initState();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
key: scaffoldKey,
appBar: new AppBar(),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(child: new Container()),
new ListTile(title: new Text("Blue"),onTap: (){setState((){contentColor=Colors.blue;Navigator.pop(context);});},),
new ListTile(title: new Text("Red"),onTap: (){setState((){contentColor=Colors.red;Navigator.pop(context);});},),
new ListTile(title: new Text("Green"),onTap: (){setState((){contentColor=Colors.green;Navigator.pop(context);});},),
new ListTile(title: new Text("Yellow"),onTap: (){setState((){contentColor=Colors.yellow;Navigator.pop(context);});},)
],
),
),
body: new Container(
color: contentColor,
),
);
}
}
Our app is built on top of Scaffold and to this point we have been able to accommodate most of our routing and navigation requirements using the provided calls within NavigatorState (pushNamed(), pushReplacementNamed(), etc.). What we don't want though, is to have any kind of 'push' animation when a user selects an item from our drawer (nav) menu. We want the destination screen from a nav menu click to effectively become the new initial route of the stack. For the moment we are using pushReplacementNamed() for this to ensure no back arrow in the app bar. But, the slide-in-from-the-right animation implies a stack is building.
What is our best option for changing that initial route without animation, and, can we do that while also concurrently animating the drawer closed? Or are we looking at a situation here where we need to move away from Navigator over to just using a single Scaffold and updating the 'body' directly when the user wants to change screens?
We note there is a replace() call on NavigatorState which we assume might be the right place to start looking, but it's unclear how to access our various routes originally set up in new MaterialApp(). Something like replaceNamed() might be in order ;-)
What you're doing sounds somewhat like a BottomNavigationBar, so you might want to consider one of those instead of a Drawer.
However, having a single Scaffold and updating the body when the user taps a drawer item is a totally reasonable approach. You might consider a FadeTransition to change from one body to another.
Or, if you like using Navigator but don't want the default slide animation, you can customize (or disable) the animation by extending MaterialPageRoute. Here's an example of that:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyCustomRoute<T> extends MaterialPageRoute<T> {
MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
: super(builder: builder, settings: settings);
#override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
if (settings.isInitialRoute)
return child;
// Fades between routes. (If you don't want any animation,
// just return child.)
return new FadeTransition(opacity: animation, child: child);
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Navigation example',
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/': return new MyCustomRoute(
builder: (_) => new MyHomePage(),
settings: settings,
);
case '/somewhere': return new MyCustomRoute(
builder: (_) => new Somewhere(),
settings: settings,
);
}
assert(false);
}
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Navigation example'),
),
drawer: new Drawer(
child: new ListView(
children: <Widget> [
new DrawerHeader(
child: new Container(
child: const Text('This is a header'),
),
),
new ListTile(
leading: const Icon(Icons.navigate_next),
title: const Text('Navigate somewhere'),
onTap: () {
Navigator.pushNamed(context, '/somewhere');
},
),
],
),
),
body: new Center(
child: new Text(
'This is a home page.',
),
),
);
}
}
class Somewhere extends StatelessWidget {
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Text(
'Congrats, you did it.',
),
),
appBar: new AppBar(
title: new Text('Somewhere'),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(
child: new Container(
child: const Text('This is a header'),
),
),
],
),
),
);
}
}
Use PageRouteBuilder like:
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (_, __, ___) => Screen2(),
transitionDuration: Duration.zero,
),
);
And if you want transition, simply add following property to above PageRouteBuilder, and change seconds to say 1.
transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),