Hello everyone, I would like to know how I could work in the part that is enclosed, since when creating an AppBar, the one in Green is created. I want to work on the blue without affecting the NavigationDrawer when the other screens are open. I don't know if I should change the NavigationDrawer, or the way I open the screens, since I don't want it to look spliced like in the First Image.
This is the screen shown in the first image
import 'package:flutter/material.dart';
class principal extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Menu'),
centerTitle: true,
backgroundColor: Colors.green,
),
);
}
This is the NavigationDrawer
import 'package:flutter/material.dart';
import 'package:flutter_application_1/acercade.dart';
import 'package:flutter_application_1/principal.dart';
import 'corarioch.dart';
import 'corariog.dart';
class Home extends StatefulWidget {
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
int _selectDrawerItem = 0;
_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return principal();
case 1:
return corariog();
case 2:
return corarioch();
case 3:
return acercade();
}
}
_onSelectItem(int pos) {
Navigator.of(context).pop();
setState(() {
_selectDrawerItem = pos;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"PIBEDS",
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary),
),
],
),
accountEmail: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Cantos de la Iglesia',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary),
),
],
),
currentAccountPicture: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
CircleAvatar(
backgroundImage: AssetImage('assets/pibedslogopng.png'),
radius: 35),
],
),
),
const SizedBox(height: 15),
ListTile(
title: Text('Home'),
leading: Icon(Icons.home),
selected: (0 == _selectDrawerItem),
onTap: () {
_onSelectItem(0);
},
),
const SizedBox(height: 15),
ListTile(
title: Text('Corario Grande'),
leading: Icon(Icons.book),
selected: (1 == _selectDrawerItem),
onTap: () {
_onSelectItem(1);
},
),
const SizedBox(height: 15),
ListTile(
title: Text('Corario Chico'),
leading: Icon(Icons.book),
selected: (2 == _selectDrawerItem),
onTap: () {
_onSelectItem(2);
},
),
Divider(),
const SizedBox(height: 15),
ListTile(
title: Text('Acerca de'),
leading: Icon(Icons.info),
selected: (3 == _selectDrawerItem),
onTap: () {
_onSelectItem(3);
},
),
],
),
),
body: _getDrawerItemWidget(_selectDrawerItem),
);
}
}
Second Screen
In this one I also want to work on the blue part without affecting the first screen, since I will be doing different things with the different screens.
The best thing you can do is create your own AppBar Widget, this way you can modify what you want without having problems with the drawer. You can also manually manage the back buttons.