Bottom Sheet Expandable Bar

This package create a bottom navigation bar with the capability to show a bottom sheet.

Instalation

Include bottom_sheet_expandable_bar in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  bottom_sheet_expandable_bar: version

Usage

To use this package, just import it into your file and enjoy it.

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:bottom_sheet_expandable_bar/bottom_sheet_expandable_bar.dart';

...

bottomSheet: BottomBarSheet(
  children: [
    BottomSheetBarIcon(
      icon: Icon(Icons.home),
      color: Colors.redAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.person),
      color: Colors.blueAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.edit),
      color: Colors.blue[800], 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.star),
      color: Colors.orangeAccent, 
      onTap: (){
      },
    ),
  ],
),

...

IMPORTANT: Add this line to your theme to avoid an unexpected behaviour

theme: ThemeData(
  /// Add this line
  bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
),

BottomSheetBarIcon

This widget allow to generate a dynamic icon

Properties

Name	Description	Required	Default
icon	Widget to put as button icon	False
color	Color to indicate icon color	False	Colors.black
onTap	Function to handle button on tap	True

BottomBarSheet

This widget allow to generate a bottom bar with the capability to expanto to a bottom sheet

Properties

Name	Description	Required	Default
children	List of BottomSheetBarIcon widget to show icons within the bar	False
buttonPosition	ButtonBottomBarPosition to indicate expandable button position (center, end)	False	ButtonBottomBarPosition.center
backgroundBarColor	Color to indicate bottom bar background color	False	Colors.white
backgroundColor	Color to indicate bottom sheet color	False	Colors.white
showExpandableButton	Boolean value to indicate when to show or hide expandable button	False	False
innerChild	Widget to show into the bottom sheet	False
bottomRadius	Double value to indicate the corners radius for the bottom bar	False	50.0
bottomBarHeight	Double value to indicate the bottom bar height	False	60.0
bottomBarWidth	Double value to indicate the bottom bar height	False	Screen width * 0.9
duration	Duration between show or hide the bottom sheet	False	250 milliseconds
bottomSheetHeight	Double value to indicate the bottom sheet height	False	Screen height * 0.75
iconExpand	Icon to show into the expandable button	False	Icon(Icons.navigation)
iconColor	Expandable button color	False	Colors.green
onClose	Function to call when bottom sheet is closed	False	(){}
currentIndex	Integer value to indicatet which tab is selected	False	0
curve	Curve to use on enter bottom sheet animation	False	Curves.ease

Expandable button at center

Expandable button at end

As a simple navigation bar

Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Jan 8, 2023

a project for learning all Flutter Widgets , sync from flutter.dev the officia website.

Flutter Widgets Catalog （WIP）计划 1、使用Flutter开发一个全平台的Flutter Widgets Catalog APP，并且开源。在这个APP中可以通过图形化的方式查看所有Widgets的介绍，示例，视频教程。 2、所有文档内容由前一天从flutter.dev

Aug 3, 2022

This is an online grocery selling app developed using flutter and firebase for a grocery shop. This app was developed for one of my client's grocery stores. The main aim of making this project open source is because this project will cover all the basics of flutter and firebase.

Grocery_APP This is an online grocery selling app developed using flutter and firebase for a grocery shop.This app was developed for one of my client'

Dec 15, 2022

A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案）

A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案） 100% 还原 UI，只需要按照设计图写的宽高写即可先看图片，设置的标准宽度是 360 iPhone 8 --------------------------

Sep 27, 2022

Flutter 2.0 (Null safety) Basic, Dynamic & Silver style Staggered Grid views made using flutter staggered grid view package. 🦺

Staggered Grid View Developement Stack Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Oct 28, 2022

Comments

Unable to change backgroundBarColor

Hi mate,

I'm trying to change the background color of the bar but unable to. Here is the relevant part of the color: bottomSheet: BottomBarSheet(backgroundBarColor: Colors.lightBlueAccent, buttonPosition: ButtonBottomBarPosition.center, innerChild: Center( child: Text('Bottom sheet'), ), currentIndex: _currentIndex, curve: Curves.bounceIn, children: [ BottomSheetBarIcon( icon: Icon(Icons.home), color: Colors.redAccent, onTap: () { setState(() { _currentIndex = 0; }); }, ),

opened by Seferi 3
I got an Exception By Gesture

════════ Exception caught by gesture ═══════════════════════════════════════════ 'BottomSheet.animationController' can not be null when 'BottomSheet.enableDrag' is true. Use 'BottomSheet.createAnimationController' to create one, or provide another AnimationController. 'package:flutter/src/material/bottom_sheet.dart': package:flutter/…/material/bottom_sheet.dart:1 Failed assertion: line 232 pos 7: 'widget.enableDrag && widget.animationController != null'

opened by abdou-tech-maker 0