DOCSEARCHbyAlgolia
Submit Docs

convex_bottom_bar

repository·master·Indexed 21 days ago

https://github.com/hacktons/convex_bottom_bar

A Flutter package providing a convex BottomAppBar that supports a Floating Action Button (FAB) with a convex shape. It includes features such as customizable tab styles (fixed, fixedCircle, react, reactCircle), notification badges via ConvexAppBar.badge, RTL support, and the ability to synchronize with TabController or PageView. Developers can further customize the bar using StyleHook for internal styles or ConvexAppBar.builder for fully custom tab rendering logic.

Tokens
9.3K
Snippets
35
Records
47
Agent score
74%

What's inside convex_bottom_bar

  1. Explore the convex_bottom_bar_example project

    master
    The convex_bottom_bar_example project serves as a reference implementation demonstrating how to integrate and use the convex_bottom_bar plugin within a Flutter application. It is intended to be used as a starting point for developers looking to implement a convex bottom navigation bar in their own Flutter apps.

  2. Quick start with ConvexAppBar

    master

    The ConvexAppBar is typically used within a Scaffold's bottomNavigationBar property. The default constructor ConvexAppBar() uses a default style to simplify tab creation.

    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'),
  )
);

  3. Sync ConvexAppBar with TabController or PageView

    master

    To synchronize the ConvexAppBar with a TabBarView or PageView (allowing swipe gestures to update the bar), you can provide a TabController to the ConvexAppBar via the controller property.

    Using DefaultTabController

    You can wrap your widget tree in a DefaultTabController to simplify implementation. The ConvexAppBar will automatically pick up the controller from the context.

    Using a manual TabController

    For more control, create your own TabController and pass it explicitly to both the TabBarView and the ConvexAppBar.

    // Example 1: Using DefaultTabController
DefaultTabController(
  length: 5,
  child: Scaffold(
    appBar: AppBar(title: const Text('Custom ConvexAppBar')),
    body: TabBarView(
      children: ['A','B','C','D','E']
          .map((i) => Center(child: Text('$i')))
          .toList(growable: false),
    ),
    bottomNavigationBar: ConvexAppBar(/* some config*/),
  ),
);

// Example 2: Using a manual TabController
Scaffold(
  appBar: AppBar(title: const Text('Custom ConvexAppBar')),
  body: TabBarView(
    controller: _tabController,
    children: ['A','B','C','D','E']
        .map((i) => Center(child: Text('$i')))
        .toList(growable: false),
  ),
  bottomNavigationBar: ConvexAppBar(controller: _tabController/* some config*/),
);

  4. Block tab events using onTabNotify

    master

    Unlike BottomAppBar, ConvexAppBar does not allow you to float the notch button or handle tab events separately by default. To prevent a tab from being selected (blocking the tap event), use the onTabNotify callback.

    If onTabNotify returns false, the tab state will not change, and the selection will remain on the previous item as if the tap never occurred. This is useful for intercepting clicks to perform other actions, such as opening a new route via a Navigator, instead of switching tabs.

    ConvexAppBar(
  items: [
    TabItem(title: 'Home', icon: Icons.home),
    TabItem(icon: Icon(Icons.add)), // The item we want to intercept
    TabItem(title: 'Settings', icon: Icons.settings),
  ],
  onTabNotify: (i) {
    // Check if the tapped index is the one we want to block
    var intercept = i == 1;
    if (intercept) {
      // Perform an alternative action, e.g., navigation
      Navigator.pushNamed(context, '/new-screen');
    }
    // Return false to block the tab change, or true to allow it
    return !intercept;
  },
)

  6. Enable RTL support for ConvexAppBar

    master

    ConvexAppBar automatically supports Right-to-Left (RTL) layouts if you wrap your widget tree in a Directionality widget with TextDirection.rtl.

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

  8. Customize iOS Launch Screen Assets

    master

    To change the launch screen image for the iOS version of your project, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

    Using Xcode:

    1. Open your Flutter project's iOS workspace by running open ios/Runner.xcworkspace in your terminal.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired image assets into the asset catalog to replace the existing ones.
    open ios/Runner.xcworkspace

  11. Use ConvexAppBar in a Scaffold

    master

    To implement the convex bottom bar, use the ConvexAppBar widget within the bottomNavigationBar property of a Scaffold. The standard ConvexAppBar() constructor provides a default style for ease of use.

    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'),
  )
);