Flutter common appBar with configurable action button

Question

I'm new to flutter and have a common appBar, detached from the main.dart, so I can use it on every screen. Here the dart file with the appBar.

import 'package:flutter/material.dart';
import 'package:voota/utils/Hex2Color.dart';
import 'package:intl/intl.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color bgColor = HexToColor('#508bbb');
  final String title;
  final AppBar appBar;
  final List<Widget> widgets;

  BaseAppBar({Key key, this.title, this.appBar, this.widgets})
     : super(key: key);

  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    String formattedDate = DateFormat('MMMM d, y').format(now);

    return AppBar(
      title: RichText(
        text: TextSpan(
            text: 'VOOTA ' + title,
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.white,
            ),
            children: [
              TextSpan(text: '\n'),
              TextSpan(
                text: formattedDate,
                style: TextStyle(
                  fontSize: 10.0,
                  color: Colors.white,
                ),
              ),
            ]),
        textAlign: TextAlign.center,
      ),
      centerTitle: true,
      backgroundColor: bgColor,
      elevation: 0,
      //actions: widgets,
    );
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

I simple import the dart file where the appBar is defined and so on every screen I have the same appBar, like :

Widget build(BuildContext context) {
return Scaffold(
    appBar: BaseAppBar(title: title, appBar: AppBar()),
    ....

Now I need an action button (an overflow dropdown menu) on some screens. But the actions are different from screen to screen. How Can I define this? On one screen there is only a refresh in the selection menu and in another screen there is refresh and logout and activate options with different routes. And on the dashboard there is no action at all... Thx for any help, advice or link ;)

cwhisperer cwhisperer · Accepted Answer · 2019-11-29T08:27:32

I did it the following way, hope this is correct: In my AppBar I added a class with the DropdownChoices and extended the BaseAppBar with a parameter dropdownChoices.

import 'package:flutter/material.dart';
import 'package:voota/utils/Hex2Color.dart';
import 'package:intl/intl.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color bgColor = HexToColor('#508bbb');
  final String title;
  final AppBar appBar;
  final List<Widget> widgets;
  final List<DropdownChoices> dropdownChoices;

  BaseAppBar({Key key, this.title, this.appBar, this.widgets, this.dropdownChoices}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    String formattedDate = DateFormat('MMMM d, y').format(now);

    print('app bar. count dropdown choices ${dropdownChoices.length}');

    return AppBar(
      title: RichText(
        text: TextSpan(
            text: 'VOOTA ' + title,
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.white,
            ),
            children: [
              TextSpan(text: '\n'),
              TextSpan(
                text: formattedDate,
                style: TextStyle(
                  fontSize: 10.0,
                  color: Colors.white,
                ),
              ),
            ]),
        textAlign: TextAlign.center,
      ),
      centerTitle: true,
      backgroundColor: bgColor,
      elevation: 0,
      actions: <Widget>[
        PopupMenuButton<DropdownChoices>(
          onSelected: null,
          elevation: 6,
          itemBuilder: (BuildContext context) {
            return dropdownChoices.map((DropdownChoices choice) {
              return PopupMenuItem<DropdownChoices>(
                value: choice,
                child: Text(choice.title),
              );
            }).toList();
          },
        ),
      ],
    );
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

class DropdownChoices {
  const DropdownChoices({this.title, this.icon});

  final String title;
  final IconData icon;
}

In every screen where I need the AppBar I import the AppBar.dart file and pass the dropdownChoices to the AppBar, like:

class UserProfile extends StatefulWidget {
  @override
  _UserProfile createState() => _UserProfile();
}

class _UserProfile extends State<UserProfile> {
  final String title = 'Profile';
  final bgcolor = HexToColor('#508bbb');
  final list = List();
  final isLoading = false;

  List<DropdownChoices> userdropdownchoices = <DropdownChoices>[
    DropdownChoices(title: 'Bike', icon: Icons.directions_bike),
    DropdownChoices(title: 'Car', icon: Icons.directions_car),
    DropdownChoices(title: 'Bus', icon: Icons.directions_bus),
    DropdownChoices(title: 'Trains', icon: Icons.directions_railway),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: BaseAppBar(title: title, appBar: AppBar(), dropdownChoices: userdropdownchoices),
        .....

This seems to work... Now I have to check if the List contains items and display or not the DropDownMenu. But I'm open to any suggestions ;)

Flutter common appBar with configurable action button

2 Answers