Comment puis-je avoir mon AppBar dans un fichier séparé dans Flutter tout en ayant les Widgets affichés?
Je suis en train de créer une application Flutter qui recommande des restaurants dans la région. Cependant, je me suis mis tout à fait dans le kerfuffle.
Je veux que mon application ait le code de l'AppBar séparé du code de chaque écran pour des raisons d'organisation et de propreté. Donc, j'ai construit KainAppBar.Dart comme code AppBar. Il est montré ici:
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('[email protected]'),
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>[
],
),
)
],
),
);
}
}
Pour certains de mes écrans, je peux le déclarer sans problème. Voici le code pour 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");
}
}
Cependant, pour mon restaurant_screen.Dart, j'ai rencontré un problème. Pour le contexte, ce que restaurant_screen.Dart fait, c'est qu'il montre les restaurants inclus dans l'application via un TabBar avec trois options (onglets): Liste des restaurants, Liste des cuisines et Histoire. Ce qui signifie qu'en plus de l'AppBar, il doit également avoir un TabBar à l'intérieur. Mais je ne peux pas mettre ce TabBar à l'intérieur KainAppBar.Dart parce que j'ai seulement besoin de le montrer à l'intérieur restaurant_screen.Dart.
Voici mon code pour le widget à l'intérieur 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(),
],
),
],
);
}
L'exécution du code affiche simplement un écran noir. Y a-t-il une solution à cela?
Nous allons avoir un widget.Dart ainsi:
import 'package:flutter/material.Dart';
class ReusableWidgets {
getAppBar(String title) {
return AppBar(
title: Text(title),
);
}
}
Continuons à utiliser cette classe pour obtenir appbar dans tous nos écrans comme ceci:
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'),
),
);
}
}
Voici un exemple de création d'un widget AppBar
import 'package:flutter/material.Dart';
class ListTitleBar extends StatefulWidget implements PreferredSizeWidget {
final String _left;
final String _right;
ListTitleBar(this._left, this._right);
@override
State<StatefulWidget> createState() => new ListTitleBarState(_left, _right);
@override
Size get preferredSize {
return new Size.fromHeight(20.0);
}
}
class ListTitleBarState extends State<ListTitleBar> {
String _leftTitle;
String _rightTitle;
ListTitleBarState(this._leftTitle, this._rightTitle);
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
color: Colors.redAccent,
border: new Border.all(color: Colors.black),
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
///Left Column Title
new Column(
children: <Widget>[
new Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(10.0),
child: new Text(_leftTitle,
style: new TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
)
],
),
///Right Column Title
new Column(
children: <Widget>[
new Container(
color: Colors.redAccent,
padding: const EdgeInsets.all(10.0),
child: new Text(_rightTitle,
style: new TextStyle(
color: Colors.white,
fontSize: 18.0
),
),
)
],
),
],
),
);
}
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
}