Git Product home page Git Product logo

flutter_speed_dial's Introduction

Flutter Speed Dial

Flutter package to render a Material Design Speed Dial.

GitHub release License Classic API Docs Usage

Usage

The SpeedDial widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton widget. You can set its position using Scaffold.floatingActionButtonLocation argument. It can also be used with Scaffold.bottomNavigationBar and Snackbar.

Null safety is available from version 3.0.5 ( It is also backward compatible, meaning you can use it with non null safe code too )

Labels

SpeedDial can take any Widget as label SpeedDial will use Extended FloatingActionButton property if label is specified. It also have activeLabel property by which you can specify the label which is shown when SpeedDial is open. It also comes with its labelTransitionBuilder which defaults to fade transition.

Also Every child's button have label property which accepts String which can be styled by using labelStyle. If you want to specify a widget then you can use labelWidget.
If the label parameter is not provided, then the label will be not rendered.

Types of child for SpeedDial (Ordered by their priority)

Animated Icon using animatedIcon property SpeedDial's AnimatedIcon has two specific parameters:
  • animatedIcon takes an AnimatedIconData widget
  • animatedIconTheme takes IconThemeData
Widget using child & activeChild property SpeedDial's Widget has two specific parameters:
  • child takes a widget and is the default placeholder if dial is not open.
  • activeChild takes a widget and is the child's Widget which is used when dial is open, not required.
IconData using icon & activeIcon property SpeedDial's IconData has three specific parameters:
  • icon takes a IconData and is the default placeholder if dial is not open.
  • activeIcon takes a IconData and is the child's IconData which is used when dial is open, not required.
  • iconTheme takes its IconThemeData which includes color and size.

The package will handle the animation by itself.

Handle spacing

There are various properties for SpeedDial by which you can adjust the spacing:

  1. spacing - This parameter handles the space b/w speed dial and its children.

  2. spaceBetweenChildren - As the name suggests, this is used to adjust the space b/w every child element

  3. childPadding - This will adjust the padding of children speed dial button, this will help you to control the size of the children button more effectively.

  4. childMargin - This will help you to adjust the margin b/w children speed dial button and its label.

Close on WillPop

Closes automatically on back button press, if dial is open. If you don't want this behaviour then simply change the value of closeDialOnPop to false.

How to use openCloseDial property:

  1. Create a value notifier named isDialOpen:
ValueNotifier<bool> isDialOpen = ValueNotifier(false);
  1. Then set openCloseDial to isDialOpen in your SpeedDial:
SpeedDial(
  ...
  openCloseDial: isDialOpen,
  ...
)
  1. Now you can change the state of dial open:
isDialOpen.value = false;

Example Usage

See Example Code for more info.

Issues & Feedback

Please file an issue to send feedback or report a bug,
If you want to ask a question or suggest an idea then you can open an discussion.
Thank you!

Contributing

Every pull request is welcome.

flutter_speed_dial's People

Contributors

prateekmedia avatar darioielardi avatar luca-colazzo avatar m0veax avatar shinayser avatar irasekh3 avatar autlunatic avatar huulbaek avatar rogiervapeldoorn avatar darshanpp avatar amir-p avatar abhishekdoshi26 avatar lks-nbg avatar forsaknd avatar bwhitetp avatar wongzq avatar walmin avatar tp avatar xm0128 avatar peterbrxwn avatar dogbull avatar ozeo-dooz avatar lachlangrant avatar psyohm23 avatar davidmartos96 avatar kapace avatar carlosfiori avatar anschulz-ibm 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.