The official BottomAppBar can only display a notch FAB with an app bar, and sometimes we need a convex FAB. BottomAppBar and NotchShape's implementation inspires this ConvexAppBar.
Online example can be found at https://appbar.codemagic.app.
convex_bottom_bar is now a Flutter Favorite package!
Here are some supported style:
fixed | react | badge chip |
---|---|---|
![]() | ![]() | ![]() |
fixedCircle | reactCircle | flip |
![]() | ![]() | ![]() |
textIn | titled | tab image |
![]() | ![]() | ![]() |
button | fixed corner | |
![]() | ![]() |
Typically ConvexAppBar can work with Scaffold
by setup its bottomNavigationBar
.
The ConvexAppBar
has two constructors. The ConvexAppBar()
will use the default style to simplify the tab creation.
Add this to your package's pubspec.yaml file, use the latest version :
dependencies:
convex_bottom_bar: ^latest_version
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'),
],
onTap: (int i) => print('click index=$i'),
)
);
Flutter Version Support
As Flutter is developing fast. There can be breaking changes. We will be trying to support the stable version and beta version through different package versions.
Stable Flutter Version | Package Version | More |
---|---|---|
>=1.20 | >=2.4.0 | Since v1.20, the stable version changed the Stack api |
<1.20 | <=2.3.0 | Support for stable version such as v1.17, v1.12 is not going to be updated |
The bar will use default style, you may want to theme it. Here are some supported attributes:
Attributes | Description |
---|---|
backgroundColor | AppBar background |
gradient | gradient will override backgroundColor |
height | AppBar height |
color | tab icon/text color |
activeColor | tab icon/text color when selected |
curveSize | size of the convex shape |
top | top edge of the convex shape relative to AppBar |
cornerRadius | draw the background with topLeft and topRight corner; Only work with fixed tab style |
style | style to describe the convex shape: fixed, fixedCircle, react, reactCircle, ... |
chipBuilder | custom badge builder, use ConvexAppBar.badge for default badge |
If you need to add a badge on the tab, use the ConvexAppBar.badge
to get it done.
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 accepts an array of badges; The badges
is a map with tab items. Each value of entry can be either String
, IconData
, Color
or Widget
.
If you only need a single button, checkout the ConvexButton
.
Scaffold(
appBar: AppBar(title: const Text('ConvexButton Example')),
body: Center(child: Text('count $count')),
bottomNavigationBar: ConvexButton.fab(
onTap: () => setState(() => count++),
),
);
Hook for internal tab style. Unlike the ConvexAppBar.builder
, you may want to update the tab style without defining a new tab style.
Warning:
This hook is limited and can lead to overflow broken
if the size you provide does not 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 is supported internally, and if you define the TextDirection inside the app, the AppBar should work fine. Both RTL and LTR can be configured through Directionality
:
Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(body:ConvexAppBar(/*TODO ...*/)),
)
If the default style does not match your situation, try with ConvexAppBar.builder()
, allowing you to custom nearly all the tab features.
Scaffold(
bottomNavigationBar: ConvexAppBar.builder(
count: 5,
backgroundColor: Colors.blue,
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.
Please file feature requests and bugs at the issue tracker.
Run this command:
With Flutter:
$ flutter pub add convex_bottom_bar
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
convex_bottom_bar: ^3.2.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:convex_bottom_bar/convex_bottom_bar.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/convex_button_demo.dart';
import 'package:convex_app_bar_example/custom_appbar_sample.dart';
import 'package:convex_bottom_bar/convex_bottom_bar.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: {
"/": (_) => HelloConvexAppBar(),
"/bar": (BuildContext context) => DefaultAppBarDemo(),
"/custom": (BuildContext context) => CustomAppBarDemo(),
"/fab": (BuildContext context) => ConvexButtonDemo(),
},
);
}
}
class HelloConvexAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Hello ConvexAppBar')),
body: Center(
child: TextButton(
child: Text('Click to show full example'),
onPressed: () => Navigator.of(context).pushNamed('/bar'),
)),
bottomNavigationBar: ConvexAppBar(
style: TabStyle.react,
items: [
TabItem(icon: Icons.list),
TabItem(icon: Icons.calendar_today),
TabItem(icon: Icons.assessment),
],
initialActiveIndex: 1,
onTap: (int i) => print('click index=$i'),
),
);
}
}
Download details:
Author: hacktons.cn
Source: https://github.com/hacktons/convex_bottom_bar