Giter Club home page Giter Club logo

appbar_dropdown's Introduction

AppbarDropdown

AppBar Dropdown is an attractive UI element that allows for navigation via a dropdown menu in the AppBar.

Features

  • Looks and behaves just like a beautiful AppBar Dropdown menu should
  • Configurable
  • Works over the top of a WebView

Example video

Usage

AppbarDropdown is used by setting it as the value for the flexibleSpace property of your Scaffold's AppBar.

    Scaffold(
        appBar: AppBar(
            flexibleSpace: AppbarDropdown(
                items: [ for (var i=0;i<100;i++) "User $i" ],
                selected: "User 2",
                title: ( (user) => user.toString() ),
                onClick: ( (user) => print(user) ),
            ),

Properties

Required

  • items - An array of any object type
  • title - A function that takes an object of the type in the items array and outputs a string title to display in the list, and in the heading. (This might look something like title: ( (p) => (p as MyAppPageObject).pageName ))

Suggested

  • selected - The initial default value, of the same type as the items in the array
  • onClick - A function that takes the same type of object, and does something with it (eg. change to new app page content, if the objects are page type Widgets)

Optional

  • dialogInsetPadding - Specifies the padding for the dropdown
  • dropdownAppBarColor - Specifies the colour of the dropdown, including the header

If additional styling configuration is required, please modify and submit a pull request.

appbar_dropdown's People

Contributors

krisrandall avatar gbmkonect-michael avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.