yoohoo
yoohoo

Reputation: 1217

display toolbar menu only on the home page when using navigational drawer

i have a flutter app which contain a navigational drawer menu. when you click on the drawer, you can navigate to a different page. however, when you navigate to a different page, the toolbar is the same as the previous page which contain the navigational drawer. i have a home page that contain a menu on the toolbar. however, i only want the menu on the home page. if i go to another page, i want the menu to disappear.

here is my code

import 'package:flutter/material.dart';
import 'package:finsec/widget/drawer_widget.dart';
import 'package:finsec/widget/inherited_month_year.dart';
import 'package:finsec/screens/income/second_fragment.dart';
import 'package:finsec/screens/home/dashboards.dart';
import 'package:finsec/screens/transaction/transaction_list.dart';
import 'package:finsec/utils/colors.dart';
import 'package:finsec/utils/strings.dart';
import 'package:month_picker_dialog/month_picker_dialog.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:finsec/utils/localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:finsec/model/month_year.dart';


class HomeScreen extends StatefulWidget {
  final String title = home;
  final Widget child;

  HomeScreen({Key key, this.child}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDate, initialDate, prevSelectedDate;
  String monthName1;
  int monthNumber, year;
  MonthYear monthYear;

  getDrawerItemWidget(int pos, String title) {
    switch (pos) {
      case 0:
        return new Dashboards ();
      case 1:
        return new SecondFragment();
      case 2:
        return new TransactionList(
          outstanding: totalOutstanding,
          received_or_paid:
          totalReceived, transactionType: title,);
      case 3:
        return new TransactionList(
          outstanding: totalOutstanding,
          received_or_paid: totalPaid,
          transactionType: title,);
      default:
        return new Text("Error");
    }
  }

  String titleAppBar = home;
  int tabIndex = 0;
  double elevation = 0;

  @override
  void initState() {
    setState(() {
      titleAppBar = widget.title;
    });
    super.initState();
    initialDate = DateTime.now();
    selectedDate = initialDate;
  }


  void getMonthYear() {
    if(selectedDate != null) {
      monthName1 = monthNamesAbbrv[selectedDate.month];
      monthNumber = selectedDate.month;
      year = selectedDate.year;
      prevSelectedDate = selectedDate;
    }
    else {
      monthName1 = monthNamesAbbrv[prevSelectedDate.month];
      monthNumber = prevSelectedDate.month;
      year = prevSelectedDate.year;
    }

    monthYear = new MonthYear(monthNumber: monthNumber, year: year) ;
  }

  Widget homeScreen(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(titleAppBar),
        elevation: elevation,
        backgroundColor: colorPrimary,
        actions: <Widget>[
          Builder(
            builder: (context) => FlatButton.icon(
              icon: Icon(Icons.calendar_today, color: white,), //`Icon` to display
              label: Text(monthName1 + ' $year'  , style: TextStyle(color: white, fontSize: 18)), //`Text` to display
              onPressed: () {
                // DateTime date = new DateTime.now();
                // showMonthPicker(context: context, initialDate: date);
                showMonthPicker(
                    context: context,
                    firstDate: DateTime( DateTime.now().year - 1 , 5),
                    lastDate: DateTime( DateTime.now().year + 1, 9 ),
                    initialDate: selectedDate ?? initialDate
                )
                    .then((date) => setState(() {
                  selectedDate = date ;//!= null ? date : prevSelectedDate;

                }));
              },
            ),
          )
        ],
      ),
      drawer: DrawerWidget((title, index) {
        setState(() {
          titleAppBar = title;
          tabIndex = index;
        });
      }, tabIndex),
      body: getDrawerItemWidget(tabIndex, titleAppBar),
    );
  }


  @override
  Widget build(BuildContext context) {
    getMonthYear();


    return
      new MaterialApp(
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: [
            Locale('en'),
            Locale('zh'),
            Locale('fr'),
            Locale('es'),
            Locale('de'),
            Locale('ru'),
            Locale('ja'),
            Locale('ar'),
            Locale('fa'),
          ],
          title: widget.title,
          home: homeScreen(context)

      );
  }
}

if you take a look at my code above and check the homeScreen function, you will notice that i have a menu widget under actions: <Widget>[ command. this is the menu that is appearing on the toolbar. when i move to another page using navigational menu, the same menu appear. i want to remove the menu when going to another page. is there a way to tell flutter to only display the menu on the home page? maybe an if statement in actions: part in homeScreen function.

oct 2019 menu appear on toolbar in the home page. enter image description here

oct 2019 menu appear on toolbar in the income budget screen also. i dont want the menu there. only on homepage screen

enter image description here

Upvotes: 0

Views: 232

Answers (1)

RegularGuy
RegularGuy

Reputation: 3686

You can conditionally tell your builder to destroy the date if the tabIndex is not 0, and create it again if it's 0

      Builder(
        builder: (context) => tabIndex==0 ? //here we check
         FlatButton.icon(
          icon: Icon(Icons.calendar_today, color: white,), //`Icon` to display
          label: Text(monthName1 + ' $year'  , style: TextStyle(color: white, fontSize: 18)), //`Text` to display
          onPressed: () {
            // DateTime date = new DateTime.now();
            // showMonthPicker(context: context, initialDate: date);
            showMonthPicker(
                context: context,
                firstDate: DateTime( DateTime.now().year - 1 , 5),
                lastDate: DateTime( DateTime.now().year + 1, 9 ),
                initialDate: selectedDate ?? initialDate
            )
                .then((date) => setState(() {
              selectedDate = date ;//!= null ? date : prevSelectedDate;

            }));
          },
        ):SizedBox() //if it's not 0 we return an empty widget
      )

Upvotes: 0

Related Questions