bottom_bar_with_sheet 0.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new60

bottom_bar_with_sheet #

šŸ’„Non-standard way to use more space of screens in your applicationšŸ’„
šŸ˜³Custom bottom Sheet under Bottom Navigation BaršŸ˜³
šŸ˜©Sounds sucks? šŸ˜‰First of all look at screens!

Getting Started #

Add dependency #

dependencies:
  bottom_bar_withs_sheet: ^0.0.1 #latest version

Add import package #

import 'package:bottom_bar_with_sheet/bottom_bar_withs_sheet.dart';

Easy to use #

Scaffold(
      body: Center(child: Text("Place for your content")),

      bottomNavigationBar: BottomBarWithSheet(
        selectedIndex: selectedIndex,
        duration: Duration(milliseconds: 600),
        styleBottomBar: BottomBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemIconColor: Colors.white,
          selectedItemLabelColor: Colors.black,
          mainActionButtonSize: 55,
          barHeightClosed: 70,
          barHeightOpened: 400,
          marginBetweenPanelAndActtionButton: 30,
          rightMargin: 15,
          mainActionButtonPadding: EdgeInsets.all(7),
          mainActionButtonIconClosed: Icon(Icons.arrow_drop_up, color:Colors.white , size: 40,),
          mainActionButtonIconOpened: Icon(Icons.arrow_drop_down, color:Colors.white, size: 40,),
        ),

        onSelectItem: (index) {
          setState(() {
            selectedIndex = index;
          });
        },

        sheetChild: Center(child: Text("Place for your another content")),

        items: [
          BottomBarWithSheetItem(
            iconData: Icons.people,
            label: 'Profile',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.shopping_cart,
            label: 'Cart',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.settings,
            label: 'Settings',
            selectedBackgroundColor: Colors.blue,
          ),
        ],

      ),
    );

Attributes #

sheetChild: an Widget to display on bottom sheet
selectedIndex: index of element in tab panel, can be used to change screens
duration: time to open the sheet
onSelectItem: function handling taps on items in tab panel
isOpened: bool value. Set true if you need to open bottom sheet when page was builded
items: List of BottomBarWithSheetItem(

  • iconData: icon Widget that you use in tab button
  • label: text under tab button
  • selectedBackgroundColor: background color of circle when tab bar is selected
  • itemWidth: custom width of element in tab panel
  • animationDuration: speed of animation
  • itemIconColor: custom color of element in tab panel
)
styleBottomBar: -> List of style settings to customize your bottom_bar_with_sheet ->(
  • Sizes

  • barBackgroundColor: background color of main Widget
  • rightMargin: size of space between right mobile border and Widget insides
  • leftMargin: size of space between left mobile border and Widget insides
  • marginBetweenPanelAndActtionButton: it seems so clear. No?. Request issue if so.
  • barHeightClosed: main Widget height when sheet is closed
  • barHeightOpened: main Widget height when sheet is opened
  • mainActionButtonPadding: space beetwen circle border and icon of main action button
  • mainActionButtonSize: size of main action button
  • notchMargin: radius of space size between FloatingActionBar and BottomNavigationBar (if you need in FAB)
  • Colors

  • mainActionButtonColorSplash: main action button splash color
  • mainActionButtonColor: main action button color
  • barBackgroundColor: backgroun color of tab panel
  • selectedItemBackgroundColor: background circle color of selected item
  • selectedItemIconColor: color of selected item icon
  • selectedItemLabelColor: color of selected item text
  • itemIconColor: color of unselected item icon
  • itemLabelColor: color of unselected item text
  • Widgets & Full Styles

  • mainActionButtonIconClosed: icon when sheet is closed
  • mainActionButtonIconOpened: icon when sheet is opened
  • selectedItemLabelColor: text style of selected item text
  • itemTextStyle: text style unselected item text
  • borderRadius: main Widget border radius
  • boxShadow: main Widget shadow
)

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[0.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:bottom_bar_with_sheet/bottom_bar_withs_sheet.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'bottom_bar_with_sheet v0.0.1'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: Center(child: Text("Place for your content")),

      bottomNavigationBar: BottomBarWithSheet(
        sheetChild: Center(child: Text("Place for your another content")),

        selectedIndex: selectedIndex,
        duration: Duration(milliseconds: 600),
        styleBottomBar: BottomBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemIconColor: Colors.white,
          selectedItemLabelColor: Colors.black,
          mainActionButtonSize: 55,
          barHeightClosed: 70,
          barHeightOpened: 400,
          marginBetweenPanelAndActtionButton: 30,
          rightMargin: 15,
          mainActionButtonPadding: EdgeInsets.all(7),
          mainActionButtonIconClosed: Icon(Icons.arrow_drop_up, color:Colors.white , size: 40,),
          mainActionButtonIconOpened: Icon(Icons.arrow_drop_down, color:Colors.white, size: 40,),
        ),

        onSelectItem: (index) {
          setState(() {
            selectedIndex = index;
          });
        },

        items: [
          BottomBarWithSheetItem(
            iconData: Icons.people,
            label: 'Profile',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.shopping_cart,
            label: 'Cart',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.settings,
            label: 'Settings',
            selectedBackgroundColor: Colors.blue,
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  bottom_bar_with_sheet: ^0.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:bottom_bar_with_sheet/bottom_bar_withs_sheet.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
26
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
60
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • bottom_bar_with_sheet that is a package requiring null.

Health issues and suggestions

Document public APIs. (-0.21 points)

72 out of 74 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Fix lib/bottom_bar_withs_sheet.dart. (-1 points)

Analysis of lib/bottom_bar_withs_sheet.dart reported 2 hints:

line 18 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: BottomBarWithSheet.isOpened, BottomBarWithSheet.duration, BottomBarWithSheet.bottomBarMainAxisAlignment

line 72 col 8: This method overrides a method annotated as '@mustCallSuper' in 'State', but doesn't invoke the overridden method.

Fix lib/src/bottom_bar_with_sheet_item.dart. (-0.50 points)

Analysis of lib/src/bottom_bar_with_sheet_item.dart reported 1 hint:

line 11 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: BottomBarWithSheetItem.selectedBackgroundColor, BottomBarWithSheetItem.selectedLabelColor, BottomBarWithSheetItem.itemIconColor, BottomBarWithSheetItem.index, BottomBarWithSheetItem.selectedIndex, BottomBarWithSheetItem.styleBottomBar, BottomBarWithSheetItem.itemWidth, BottomBarWithSheetItem.isOpened, BottomBarWithSheetItem.bottomBarMainAxisAlignment

Format lib/src/bottom_bar_with_sheet_theme.dart.

Run flutter format to format lib/src/bottom_bar_with_sheet_theme.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
provider ^4.0.2 4.3.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
nested 0.0.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test