convex_bottom_bar 2.2.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

preview

Languages: English|简体中文

convex_bottom_bar #

Pub github Codemagic build status Coverage Status

convex_bottom_bar is now a Flutter Favorite package!

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.

Online example can be found at https://appbar.codemagic.app.

Here are some supported style:

fixedreactbadge chip
fixedCirclereactCircleflip
textIntitledtab image

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 Pub:

dependencies:
  convex_bottom_bar: ^latest_version

You like the package ? buy me a kofi :)

Buy Me a Coffee at ko-fi.com

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

Features #

  • Provide multiple internal styles
  • Ability to change the theme of AppBar
  • Provide builder API to customize new style
  • Add badge on tab menu
  • Elegant transition animation
  • Provide hook API to override some of internal styles
  • RTL support

Table of contents #

Badge #

If you need to add badge on the tab, use ConvexAppBar.badge to get it done.

badge demo

ConvexAppBar.badge({0: '99+', 1: Icons.assistant_photo, 2: Colors.redAccent},
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.map, title: 'Discovery'),
    TabItem(icon: Icons.add, title: 'Add'),
  ],
  onTap: (int i) => print('click index=$i'),
);

The badge() method accept an array of badges; The badges is map with tab items, each value of entry can be either String, IconData, Color or Widget.

Theming #

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

AttributesDescription
backgroundColorAppBar background
gradientgradient will override backgroundColor
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
stylestyle to describe the convex shape: fixed, fixedCircle, react, reactCircle, ...
chipBuildercustom badge builder, use ConvexAppBar.badge for default badge

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.

Scaffold(
  bottomNavigationBar: ConvexAppBar.builder(
    count: 5,
    backgroundColor: Colors.blue,
    style: TabStyle.fixed,
    itemBuilder: Builder(),
  )
);

/*user defined class*/
class Builder extends DelegateBuilder {
  @override
  Widget build(BuildContext context, int index, bool active) {
    return Text('TAB $index');
  }
}

Full custom example can be found at example.

Style Hook #

Hook for internal tab style. Unlike the ConvexAppBar.builder, you may want to update the tab style without define a new tab style.

Warning:
This hook is limited, and can lead to overflow broken if the size you provide does no match with internal style.

StyleProvider(
  style: Style(),
  child: ConvexAppBar(
    initialActiveIndex: 1,
    height: 50,
    top: -30,
    curveSize: 100,
    style: TabStyle.fixedCircle,
    items: [
      TabItem(icon: Icons.link),
      TabItem(icon: Icons.import_contacts),
      TabItem(title: "2020", icon: Icons.work),
    ],
    backgroundColor: _tabBackgroundColor,
  ),
)
class Style extends StyleHook {
  @override
  double get activeIconSize => 40;

  @override
  double get activeIconMargin => 10;

  @override
  double get iconSize => 20;

  @override
  TextStyle textStyle(Color color) {
    return TextStyle(fontSize: 20, color: color);
  }
}

RTL Support #

RTL is supported internally, if you define the TextDirection inside app, the AppBar should work fine. Both RTL and LTR can be configured through Directionality:

Directionality(
  textDirection: TextDirection.rtl,
  child: Scaffold(body:ConvexAppBar(/*TODO ...*/)),
)

FAQ #

Contribution #

Please file feature requests and bugs at the issue tracker.

[2.2.4] #

  • Polish internal style, avoid reanimate when AppBar rebuild.

[2.2.3] #

  • Bug fix #59
  • Bug fix: default index not match with DefaultTabController.

[2.2.2] #

  • Fix activate index when appbar is not working with controller;
  • Dispose AnimationController when is dirty;

[2.2.1] #

  • Support RTL;

[2.2.0] #

  • Add new API to hook internal styles. Checkout StyleProvider for details;
  • Provide configuration to hide Text widget when label is empty;

[2.1.1] #

  • Fix ChipBuilder missing issue;
  • Polish ci test;

[2.1.0+1] #

  • Document all the public APIs;

[2.1.0] #

  • Add controller for Appbar to change tab index programmaticlly;
  • Support with framework's DefaultTabController and TabController;
  • Enable access to the ConvexAppBarState;
  • Fix active tab position when using even menus;

[2.0.3] #

  • Fix hitTest for active tab;

[2.0.2] #

  • Add new config parameter for initial active index;

[2.0.1] #

  • Update usage instructions in README.md;
  • Add new test cases to improve the code coverage;
  • Bug fix;

[2.0.0] #

  • Support badge on tab item;
  • Constructor update, rename the builder;
  • Bug fix;

[1.4.1] #

  • Add titled style;
  • Remove some redundant widget layers;

[1.4.0] #

  • Add flip style;
  • Add textIn style;

[1.3.1+1] #

  • Bug fix: activate icon is not working in some style;
  • Improvement: enable image with/without color blend;

[1.3.1] #

  • Support gradient background;
  • Tab item are generic type, both IconData and Widget can be used;

[1.3.0] #

  • Add new tab style;
  • Support animated tab transition;

[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/lib/main.dart

/*
 *  Copyright 2020 chaobinwu89@gmail.com
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

import 'package:convex_app_bar_example/custom_appbar_sample.dart';
import 'package:flutter/material.dart';

import 'default_appbar_demo.dart';

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

class MyApp extends StatefulWidget {
  @override
  State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (BuildContext context) => DefaultAppBarDemo(),
        "/custom": (BuildContext context) => CustomAppBarDemo(),
      },
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  convex_bottom_bar: ^2.2.4

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]
92
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]
96
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:

  • convex_bottom_bar that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
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
pana_html ^0.1.3
pedantic ^1.8.0