I have design one screen which is appear when intent from navigation drawer as well as from other screen.
Now i want to hide app bar when intent from navigation drawer, so please guide me, below is my code
Navigation Screen code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:pwc/src/home/HomeScreen.dart';
import 'package:pwc/src/model/UserModel.dart';
import 'package:pwc/src/property/BuyerPropertyListScreen.dart';
import 'package:pwc/src/property/RentPropertyListScreen.dart';
import 'package:pwc/src/property/MyPropertyListScreen.dart';
import 'package:pwc/src/property/PostPropertyScreen.dart';
import 'package:pwc/src/home/FeedbackScreen.dart';
import 'package:pwc/src/utility/ColorsConstant.dart' as ColorConstant;
import 'package:pwc/src/utility/DrawableConstant.dart' as DrawableConstant;
import 'package:pwc/src/utility/StringConstant.dart' as StringConstant;
import 'package:shared_preferences/shared_preferences.dart';
import 'package:pwc/src/utility/globals.dart' as globals;
import 'package:pwc/src/utility/KeyConstant.dart' as KeyConstant;
import 'package:pwc/src/property/PropertyListScreen.dart';
class DrawerItem {
String title;
ImageIcon icon;
DrawerItem(this.title, this.icon);
}
class NavigationDrawerScreen extends StatefulWidget {
static String tag = 'navigation-page';
@override
_NavigationDrawerState createState() => new _NavigationDrawerState();
}
class _NavigationDrawerState extends State<NavigationDrawerScreen> {
int selectedDrawerItem = 0;
var appBarTitleText = StringConstant.home;
var homeIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_home),
size: 30.0,
);
var buyPropertyIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_buy_property),
size: 30.0,
);
var rentPropertyIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_rent_property),
size: 30.0,
);
var postPropertyIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_post_property),
size: 30.0,
);
var myPropertiesIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_my_properties),
size: 30.0,
);
var feedbackIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_feedback),
size: 30.0,
);
var ratingIcon = new ImageIcon(
new AssetImage(DrawableConstant.ic_rating),
size: 30.0,
);
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
var nav_header_exact_bg =
new ExactAssetImage(DrawableConstant.nav_header_bg);
return new Scaffold(
appBar: AppBar(
backgroundColor: ColorConstant.theme_color,
title: new Text(appBarTitleText),
centerTitle: true,
),
drawer: Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text(userModel.name),
accountEmail: new Text(userModel.email),
decoration: new BoxDecoration(
image: new DecorationImage(
image: nav_header_exact_bg,
fit: BoxFit.cover,
),
),
),
new ListTile(
leading: homeIcon,
title: new Text(StringConstant.home),
onTap: () {
setAPPBarTitleText(StringConstant.home);
Navigator.pop(context);
setState(() {
selectedDrawerItem = 0;
});
}),
new Divider(
height: 1,
),
new ListTile(
leading: buyPropertyIcon,
title: new Text(StringConstant.properties_for_buy),
onTap: () {
setAPPBarTitleText(StringConstant.properties_for_buy);
Navigator.pop(context);
setState(() {
selectedDrawerItem = 1;
});
}),
new Divider(
height: 1,
),
],
),
),
body: getDrawerScreenBody(selectedDrawerItem),
);
}
getDrawerScreenBody(int pos) {
switch (pos) {
case 0:
return new HomeScreen();
case 1:
return new BuyerPropertyListScreen();
}
}
void setAPPBarTitleText(String title) {
setState(() {
appBarTitleText = title;
});
}
}
when i open BuyerPropertyListScreen, then inner appbar is also showing, i want to dynamically hide it, please look below screnshot.
As We Need To Hide AppBar We Need To Use NestedScrollView Taking headerSliverBuilder That Detect Scrolling And returning SliverAppBar. Now SliverAppBar Will Auto Hide When users Scroll Down And reappear When User Scroll To The Top. SliverAppBar Taking Height, Title, And Leading That Show An Icon.
CustomAppBar using the AnimaionBuilder . You might be aware of how to code an AppBar in Flutter. But this approach is different, as we will use AnimationBuilder and Stack widget to make this type of custom AppBar . Here AnimaionBuilder will return an AppBar that we will use in the Stack inside the main Scaffold .
To share a drawer between all pages we could add a builder in our MaterialApp instance. This will instantiate a Scaffold under Navigator but above all routes. Inside your page, you can instantiate another Scaffold without restriction as you'd usually do.
You have your own custom Menu button to open/close drawer. You don't want to use AppBar as well. In that case you can use GlobalKey<ScaffoldState>() object to open Drawer.
You can try this way
appBar: boolTrue ? AppBar(...) : null
You can make use of preferredSize widget like this:
true ? Appbar() : PreferredSize(preferredSize: Size(0.0, 0.0),child: Container(),)
This will hide the appbar if the condition is false.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With