AdvFAB - An Advanced floating action button that expands itself to reveal its hidden widget

Related tags

Widgets AdvFab
Overview

AdvFAB (More Than Just A Floating Action Button)

AdvFAB is An Advanced floating action button that expands itself to reveal its hidden widget. It can also be used as an AnimatedbottomNavigationbar or just an AnimatedFloatingActionBar with the same expansion capabilities. Have a look at the gif below

Image 1 Image 2
demo image 1 domo image 2

NOTE: This package has lots of functionalities and parameters to customize your AdvFab please refer to the example floder and the full documentation in order to take advantage of this package to the fullest. Use this quick guide to setup your work environment and understand the basics :)

Important links

Create an Advanced FLoating Action Button (AdvFab)

  • First import the package inside your project
import 'package:adv_fab/adv_fab.dart';
  • In your project, create a AdvFabController
AdvFabController controller;
//now inside the inti function
@override
  void initState() {
    super.initState();
    controller = AdvFabController();
  }

This controller will allow you to expand, collapse and more importantly "setExpandedWidgetConfiguration". It will also give you the state of the AdvFab( true or false depending on whether the widget is expanded or not)

IMPORTANT : The "setExpandedWidgetConfiguration" shall be called at least once in the life time of your widget, to configure what has to be displayed once the AdvFab is expanded else you will get an error.

  • Create an AdvFab widget inside the floatingActionButton of the scaffold
Scaffold(
	floatingActionButton: AdvFab(
		//controller shall not be null (actually it can but still....)
		controller: controller
	),
)

Use flags

AdvFab allows you to create a navigation bar, an empty bar (where you can add a ny widget you want) or just a normal floating action button. To enable these functionalities, here are the flags to toggle

  • useAsFloatingSpaceBar: false (by default )
  • useAsFloatingActionButton: true ( by default )
  • useAsNavigationBar: false (by default )

IMPORTANT : There can be only one value as "true", if you set more than one value as true, then a priority rule will be applied and will set the flag with higher priority to true and you will get a configuration error warning

Important Note

  • In order to maintain the screen adaptability of this widget (to make it look even on all screens), I opted for a formula based on percentages of the screen. This means that every width and height shall be given by you in the range [0 - 100],100 inclusive. Example:
AdvFab(
   useFloatingSpaceBar: true,
   floatingSpaceBarContainerWidth: 90,
),
  • To help you debug your code easily, I included a log facility, You just have to set the ShowLogs property to true and you will get all of them.

  • When you use AdvFab as a floating Action Button, the default Icon displayed will be a warning icon in red, just use the floatingActionButtonIconColor and floatingActionButtonIcon properties to change them; The floating action button also has its idenpendent ontap property called onFloatingActionButtonTapped

  • To use the AnimatedBottomNavigationBar, the body of the scaffold shall be a AdvBottomBarBody

Conclusion

Thank you for using my package, if you have any question feel free to contact me on instagram or directly on my mail [email protected]

Here are my other packages

You might also like...

An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds

An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds. Based on the original idea by @shrouxm he

Dec 31, 2022

Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

align_positioned Widgets in this package: AlignPositioned AnimatedAlignPositioned AnimChain Why are these widgets an indispensable tool? When your des

Dec 12, 2022

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

Spannable Grid The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid. Feature

Nov 7, 2022

A dice game made with Flutter and its Animation Widget

A dice game made with Flutter and its Animation Widget

Jogo de dado feito com animação em flutter Esse projeto é um jogo de dado feito com Flutter e seus Widget de animação. Não foi necessário uso de pacot

May 10, 2022

A Widget that mimics the Facebook Reaction Button in Flutter.

A Widget that mimics the Facebook Reaction Button in Flutter.

ReactiveButton A Widget that mimics the Facebook Reaction Button in Flutter. Step by step explanation A full explanation on how to build such Widget m

Jul 12, 2022

A popup simple topModalSheet menu button widget with handsome design and easy to use

A popup simple topModalSheet menu button widget with handsome design and easy to use

top_modal_sheet A popup simple topModalSheet menu button widget with handsome design and easy to use. Installations Add top_modal_sheet: ^1.0.0 in you

Jul 29, 2022

An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension

An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension

Flutter Next Now build flutter apps with ease and responsive. An advanced flutter package to build responsive application accross all platform with ea

Dec 29, 2022

A button with ripple effect while being hold

A button with ripple effect while being hold

ripple_button a button with ripple effect while being hold build requirements to run this project you need a working enviroment of flutter v2 or highe

Nov 8, 2021

May be used to intercept the Android back-button, as an alternative to `WillPopScope`.

back_button_interceptor In simple cases, when you need to intercept the Android back-button, you usually add WillPopScope to your widget tree. However

Dec 12, 2022
Comments
  • Toggle ON/OFF Expanded Widget

    Toggle ON/OFF Expanded Widget

    Hi there, nice work. I have questions. I set AdvFab as Navbar and use onFloatingActionButtonTapped function to toggle it on the expanded widget. However, i would like to toggle it off back to navbar without depending on RaisedButton. Can you suggest how to do so?

    opened by ianeinser 2
  • How to change width for expanded fab

    How to change width for expanded fab

    I am trying to get the expanded floating action button to be wider, but I don't see any option to increase the width. I would like to make it as wide as when you are using it as floating spacebar. any suggestions?

    opened by faridg18 1
  • Migrate package to null safety

    Migrate package to null safety

    Uses the flutter dart migrate tool to shift the code to sound null safety.

    Take it for a spin by adding the following to your pubspec.yaml file:

    dependencies:
        adv_fab:
            git:
              url: https://github.com/PavieOlivier/AdvFab.git
              ref: 24c91c0
    
    opened by MillerAdulu 0
  • Detected a problem with FAB shape

    Detected a problem with FAB shape

    Hi Émile,

    Your AdvFab has been extremely useful for my final degree project (if there is any problem and you don't want me to use it with this purpose, just tell me), I was seeking just for what you achieved with this set of classes so first of all, thank you and congratulations.

    However, I detected some sort of bug (at least on my app) related with the size of the Floating Action Button: image

    This is because of the height of GestureDetector that you build as an action button. After debugging for a while I found kind of a sweet spot for that height by changing the value 7.5 of this line to 9.5: image image

    After that change the button looks like this: image

    I don't know if it's an intended design decision to keep that aspect ratio or it's truly a bug, I just thought that it could be interesting for you to know!

    Greetings from Spain

    opened by DaniBAIG7 0
Owner
Hi everyone In this account I will be focussing on flutter. If you like the content, please feel free to follow me on instagram @emilecode
null
Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Kim Seung Hwan 7 Dec 7, 2022
A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or vertically.

Juxtapose A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or verticall

Leslie Arkorful 74 Nov 24, 2022
A widget that imposes different constraints on its child than it gets from its parent

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent. Similar to `OverflowBox` except that the unconstrained width or height is sized to the intrinsic size of the child, instead of being assumed to be infinite, which allows IntrinsicSizeOverflowBox to be used in a `Scrollable` widget.

Ron Booth 3 Dec 7, 2022
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button

Flutter Reaction Button Flutter button reaction it is fully customizable widget such as Facebook reaction button. Preview Demo Usage Include 'flutter_

Abdelouahed Medjoudja 174 Dec 19, 2022
Flutter Triple Status Button can use toggle button but in three statuses.

triple_status_button Triple Status Button. Flutter Triple Status Button can use toggle button but in three statuses. Property Description height heigh

MahdiBagjani 2 Nov 13, 2021
A button that looks like a Cupertino text button

Cupertino Text Button A button that looks like a Cupertino text button! Text Button A simple text button can be created like this: CupertinoTextButton

Nick Sirovsky 0 Nov 24, 2022
An advanced switch widget, that can be fully customized with size, text, color, radius of corners.

flutter_advanced_switch An advanced switch widget, that can be fully customized with size, text, color, radius of corners. Switch Light Switch Dark Ge

Alex Melnyk 13 Dec 15, 2022
Expanded Widget Advanced Design For Flutter

app_bar A new Flutter project. Getting Started This project is a starting point

HredayTheDev 0 Jan 16, 2022
A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Zoe 116 Dec 21, 2022
A widget which implicitly launches a hero animation when its position changed within the same route.

local_hero A widget which implicitly launches a hero animation when its position changed within the same route. Getting started In the pubspec.yaml of

Romain Rastel 174 Jan 6, 2023