Menus and Appbar actions

By pjain      Published June 30, 2020, 11:14 p.m. in blog Programming   

Part of Series - Flutter/Dart Series

AppBar actions

UXD 101

Typical appbar can display a combination of

  • Navigation icon (optional) e.g. can have a hamburger or a Left < icon to navigate back -
  • Title (left-aligned on Android, centered on ios - unless if multiple icons, then left aligned)
  • A few (3-4 at most) action choices usually with just an icons.
  • Remaining choices are included in the overflow dropdow menu.
  • Bars can contain imagery. Wider (called prominent) top app bars are recommended for image use because they provide more space.
  • For Material Design UI guidelines see - App bars: top

Basic Scaffold AppBar pattern with an action button

    return Scaffold(
      appBar: AppBar(
        title: Text("Tinder App"),
        elevation: .3, //gives a 3D appearance
        backgroundColor: Colors.purple,
        actions: <Widget>[
          IconButton(icon: new Icon(Icons.email, color: Colors.white), tooltip: 'EMail',
            onPressed: () {print("Emailing..");},
          )
        ],
      ),
      body: ...
     ); // Scaffold

3-dot menu

Action Buttons

Action Buttons example with dialog entry

         IconButton(
            icon: Icon(Icons.person),
            onPressed: () async {
              final String name = await dialogGetString(context,"Prompt","Team Name",'eg. Juventus F.C.');
              print("Name $name" );
            },
          ),

CRUD: Add-Edit Crud Delete Buttons WITH TEXT

  • Typically AppBar can have a title that can be Add (if new blank item), or Edit (for existing item).
  • Fab Button + is used to add a new one
  • If editing, can have a Delete action bar with text (or could have e.g. a trash icon).
  • from noteaddedit.dart, TodoAddEditPage
      @override Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar( 
            title: Text(widget.isEdit ? "Edit Note":"Add Note" ), // note.title
            backgroundColor: Color(0xff1976d2),
           actions: !widget.isEdit ? [Container()] : <Widget>[
              Padding( padding:EdgeInsets.only(right:20),
                child: GestureDetector(
                  child: Icon(Icons.delete, size:26.0),
                  onTap: () {
                    NoteItem.delete(note);
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          ),
          floatingActionButton: 

Sort A-Z, Z-A popup menu

  • See ContactsList.dart, dashiconmenu.dart for examples with details

--- XFR ----

  • from filepick.dart

7 comments

Comment 1 by kyrie 3 July 13, 2020, 8:40 p.m.

I wanted to jot down a simple note in order to thank you for those amazing tactics you are giving out here. My long internet investigation has at the end of the day been rewarded with awesome details to exchange with my close friends. I 'd assert that most of us site visitors actually are quite endowed to be in a good site with so many perfect people with great strategies. I feel truly lucky to have come across your entire web site and look forward to plenty of more exciting minutes reading here. Thanks once more for everything.
kyrie 3 [url=http://www.kyrie3.us.com]kyrie 3[/url]

Comment 2 by golden goose July 20, 2020, 6:36 p.m.

Thanks so much for giving everyone remarkably brilliant opportunity to check tips from here. It is always so amazing plus jam-packed with amusement for me personally and my office mates to search the blog at a minimum thrice every week to read through the newest issues you have got. And definitely, I'm so certainly impressed with your mind-boggling creative concepts served by you. Certain 2 ideas on this page are unquestionably the most effective we have all had.
golden goose

Comment 3 by jordan shoes July 23, 2020, 8:34 p.m.

I wanted to post you one little bit of note to say thank you again with your striking knowledge you've shown in this article. It's simply seriously generous of people like you to allow unhampered just what a number of people might have advertised for an e book to generate some bucks for their own end, specifically given that you could have tried it in case you desired. These things as well worked to be the fantastic way to be certain that many people have similar eagerness really like mine to learn many more when it comes to this issue. I think there are millions of more pleasant times up front for folks who view your blog.
jordan shoes

Comment 4 by ultra boost 3.0 July 26, 2020, 10:51 p.m.

I definitely wanted to post a brief remark to be able to express gratitude to you for the wonderful information you are sharing on this website. My extensive internet search has at the end of the day been paid with excellent suggestions to exchange with my neighbours. I 'd repeat that many of us visitors actually are very much endowed to exist in a notable site with very many wonderful professionals with good points. I feel rather privileged to have come across the website page and look forward to tons of more exciting times reading here. Thanks once again for a lot of things.
ultra boost 3.0

Comment 5 by golden goose July 29, 2020, 8:31 p.m.

I wish to voice my affection for your kind-heartedness giving support to people who require guidance on this one theme. Your personal commitment to passing the solution along became extraordinarily helpful and have frequently permitted somebody like me to get to their goals. The helpful hints and tips denotes so much a person like me and additionally to my office colleagues. Warm regards; from all of us.
golden goose

Comment 6 by westbrook shoes Aug. 1, 2020, 8:13 p.m.

I just wanted to develop a quick word to say thanks to you for these magnificent solutions you are giving at this website. My extensive internet research has at the end been recognized with reasonable details to share with my close friends. I would believe that we site visitors actually are truly endowed to dwell in a fantastic community with so many brilliant professionals with very beneficial basics. I feel quite privileged to have come across your website and look forward to really more awesome times reading here. Thanks a lot once more for all the details.
westbrook shoes

Comment 7 by kyrie 6 Aug. 4, 2020, 8 p.m.

I have to show my appreciation for your kind-heartedness for individuals who need guidance on this important idea. Your personal dedication to getting the message all over was exceedingly good and has continuously helped professionals much like me to arrive at their endeavors. Your entire invaluable publication signifies this much a person like me and substantially more to my peers. Many thanks; from each one of us.
kyrie 6

Add new comment

Similar posts

Outbound,Sending Customer UX Marketing

Cb Events, Buttons in Flutter

Cu Custom Widgets for Flutter

Cm Motion and Animation, EZ Widgets for Flutter