convex_bottom_bar 1.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • new74

preview

Language: English | 中文简体

convex_bottom_bar #

Pub github

The official BottomAppBar can only display a notch FAB with app bar, sometimes we need a convex FAB. This ConvexAppBar is inspired by BottomAppBar and NotchShape's implementation.

Screenshot

Install Demo app-release.apk

How to use #

Typically ConvexAppBar can work with Scaffold by setup its bottomNavigationBar.

The ConvexAppBar has to two constructors, the ConvexAppBar() will use default style to simplify the tab creation.

Add this to your package's pubspec.yaml file, use the latest version:

dependencies:
  convex_bottom_bar: ^0.0.1
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: TAB_ITEMS,
    onTap: (int i) => setState(() {
      _selectedIndex = i;
    }),
    actionItem: const TabItem(icon: Icons.add, title: "Publish"),
    onTapActionButton: () => setState(() {
      _selectedIndex = -1;
    }),
  ),
);

Table of contents #

Theming #

The bar will use default style, you may want to theme it. Here are some supported attributes:

AttributesDescription
backgroundColorAppBar background
heightAppBar height
colortab icon/text color
activeColortab icon/text color when selected
curveSizesize of the convex shape
toptop edge of the convex shape relative to AppBar

Custom Example #

If the default style does not match with your situation, try with ConvexAppBar.builder(), which allow you to custom nearly all the tab features.

Here is a custom sample: custom preview

Scaffold(
  bottomNavigationBar: ConvexAppBar.builder(
    count: items.length,
    backgroundColor: _tabBackgroundColor,
    tabBuilder: (BuildContext context, int index, bool active) {
      var navigationItem = items[index];
      var _color = active ? Colors.white : Colors.white60;
      var _icon = active
          ? navigationItem.activeIcon ?? navigationItem.icon
          : navigationItem.icon;
      return Container(
        color: Colors.transparent,
        padding: EdgeInsets.only(bottom: 2),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(_icon, color: _color),
            Text(navigationItem.title, style: TextStyle(color: _color))
          ],
        ),
      );
    },
    actionBuilder: (BuildContext context, int index, bool active) {
      var _color = active ? Colors.white : Colors.white60;
      return Stack(
        alignment: Alignment.center,
        children: <Widget>[
          SizedBox(
            width: 60,
            height: 60,
            child: Container(
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: _color),
              child: Icon(
                Icons.add,
                size: 40,
                color: _tabBackgroundColor,
              ),
            ),
          )
        ],
      );
    },
  ),
);

Contribution #

Please file feature requests and bugs at the issue tracker.

Help #

For more detail, please refer to the example project.

[1.2.0]

  • Support iPhoneX' safe area at bottom edge. #issues/7

[1.1.0]

  • Add elevation attribute.

[1.0.2+1]

  • Documentation fixes.

[1.0.2]

  • Fix maintenance suggestions to get higher score

[0.0.1]

  • Publish the packages to pub.dev

example/README.md

convex_bottom_bar_example #

Demonstrates how to use the convex_bottom_bar plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

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

Use this package as a library

1. Depend on it

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


dependencies:
  convex_bottom_bar: ^1.2.0

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:convex_bottom_bar/convex_bottom_bar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
47
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Nov 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test