How can I have my AppBar in a separate file in Flutter while still having the Widgets show?
I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle.
I want my app to have the code for the AppBar separate from the code for each screen for the sake of organization and cleanliness. So, I built KainAppBar.dart as the AppBar code. It is shown here:
import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
GoogleSignIn _googleSignIn = GoogleSignIn(
signInOption: SignInOption.standard,
);
class KainAppBar extends StatelessWidget {
final String title;
KainAppBar(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new GradientAppBar(
centerTitle: true,
title: new Text('Kain',
style: TextStyle(
fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
)),
backgroundColorStart: Colors.red[400],
backgroundColorEnd: Colors.red[900],
),
drawer: new Drawer(
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Colors.red[800],
),
accountName: new Text('Guest'),
accountEmail: new Text('guestemail@email.com'),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
),
),
new ListTile(
title: new Text('Restaurants'),
leading: Icon(Icons.restaurant_menu),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/restaurant_screen');
},
),
new ListTile(
title: new Text('Nearby'),
leading: Icon(Icons.near_me),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/nearby_screen');
},
),
new ListTile(
title: new Text('Request Restaurant'),
leading: Icon(Icons.library_add),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/request_screen');
},
),
new ListTile(
title: new Text('Settings'),
leading: Icon(Icons.settings),
onTap: (){},
),
new ListTile(
title: new Text('About'),
leading: Icon(Icons.info_outline),
onTap: (){},
),
new ListTile(
title: new Text('Logout'),
leading: Icon(Icons.power_settings_new),
onTap: (){
_googleSignIn.disconnect();
FirebaseAuth.instance.signOut().then((value) {
Navigator.of(context).pushReplacementNamed('/login');
}).catchError((e) {
print(e);
});
},
),
],
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
)
],
),
);
}
}
For some of my screens, I can declare it with no problem. Here is the code for home_screen.dart:
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen>{
@override
noSuchMethod(Invocation invocation) {
return super.noSuchMethod(invocation);
}
@override
Widget build(BuildContext context){
return new KainAppBar("Kain");
}
}
However, for my restaurant_screen.dart, I've encountered a problem. For context, what restaurant_screen.dart does is it shows the restaurants included in the app through a TabBar with three options(tabs): Restaurant List, Cuisine List, and History. Which means that apart from the AppBar, it also needs to have a TabBar inside. But I cannot put this TabBar inside KainAppBar.dart because I only need it to show inside restaurant_screen.dart.
Here is my code for the Widget inside restaurant_screen.dart:
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
GradientAppBar(
title: KainAppBar("Kain"),
bottom: new TabBar(
labelColor: Colors.white,
controller: tController,
tabs: <Widget>[
new Tab(text: 'List'),
new Tab(text: 'Cuisine'),
new Tab(text: 'Favorites'),
],
),
),
TabBarView(
controller: tController,
children: <Widget>[
new firstpage.RestaurantList(),
new secondpage.CuisineList(),
new thirdpage.RestaurantFavorites(),
],
),
],
);
}
Running the code just shows a black screen. Is there any workaround for this?
android mobile dart flutter appbar
add a comment |
I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle.
I want my app to have the code for the AppBar separate from the code for each screen for the sake of organization and cleanliness. So, I built KainAppBar.dart as the AppBar code. It is shown here:
import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
GoogleSignIn _googleSignIn = GoogleSignIn(
signInOption: SignInOption.standard,
);
class KainAppBar extends StatelessWidget {
final String title;
KainAppBar(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new GradientAppBar(
centerTitle: true,
title: new Text('Kain',
style: TextStyle(
fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
)),
backgroundColorStart: Colors.red[400],
backgroundColorEnd: Colors.red[900],
),
drawer: new Drawer(
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Colors.red[800],
),
accountName: new Text('Guest'),
accountEmail: new Text('guestemail@email.com'),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
),
),
new ListTile(
title: new Text('Restaurants'),
leading: Icon(Icons.restaurant_menu),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/restaurant_screen');
},
),
new ListTile(
title: new Text('Nearby'),
leading: Icon(Icons.near_me),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/nearby_screen');
},
),
new ListTile(
title: new Text('Request Restaurant'),
leading: Icon(Icons.library_add),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/request_screen');
},
),
new ListTile(
title: new Text('Settings'),
leading: Icon(Icons.settings),
onTap: (){},
),
new ListTile(
title: new Text('About'),
leading: Icon(Icons.info_outline),
onTap: (){},
),
new ListTile(
title: new Text('Logout'),
leading: Icon(Icons.power_settings_new),
onTap: (){
_googleSignIn.disconnect();
FirebaseAuth.instance.signOut().then((value) {
Navigator.of(context).pushReplacementNamed('/login');
}).catchError((e) {
print(e);
});
},
),
],
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
)
],
),
);
}
}
For some of my screens, I can declare it with no problem. Here is the code for home_screen.dart:
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen>{
@override
noSuchMethod(Invocation invocation) {
return super.noSuchMethod(invocation);
}
@override
Widget build(BuildContext context){
return new KainAppBar("Kain");
}
}
However, for my restaurant_screen.dart, I've encountered a problem. For context, what restaurant_screen.dart does is it shows the restaurants included in the app through a TabBar with three options(tabs): Restaurant List, Cuisine List, and History. Which means that apart from the AppBar, it also needs to have a TabBar inside. But I cannot put this TabBar inside KainAppBar.dart because I only need it to show inside restaurant_screen.dart.
Here is my code for the Widget inside restaurant_screen.dart:
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
GradientAppBar(
title: KainAppBar("Kain"),
bottom: new TabBar(
labelColor: Colors.white,
controller: tController,
tabs: <Widget>[
new Tab(text: 'List'),
new Tab(text: 'Cuisine'),
new Tab(text: 'Favorites'),
],
),
),
TabBarView(
controller: tController,
children: <Widget>[
new firstpage.RestaurantList(),
new secondpage.CuisineList(),
new thirdpage.RestaurantFavorites(),
],
),
],
);
}
Running the code just shows a black screen. Is there any workaround for this?
android mobile dart flutter appbar
YourKainAppBar
returns more than just anappbar
, it also has alistview
, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and putappBar:
section there.
– Ab Sin
Nov 21 '18 at 12:26
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file?
– Xavier Paolo Jamito
Nov 21 '18 at 12:43
I don't fully understand. You will just have to call the method, check the answer I posted
– Ab Sin
Nov 21 '18 at 13:28
add a comment |
I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle.
I want my app to have the code for the AppBar separate from the code for each screen for the sake of organization and cleanliness. So, I built KainAppBar.dart as the AppBar code. It is shown here:
import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
GoogleSignIn _googleSignIn = GoogleSignIn(
signInOption: SignInOption.standard,
);
class KainAppBar extends StatelessWidget {
final String title;
KainAppBar(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new GradientAppBar(
centerTitle: true,
title: new Text('Kain',
style: TextStyle(
fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
)),
backgroundColorStart: Colors.red[400],
backgroundColorEnd: Colors.red[900],
),
drawer: new Drawer(
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Colors.red[800],
),
accountName: new Text('Guest'),
accountEmail: new Text('guestemail@email.com'),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
),
),
new ListTile(
title: new Text('Restaurants'),
leading: Icon(Icons.restaurant_menu),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/restaurant_screen');
},
),
new ListTile(
title: new Text('Nearby'),
leading: Icon(Icons.near_me),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/nearby_screen');
},
),
new ListTile(
title: new Text('Request Restaurant'),
leading: Icon(Icons.library_add),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/request_screen');
},
),
new ListTile(
title: new Text('Settings'),
leading: Icon(Icons.settings),
onTap: (){},
),
new ListTile(
title: new Text('About'),
leading: Icon(Icons.info_outline),
onTap: (){},
),
new ListTile(
title: new Text('Logout'),
leading: Icon(Icons.power_settings_new),
onTap: (){
_googleSignIn.disconnect();
FirebaseAuth.instance.signOut().then((value) {
Navigator.of(context).pushReplacementNamed('/login');
}).catchError((e) {
print(e);
});
},
),
],
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
)
],
),
);
}
}
For some of my screens, I can declare it with no problem. Here is the code for home_screen.dart:
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen>{
@override
noSuchMethod(Invocation invocation) {
return super.noSuchMethod(invocation);
}
@override
Widget build(BuildContext context){
return new KainAppBar("Kain");
}
}
However, for my restaurant_screen.dart, I've encountered a problem. For context, what restaurant_screen.dart does is it shows the restaurants included in the app through a TabBar with three options(tabs): Restaurant List, Cuisine List, and History. Which means that apart from the AppBar, it also needs to have a TabBar inside. But I cannot put this TabBar inside KainAppBar.dart because I only need it to show inside restaurant_screen.dart.
Here is my code for the Widget inside restaurant_screen.dart:
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
GradientAppBar(
title: KainAppBar("Kain"),
bottom: new TabBar(
labelColor: Colors.white,
controller: tController,
tabs: <Widget>[
new Tab(text: 'List'),
new Tab(text: 'Cuisine'),
new Tab(text: 'Favorites'),
],
),
),
TabBarView(
controller: tController,
children: <Widget>[
new firstpage.RestaurantList(),
new secondpage.CuisineList(),
new thirdpage.RestaurantFavorites(),
],
),
],
);
}
Running the code just shows a black screen. Is there any workaround for this?
android mobile dart flutter appbar
I am currently building a Flutter app that recommends restaurants around the area. However, I've gotten myself in quite the kerfuffle.
I want my app to have the code for the AppBar separate from the code for each screen for the sake of organization and cleanliness. So, I built KainAppBar.dart as the AppBar code. It is shown here:
import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
GoogleSignIn _googleSignIn = GoogleSignIn(
signInOption: SignInOption.standard,
);
class KainAppBar extends StatelessWidget {
final String title;
KainAppBar(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new GradientAppBar(
centerTitle: true,
title: new Text('Kain',
style: TextStyle(
fontFamily: 'Quiapo', fontSize: 36.0, fontWeight: FontWeight.w600
)),
backgroundColorStart: Colors.red[400],
backgroundColorEnd: Colors.red[900],
),
drawer: new Drawer(
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: Colors.red[800],
),
accountName: new Text('Guest'),
accountEmail: new Text('guestemail@email.com'),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage('https://avatarfiles.alphacoders.com/848/84855.jpg'),
),
),
new ListTile(
title: new Text('Restaurants'),
leading: Icon(Icons.restaurant_menu),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/restaurant_screen');
},
),
new ListTile(
title: new Text('Nearby'),
leading: Icon(Icons.near_me),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/nearby_screen');
},
),
new ListTile(
title: new Text('Request Restaurant'),
leading: Icon(Icons.library_add),
onTap: (){
Navigator.of(context).pop();
Navigator.of(context).pushNamed('/request_screen');
},
),
new ListTile(
title: new Text('Settings'),
leading: Icon(Icons.settings),
onTap: (){},
),
new ListTile(
title: new Text('About'),
leading: Icon(Icons.info_outline),
onTap: (){},
),
new ListTile(
title: new Text('Logout'),
leading: Icon(Icons.power_settings_new),
onTap: (){
_googleSignIn.disconnect();
FirebaseAuth.instance.signOut().then((value) {
Navigator.of(context).pushReplacementNamed('/login');
}).catchError((e) {
print(e);
});
},
),
],
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(50.0, 160.0, 50.0, 0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
)
],
),
);
}
}
For some of my screens, I can declare it with no problem. Here is the code for home_screen.dart:
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen>{
@override
noSuchMethod(Invocation invocation) {
return super.noSuchMethod(invocation);
}
@override
Widget build(BuildContext context){
return new KainAppBar("Kain");
}
}
However, for my restaurant_screen.dart, I've encountered a problem. For context, what restaurant_screen.dart does is it shows the restaurants included in the app through a TabBar with three options(tabs): Restaurant List, Cuisine List, and History. Which means that apart from the AppBar, it also needs to have a TabBar inside. But I cannot put this TabBar inside KainAppBar.dart because I only need it to show inside restaurant_screen.dart.
Here is my code for the Widget inside restaurant_screen.dart:
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
GradientAppBar(
title: KainAppBar("Kain"),
bottom: new TabBar(
labelColor: Colors.white,
controller: tController,
tabs: <Widget>[
new Tab(text: 'List'),
new Tab(text: 'Cuisine'),
new Tab(text: 'Favorites'),
],
),
),
TabBarView(
controller: tController,
children: <Widget>[
new firstpage.RestaurantList(),
new secondpage.CuisineList(),
new thirdpage.RestaurantFavorites(),
],
),
],
);
}
Running the code just shows a black screen. Is there any workaround for this?
android mobile dart flutter appbar
android mobile dart flutter appbar
edited Nov 21 '18 at 12:27
Aniruddh Parihar
2,21911129
2,21911129
asked Nov 21 '18 at 12:19
Xavier Paolo JamitoXavier Paolo Jamito
84
84
YourKainAppBar
returns more than just anappbar
, it also has alistview
, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and putappBar:
section there.
– Ab Sin
Nov 21 '18 at 12:26
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file?
– Xavier Paolo Jamito
Nov 21 '18 at 12:43
I don't fully understand. You will just have to call the method, check the answer I posted
– Ab Sin
Nov 21 '18 at 13:28
add a comment |
YourKainAppBar
returns more than just anappbar
, it also has alistview
, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and putappBar:
section there.
– Ab Sin
Nov 21 '18 at 12:26
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file?
– Xavier Paolo Jamito
Nov 21 '18 at 12:43
I don't fully understand. You will just have to call the method, check the answer I posted
– Ab Sin
Nov 21 '18 at 13:28
Your
KainAppBar
returns more than just an appbar
, it also has a listview
, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and put appBar:
section there.– Ab Sin
Nov 21 '18 at 12:26
Your
KainAppBar
returns more than just an appbar
, it also has a listview
, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and put appBar:
section there.– Ab Sin
Nov 21 '18 at 12:26
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file?
– Xavier Paolo Jamito
Nov 21 '18 at 12:43
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file?
– Xavier Paolo Jamito
Nov 21 '18 at 12:43
I don't fully understand. You will just have to call the method, check the answer I posted
– Ab Sin
Nov 21 '18 at 13:28
I don't fully understand. You will just have to call the method, check the answer I posted
– Ab Sin
Nov 21 '18 at 13:28
add a comment |
1 Answer
1
active
oldest
votes
Let's have a widget.dart
like so:
import 'package:flutter/material.dart';
class ReusableWidgets {
getAppBar(String title) {
return AppBar(
title: Text(title),
);
}
}
Let's keep using this class to get appbar
in all our screens like so:
import 'package:filter_chip/widgets.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: new ReusableWidgets().getAppBar('Hello World'),
body: Text(
'Flutter Demo Home Page'),
),
);
}
}
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
1
Try to wrap theScaffold()
within aMaterialApp
in theKainAppBar
class like this:return MaterialApp( home: Scaffold(.....),);
You need aMaterialApp
or aWidgetsApp
around your widget. They provide theMediaQuery
. When you call.of(context)
flutter will always look up the widget tree to find the widget. I think the pluginGradientAppBar
requires it.
– Ab Sin
Nov 21 '18 at 14:01
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said theGradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can haveMaterialApp
– Ab Sin
Nov 21 '18 at 14:41
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
|
show 7 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411890%2fhow-can-i-have-my-appbar-in-a-separate-file-in-flutter-while-still-having-the-wi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Let's have a widget.dart
like so:
import 'package:flutter/material.dart';
class ReusableWidgets {
getAppBar(String title) {
return AppBar(
title: Text(title),
);
}
}
Let's keep using this class to get appbar
in all our screens like so:
import 'package:filter_chip/widgets.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: new ReusableWidgets().getAppBar('Hello World'),
body: Text(
'Flutter Demo Home Page'),
),
);
}
}
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
1
Try to wrap theScaffold()
within aMaterialApp
in theKainAppBar
class like this:return MaterialApp( home: Scaffold(.....),);
You need aMaterialApp
or aWidgetsApp
around your widget. They provide theMediaQuery
. When you call.of(context)
flutter will always look up the widget tree to find the widget. I think the pluginGradientAppBar
requires it.
– Ab Sin
Nov 21 '18 at 14:01
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said theGradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can haveMaterialApp
– Ab Sin
Nov 21 '18 at 14:41
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
|
show 7 more comments
Let's have a widget.dart
like so:
import 'package:flutter/material.dart';
class ReusableWidgets {
getAppBar(String title) {
return AppBar(
title: Text(title),
);
}
}
Let's keep using this class to get appbar
in all our screens like so:
import 'package:filter_chip/widgets.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: new ReusableWidgets().getAppBar('Hello World'),
body: Text(
'Flutter Demo Home Page'),
),
);
}
}
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
1
Try to wrap theScaffold()
within aMaterialApp
in theKainAppBar
class like this:return MaterialApp( home: Scaffold(.....),);
You need aMaterialApp
or aWidgetsApp
around your widget. They provide theMediaQuery
. When you call.of(context)
flutter will always look up the widget tree to find the widget. I think the pluginGradientAppBar
requires it.
– Ab Sin
Nov 21 '18 at 14:01
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said theGradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can haveMaterialApp
– Ab Sin
Nov 21 '18 at 14:41
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
|
show 7 more comments
Let's have a widget.dart
like so:
import 'package:flutter/material.dart';
class ReusableWidgets {
getAppBar(String title) {
return AppBar(
title: Text(title),
);
}
}
Let's keep using this class to get appbar
in all our screens like so:
import 'package:filter_chip/widgets.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: new ReusableWidgets().getAppBar('Hello World'),
body: Text(
'Flutter Demo Home Page'),
),
);
}
}
Let's have a widget.dart
like so:
import 'package:flutter/material.dart';
class ReusableWidgets {
getAppBar(String title) {
return AppBar(
title: Text(title),
);
}
}
Let's keep using this class to get appbar
in all our screens like so:
import 'package:filter_chip/widgets.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: new ReusableWidgets().getAppBar('Hello World'),
body: Text(
'Flutter Demo Home Page'),
),
);
}
}
answered Nov 21 '18 at 13:26
Ab SinAb Sin
442413
442413
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
1
Try to wrap theScaffold()
within aMaterialApp
in theKainAppBar
class like this:return MaterialApp( home: Scaffold(.....),);
You need aMaterialApp
or aWidgetsApp
around your widget. They provide theMediaQuery
. When you call.of(context)
flutter will always look up the widget tree to find the widget. I think the pluginGradientAppBar
requires it.
– Ab Sin
Nov 21 '18 at 14:01
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said theGradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can haveMaterialApp
– Ab Sin
Nov 21 '18 at 14:41
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
|
show 7 more comments
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
1
Try to wrap theScaffold()
within aMaterialApp
in theKainAppBar
class like this:return MaterialApp( home: Scaffold(.....),);
You need aMaterialApp
or aWidgetsApp
around your widget. They provide theMediaQuery
. When you call.of(context)
flutter will always look up the widget tree to find the widget. I think the pluginGradientAppBar
requires it.
– Ab Sin
Nov 21 '18 at 14:01
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said theGradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can haveMaterialApp
– Ab Sin
Nov 21 '18 at 14:41
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
I get it now. Thanks. However, I'm still running into a problem. The context in my ListTiles are now showing as undefined. Where do I declare the (BuildContext context) here?
– Xavier Paolo Jamito
Nov 21 '18 at 13:44
1
1
Try to wrap the
Scaffold()
within a MaterialApp
in the KainAppBar
class like this: return MaterialApp( home: Scaffold(.....),);
You need a MaterialApp
or a WidgetsApp
around your widget. They provide the MediaQuery
. When you call .of(context)
flutter will always look up the widget tree to find the widget. I think the plugin GradientAppBar
requires it.– Ab Sin
Nov 21 '18 at 14:01
Try to wrap the
Scaffold()
within a MaterialApp
in the KainAppBar
class like this: return MaterialApp( home: Scaffold(.....),);
You need a MaterialApp
or a WidgetsApp
around your widget. They provide the MediaQuery
. When you call .of(context)
flutter will always look up the widget tree to find the widget. I think the plugin GradientAppBar
requires it.– Ab Sin
Nov 21 '18 at 14:01
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Where should I put MediaQuery?
– Xavier Paolo Jamito
Nov 21 '18 at 14:39
Nowhere. It isn't there in your code, as I said the
GradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can have MaterialApp
– Ab Sin
Nov 21 '18 at 14:41
Nowhere. It isn't there in your code, as I said the
GradientAppBar
plugin uses it here. Because you are using this plugin, at the root of the widget tree you can have MaterialApp
– Ab Sin
Nov 21 '18 at 14:41
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
'context' still shows as Undefined Name
– Xavier Paolo Jamito
Nov 21 '18 at 14:44
|
show 7 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411890%2fhow-can-i-have-my-appbar-in-a-separate-file-in-flutter-while-still-having-the-wi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your
KainAppBar
returns more than just anappbar
, it also has alistview
, if you want the appbar code to be in one place, just declare a method in a class, which returns a widget, and putappBar:
section there.– Ab Sin
Nov 21 '18 at 12:26
@AbSin, wouldn't that defeat the purpose of having the code in a single file? If I just declare the AppBar inside a method, then I still have to put the AppBar code inside every all my .dart files instead of just declaring it from a single file?
– Xavier Paolo Jamito
Nov 21 '18 at 12:43
I don't fully understand. You will just have to call the method, check the answer I posted
– Ab Sin
Nov 21 '18 at 13:28