Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - How can I dynamically show or hide App Bars on pages

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.

enter image description here

like image 531
Nirav Bhavsar Avatar asked Dec 27 '18 07:12

Nirav Bhavsar


People also ask

How do I hide the app bar in Flutter?

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.

How do you customize the app bar in Flutter?

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 .

How do you show the drawers in all pages in Flutter?

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.

How do you use drawer without AppBar Flutter?

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.


2 Answers

You can try this way

appBar: boolTrue ? AppBar(...) : null 
like image 166
CopsOnRoad Avatar answered Sep 23 '22 18:09

CopsOnRoad


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.

like image 22
rahul.sharma Avatar answered Sep 21 '22 18:09

rahul.sharma