Expandable bottom app bar widget for Flutter SDK

Overview

ExpandableBottomAppBar

pub package

Animatable bottom app bar with expandable sheet

Preview

preview

Getting Started

Add the plugin:

dependencies:
  ...
  expandable_bottom_bar: any

Basic Usage

Adding the widget

[ Expanded( child: Text( "Hello", textAlign: TextAlign.center, ), ), Spacer( flex: 2, ), Expanded( child: Text( "World", textAlign: TextAlign.center, ), ), ], ), ), )">
bottomNavigationBar: BottomExpandableAppBar(
        // Provide the bar controller in build method or default controller as ancestor in a tree 
        controller: bbc,
        expandedHeight: expandedHeight.value,
        horizontalMargin: 16,
        expandedBackColor: Theme.of(context).backgroundColor,
        // Your bottom sheet code here
        expandedBody: Center(
          child: Text("Hello world!"),
        ),
        // Your bottom app bar code here
        bottomAppBarBody: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: Text(
                  "Hello",
                  textAlign: TextAlign.center,
                ),
              ),
              Spacer(
                flex: 2,
              ),
              Expanded(
                child: Text(
                  "World",
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      )

Customization (Optional)

BottomExpandableAppBar

horizontalMargin - distance of sheet's sides from edge
bottomOffset - distance of top sheet's edge from top appbar's edge in closed state
shape - notch shape for FAB
appBarHeight - if you need change app bar height

bottomAppBarColor - background color of appbar container
or appBarDecoration - decoration of appbar container

expandedBackColor - background color of sheet container
or expandedDecoration - decoration of sheet container

Controls

BottomAppBarController

Settings

snap - if true sheet will snap to opened and closed state
dragLength - distance that pointer should travel for fully open/close the sheet

Callbacks

Should have dragLength defined
onDrag - use that with GestureDetector for swipe control
onDragEnd - use that with GestureDetector for swipe control

open - switch the sheet to closed state
close - switch the sheet to opened state
swap - if sheet is opened closes the sheet and vice versa

Comments
  • How to close expanded body on main body tap?

    How to close expanded body on main body tap?

    Hello,

    I am new to flutter. I have used expanded bottom app bar, i want to close the expanded body when user taps in the outside area. However i dont know how it can be done.

    What exactly should be detected in order to close the pulled up expanded bottom bar?

    opened by nidhi1612 2
  • Migrated to null-safety

    Migrated to null-safety

    I have migrated expandable-bottom-bar to null-safety.

    Changes made

    • Migrated library to null-safety
    • Migrated example to null-safety
    • Updated Dart SDK version to 2.12.0

    Please have a look!

    opened by 4-alok 1
  • Add license scan report and status

    Add license scan report and status

    Your FOSSA integration was successful! Attached in this PR is a badge and license report to track scan status in your README.

    Below are docs for integrating FOSSA license checks into your CI:

    opened by fossabot 1
  • Documentation, various fixes, additions & changes

    Documentation, various fixes, additions & changes

    BREAKING:

    • [x] Changed isOpen from a method to a getter

    Backwards-compatible:

    • [x] Documented public members & methods
    • [x] Replaced deprecated inheritFromWidgetOfExactType with findAncestorWidgetOfExactType
    • [x] Added getters isOpen, isOpening, isClosed, isClosing
    • [x] Changed to AnimationStatus for status checking
    • [x] Controller notifies listeners when animation status is updated, not just on completion
    • [x] Added optional named velocity parameter to close, open and swap methods
    • [x] Clarified deprecation message for animation getter

    Since the API has a breaking change, this should receive a major version bump and changelog update (not added here). If undesirable, it could of course be done in a backwards-compatible manner by retaining the isOpen method and changing name on the getter.

    released 
    opened by arnemolland 1
  • avoid scrolling body of Scaffold

    avoid scrolling body of Scaffold

    when i add body to Scaffold, after opening bottom bar with TextField inside expandable-bottom-bar, and click on text field, that cause of scrolling body content, how can i resolve that?

    for example

    child: Scaffold(
      resizeToAvoidBottomPadding: true,
      backgroundColor: Theme.of(context).canvasColor,
      extendBody: true,
      body: Stack(children: <Widget>[Center(child: Text('aaaaa'))]),
    
    opened by pishguy 1
  • Migrated to null-safety

    Migrated to null-safety

    I have migrated expandable-bottom-bar to null-safety.

    Changes made

    • Migrated library to null-safety
    • Migrated example to null-safety
    • Updated Dart SDK version to 2.12.0

    Please have a look!

    opened by 4-alok 0
  • Make use of ChangeNotifier

    Make use of ChangeNotifier

    Ensure that registered listeners on the BottomBarController are called.

    _bottomBarController = BottomBarController(
          vsync: this,
          snap: true,
          dragLength: 200,
        )..addListener(() => print('This fires up anytime ButtomBar is opened or closed '));
    
    released 
    opened by codekeyz 0
  • Provide a simple working example

    Provide a simple working example

    Can you please provide a simple working example. The example in the read me file doesn't provide any information on what I need to replace the following with:

    // Provide the bar controller in build method or default controller as ancestor in a tree controller: bbc,

    What is this controller? What does it do?

    Can we get a sample???

    opened by fhidal01 1
  • Lay the bottom bar over the scaffold

    Lay the bottom bar over the scaffold

    Hi, I have a little problem. Whenever I open the bottom bar it pushes the scaffold body up, and in some cases causes overflow error of the scaffold. How can I fix this such that whenever I open the bottom bar it lays directly untop of the scaffold. I attached screenshots. Screenshot_20200103-151514 Screenshot_20200703-231457

    opened by moyosolaa 3
  • How to make two drag like google map?

    How to make two drag like google map?

    In google map you drag, One time we can see the category. Second time to reach the full screen and see the detail? is it possible to achieve such a thing?

    opened by Phearun99 0
  • Overflow warning when opening or closing the bottom bar

    Overflow warning when opening or closing the bottom bar

    The overflow warning appears when opening or closing the bottom bar, because some content 'overflows' the screen and is hidden. But I don't understand : that effectively the purpose of the widget, so why does it shows the warning ?

    opened by Kamel38 4
Releases(v2.0.2)
Owner
melvspace
Software Engineer
melvspace
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
simple flutter bottom navigation bar widget

bmnav A very flexible Flutter implementation of the Bottom Navigation Bar. Get Started Add bmanv to your pubspec.yaml file: dependencies: bmnav: ^0.

Edwin 21 Oct 8, 2022
Flutter Tutorial : Expandable List - ExpansionTile & ListTile

Flutter Tutorial - Expandable List - ExpansionTile & ListTile With Flutter ExpansionTile, you can expand and shrink your widgets and also create an ex

Qaiser farooq 1 Dec 3, 2021
An expandable text package for flutter.

Flutter Expandable Text A customisable flutter package that allows the expanding and collapsing of long text. pub.dev Getting Started Add package to y

Chappie74 3 Dec 15, 2022
A custom bottom navigation bar with box animation for flutter

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way. De

SHIVAM SONI 1 Jul 31, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Spin Circle Bottom Bar An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications. Current Features Initial Release for Spin Circ

Paras Jain 79 Dec 22, 2022
Flutter circle bottom bar by animation

Animation circle bottom bar Flutter circle bottom bar by animation how to use: 1. add dependencies to pubspec.yaml: circle_bottombar: ^1.1.1 2. create

Mehran Jafari 10 Oct 29, 2022
A 3D Bottom Navigation Bar in Flutter

flip_box_bar A 3D BottomNavigationBar inspired by Dribbble design by Dannniel [https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction]. Demo Exam

Deven Joshi 258 Nov 19, 2022
Playful and customizable bottom navigation bar for Flutter

rolling_nav_bar A bottom nav bar with layout inspired by this design and with heavily customizable animations, colors, and shapes. Getting Started To

Craig Labenz 117 Dec 22, 2022
Notched Bottom Tab Bar Example using Flutter Framework

bottom_tab_bar Notched Bottom Tab Bar Example using Flutter Framework Getting Started Flutter tutorial explaining how to create a notched shaped botto

Mahtab Ali 76 Dec 6, 2022
Custom Shaped Bottom Navigation Bar in Flutter

CustomShapedBottomBar Custom Shaped Bottom Navigation Bar in Flutter **Usage: ** Add CustomPaint Widget to use this Painter class like this: C

Shraddha Sojitra 5 May 6, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 55 Dec 3, 2022
A fancy animated bottom navigation bar 💫.

Stacky_bottom_nav_bar A fancy animated bottom navigation bar. Preview Default Light Mode Default Dark Mode ⚠️ IMPORTANT: when adding this widget don’t

null 5 Oct 23, 2022
This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

null 9 Nov 27, 2022
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

Ye Myo Aung 1 Apr 20, 2022
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 23 Dec 30, 2022
Woocommerce SDK for Flutter. The Complete Woo Commerce SDK for Flutter.

woocommerce Woocommerce SDK for Flutter. Getting Started Add the package to your pubspec.yaml and import. import 'package:woocommerce/woocommerce.dart

RAY 105 Dec 6, 2022