[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9534":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},9534,"convex_bottom_bar","hacktons\u002Fconvex_bottom_bar","hacktons","A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.","https:\u002F\u002Fbar.hacktons.cn",null,"Dart",893,171,9,29,0,1,10.71,"Apache License 2.0",false,"master",true,[24,25,26,27,28],"appbar","bottomappbar","flutter","navigationbar","notchedtabbar","2026-06-12 02:02:08","\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\u002Fraw\u002Fmaster\u002Fdoc\u002Fpreview.png\" alt=\"appBar preview\">\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fconvex_bottom_bar\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fconvex_bottom_bar.svg\" alt=\"pub.dev\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatform-flutter-ff69b4.svg\" alt=\"github\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Fhacktons\u002Fconvex_bottom_bar\">\u003Cimg src=\"https:\u002F\u002Fcoveralls.io\u002Frepos\u002Fgithub\u002Fhacktons\u002Fconvex_bottom_bar\u002Fbadge.svg?branch=master\" alt=\"coverage\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fconvex_bottom_bar\u002Fscore\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Flikes\u002Fconvex_bottom_bar.svg\" alt=\"likes\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fconvex_bottom_bar\u002Fscore\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fpopularity\u002Fconvex_bottom_bar.svg\" alt=\"popularity\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fcodemagic.io\u002Fapps\u002F5db10f597d3edb001a6ede16\u002F5db10f597d3edb001a6ede15\u002Flatest_build\">\u003Cimg src=\"https:\u002F\u002Fapi.codemagic.io\u002Fapps\u002F5db10f597d3edb001a6ede16\u002F5db10f597d3edb001a6ede15\u002Fstatus_badge.svg\" alt=\"build status\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\u002Fraw\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fhacktons\u002Fconvex_bottom_bar.svg\" alt=\"license\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\u002Fblob\u002Fmaster\u002FREADME.md\">English\u003C\u002Fa>\n    | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\u002Fblob\u002Fmaster\u002FREADME-zh.md\">简体中文\u003C\u002Fa>\n\u003C\u002Fp>\n\n---\n\nThe 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.\n\nOnline example can be found at [https:\u002F\u002Fappbar.codemagic.app](https:\u002F\u002Fappbar.codemagic.app).\n\n**convex_bottom_bar is now a [Flutter Favorite](https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fpackages-and-plugins\u002Ffavorites) package!**\n\n\u003Ca href=\"https:\u002F\u002Fflutter.dev\u002Fdocs\u002Fdevelopment\u002Fpackages-and-plugins\u002Ffavorites\">\n\u003Cimg height=\"128\" src=\"https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\u002Fraw\u002Fmaster\u002Fdoc\u002Fflutter-favorite.png\">\n\u003C\u002Fa>\n\nHere are some supported style:\n\n|             **fixed**             |            **react**             |      **badge chip**       |\n|:---------------------------------:|:--------------------------------:|:-------------------------:|\n|     ![](doc\u002Fappbar-fixed.gif)     |    ![](doc\u002Fappbar-react.gif)     | ![](doc\u002Fappbar-badge.gif) |\n|          **fixedCircle**          |         **reactCircle**          |         **flip**          |\n| ![](doc\u002Fappbar-fixed-circle.gif)  | ![](doc\u002Fappbar-react-circle.gif) | ![](doc\u002Fappbar-flip.gif)  |\n|            **textIn**             |            **titled**            |       **tab image**       |\n|    ![](doc\u002Fappbar-textIn.gif)     |    ![](doc\u002Fappbar-titled.gif)    | ![](doc\u002Fappbar-image.gif) |\n|            **button**             |         **fixed corner**         |                           |\n| ![](doc\u002Fappbar-single-button.png) | ![](doc\u002Fappbar-corner-fixed.png) |                           |\n\n## How to use\nTypically ConvexAppBar can work with `Scaffold` by setup its `bottomNavigationBar`.\n\nThe `ConvexAppBar` has two constructors. The `ConvexAppBar()` will use the default style to simplify the tab creation.\n\nAdd this to your package's pubspec.yaml file, use the latest version [![Pub](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fconvex_bottom_bar.svg)](https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fconvex_bottom_bar):\n\n```yaml\ndependencies:\n  convex_bottom_bar: ^latest_version\n```\n\n```dart\nimport 'package:convex_bottom_bar\u002Fconvex_bottom_bar.dart';\n\nScaffold(\n  bottomNavigationBar: ConvexAppBar(\n    items: [\n      TabItem(icon: Icons.home, title: 'Home'),\n      TabItem(icon: Icons.map, title: 'Discovery'),\n      TabItem(icon: Icons.add, title: 'Add'),\n      TabItem(icon: Icons.message, title: 'Message'),\n      TabItem(icon: Icons.people, title: 'Profile'),\n    ],\n    onTap: (int i) => print('click index=$i'),\n  )\n);\n```\n\n**Flutter Version Support**  \nAs Flutter is developing fast. There can be breaking changes. We will be trying to support the\nstable version and beta version through different package versions.\n\n| **Stable Flutter Version** | **Package Version** |                                  **More**                                  |\n|:--------------------------:|:-------------------:|:--------------------------------------------------------------------------:|\n|          >=3.7.0           |       >=3.2.0       |   Since v3.7.0, the stable version changed the DefaultTabController api    |\n|           >=1.20           |       >=2.4.0       |           Since v1.20, the stable version changed the Stack api            |\n|           \u003C1.20            |       \u003C=2.3.0       | Support for stable version such as v1.17, v1.12 is not going to be updated |\n\n## Features\n* Provide multiple internal styles\n* Ability to change the theme of AppBar\n* Provide builder API to customize a new style\n* Add badge on the tab menu\n* Elegant transition animation\n* Provide hook API to override some of the internal styles\n* RTL support\n\n## Table of contents\n\n- [Theming](#theming)\n- [Badge](#badge)\n- [Single Button](#single-button)\n- [Style Hook](#style-hook)\n- [RTL Support](#rtl-support)\n- [Custom Example](#custom-example)\n- [FAQ](#faq)\n- [Donate](#donate)\n\n## Theming\nThe bar will use default style, you may want to theme it. Here are some supported attributes:\n\n![](doc\u002Fappbar-theming.png)\n\n| Attributes      | Description                                                                          |\n|-----------------|--------------------------------------------------------------------------------------|\n| backgroundColor | AppBar background                                                                    |\n| gradient        | gradient will override backgroundColor                                               |\n| height          | AppBar height                                                                        |\n| color           | tab icon\u002Ftext color                                                                  |\n| activeColor     | tab icon\u002Ftext color **when selected**                                                |\n| curveSize       | size of the convex shape                                                             |\n| top             | top edge of the convex shape relative to AppBar                                      |\n| cornerRadius    | draw the background with topLeft and topRight corner; Only work with fixed tab style |\n| style           | style to describe the convex shape: **fixed, fixedCircle, react, reactCircle**, ...  |\n| chipBuilder     | custom badge builder, use **ConvexAppBar.badge** for default badge                   |\n\n## Badge\n\nIf you need to add a badge on the tab, use the `ConvexAppBar.badge` to get it done. \n\n[![badge demo](doc\u002Fbadge-demo-preview.gif)](doc\u002Fbadge-demo.mp4 \"badge demo\")\n\n```dart\nConvexAppBar.badge({0: '99+', 1: Icons.assistant_photo, 2: Colors.redAccent},\n  items: [\n    TabItem(icon: Icons.home, title: 'Home'),\n    TabItem(icon: Icons.map, title: 'Discovery'),\n    TabItem(icon: Icons.add, title: 'Add'),\n  ],\n  onTap: (int i) => print('click index=$i'),\n);\n```\n\nThe `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`. \n\n## Single Button\n\nIf you only need a single button, checkout the `ConvexButton`.\n\n![button](doc\u002Fappbar-single-shape.png)\n\n```dart\nScaffold(\n  appBar: AppBar(title: const Text('ConvexButton Example')),\n  body: Center(child: Text('count $count')),\n  bottomNavigationBar: ConvexButton.fab(\n    onTap: () => setState(() => count++),\n  ),\n);\n```\n\n## Style Hook\nHook for internal tab style. Unlike the `ConvexAppBar.builder`, you may want to update the tab style without defining a new tab style.\n\n**Warning:**  \nThis hook is limited and can lead to `overflow broken` if the size you provide does not match with internal style.\n\n```dart\nStyleProvider(\n  style: Style(),\n  child: ConvexAppBar(\n    initialActiveIndex: 1,\n    height: 50,\n    top: -30,\n    curveSize: 100,\n    style: TabStyle.fixedCircle,\n    items: [\n      TabItem(icon: Icons.link),\n      TabItem(icon: Icons.import_contacts),\n      TabItem(title: \"2020\", icon: Icons.work),\n    ],\n    backgroundColor: _tabBackgroundColor,\n  ),\n)\nclass Style extends StyleHook {\n  @override\n  double get activeIconSize => 40;\n\n  @override\n  double get activeIconMargin => 10;\n\n  @override\n  double get iconSize => 20;\n\n  @override\n  TextStyle textStyle(Color color) {\n    return TextStyle(fontSize: 20, color: color);\n  }\n}\n```\n\n## RTL Support\nRTL is supported internally, and if you define the TextDirection inside the app, the AppBar should work fine.\nBoth RTL and LTR can be configured through `Directionality`:\n```dart\nDirectionality(\n  textDirection: TextDirection.rtl,\n  child: Scaffold(body:ConvexAppBar(\u002F*TODO ...*\u002F)),\n)\n```\n\n## Custom Example\n\nIf the default style does not match your situation, try with `ConvexAppBar.builder()`, allowing you to custom nearly all the tab features.\n\n```dart\nScaffold(\n  bottomNavigationBar: ConvexAppBar.builder(\n    count: 5,\n    backgroundColor: Colors.blue,\n    itemBuilder: Builder(),\n  )\n);\n\n\u002F\u002F user defined class\nclass Builder extends DelegateBuilder {\n  @override\n  Widget build(BuildContext context, int index, bool active) {\n    return Text('TAB $index');\n  }\n}\n```\n\nFull custom example can be found at [example](example). \n\n## FAQ\nPlease file feature requests and bugs at the [issue tracker](https:\u002F\u002Fgithub.com\u002Fhacktons\u002Fconvex_bottom_bar\u002Fissues).\n\n* [How to block tab event?](doc\u002Fhow-to-block-tab-event.md)\n* [Crash on flutter dev\u002Fbeta channel](doc\u002Fissue-crash-on-flutter-dev-channel.md)\n* [Change active tab index programmatically](doc\u002Fissue-change-active-tab-index.md)\n* [Using an image instead of an icon for actionItem](doc\u002Fissue-image-for-actionitem.md)\n* [Is there anyway to remove elevation in the bottom bar?](doc\u002Fissue-remove-elevation.md) \n\n## Donate\nYou like the package ? Buy me a coffee :)\n\n[![ko-fi](doc\u002Fdonate-kofi1.png)](https:\u002F\u002Fko-fi.com\u002Fhacktons)\n","convex_bottom_bar 是一个 Flutter 包，用于在应用底部栏实现凸形标签。该项目支持多种样式配置，包括固定、反应式、徽章等，并且兼容主题定制，为开发者提供了丰富的自定义选项。核心功能是通过 ConvexAppBar 组件来创建具有独特视觉效果的底部导航栏，适用于需要增强用户界面美观度和交互性的移动应用开发场景。无论是简单的工具类应用还是复杂的社交平台，convex_bottom_bar 都能帮助提高用户体验。",2,"2026-06-11 03:23:16","top_language"]