curved_navigation_bar

repository·master·Indexed 20 days ago

https://github.com/rafalbednarczuk/curved_navigation_bar

A Flutter package that provides a curved navigation bar component with smooth animations. It allows customization of colors, animation speed, height, and width, and supports programmatic page changes via CurvedNavigationBarState.setPage().

Tokens: 1.9K
Snippets: 5
Records: 7
Agent score: 72%

What's inside curved_navigation_bar

Install curved_navigation_bar via pubspec.yaml
master
Add the curved_navigation_bar package to your Flutter project's dependencies section in pubspec.yaml to use the curved navigation bar component.
```
dependencies:
  curved_navigation_bar: ^1.0.6 #latest version
```
https://github.com/rafalbednarczuk/curved_navigation_bar/blob/master/README.md
Customize iOS Launch Screen Assets
master
To change the launch screen image for the iOS version of the application, 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 the iOS project workspace by running open ios/Runner.xcworkspace from your terminal.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch screen assets.
```
open ios/Runner.xcworkspace
```
https://github.com/rafalbednarczuk/curved_navigation_bar/blob/master/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md

Change the navigation page programmatically

master

To change the active page without a user tap, assign a GlobalKey<CurvedNavigationBarState> to the CurvedNavigationBar widget. You can then access the state via the key and call the setPage(int index) method.

 //State class
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
          key: _bottomNavigationKey,
          items: <Widget>[
            Icon(Icons.add, size: 30),
            Icon(Icons.list, size: 30),
            Icon(Icons.compare_arrows, size: 30),
          ],
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaleFactor: 10.0),
                ElevatedButton(
                  child: Text('Go To Page of index 1'),
                  onPressed: () {
                    //Page change using state does the same as clicking index 1 navigation button
                    final CurvedNavigationBarState? navBarState =
                        _bottomNavigationKey.currentState;
                    navBarState?.setPage(1);
                  },
                )
              ],
            ),
          ),
        ));
  }

Implement the CurvedNavigationBar widget

master

Use the CurvedNavigationBar widget within the bottomNavigationBar property of a Scaffold. You must provide a list of items (typically Icons) and an onTap callback to handle navigation events.

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: <Widget>[
      Icon(Icons.add, size: 30),
      Icon(Icons.list, size: 30),
      Icon(Icons.compare_arrows, size: 30),
    ],
    onTap: (index) {
      //Handle button tap
    },
  ),
  body: Container(color: Colors.blueAccent),
)

Reference CurvedNavigationBar attributes

master

The CurvedNavigationBar widget supports the following configuration attributes:

Attribute	Type	Description
`items`	`List<Widget>`	List of Widgets to display in the bar
`index`	`int`	The current index of the NavigationBar; used to set initial index or change current index
`color`	`Color`	Color of the NavigationBar (default: `Colors.white`)
`buttonBackgroundColor`	`Color`	Background color of the floating button (default: same as `color`)
`backgroundColor`	`Color`	Color of the NavigationBar's background (default: `Colors.blueAccent`)
`onTap`	`Function(int)`	Function handling taps on items
`animationCurve`	`Curve`	Curve interpolating button change animation (default: `Curves.easeOutCubic`)
`animationDuration`	`Duration`	Duration of button change animation (default: `Duration(milliseconds: 600)`)
`height`	`double`	Height of the NavigationBar (min: 0.0, max: 75.0)
`maxWidth`	`double`	Allows setting the width of the navigation bar lower than the entire screen width
`letIndexChange`	`Function(int) -> bool`	Function that takes page index and returns a boolean. If `false`, the page is not changed on tap. Returns `true` by default)

Use the CurvedNavigationBar widget
master
The CurvedNavigationBar is a Flutter widget that provides a curved bottom navigation bar with animated transitions between items. You can customize the colors, animation speed, curve, and height. It requires a list of items (Widgets) and an initial index.
```
CurvedNavigationBar(
  items: <Widget>[ // List of icons or widgets for each tab
    Icon(Icons.print), 
    Icon(Icons.home), 
    Icon(Icons.settings),
  ],
  index: 0, // The initial selected index
  onTap: (int index) {
    // Handle tab changes
  },
)
```
https://github.com/rafalbednarczuk/curved_navigation_bar/blob/master/lib/curved_navigation_bar.dart

Configure CurvedNavigationBar attributes

master

The CurvedNavigationBar constructor accepts the following configuration options:

Attribute	Type	Default	Description
`items`	`List<Widget>`	Required	The list of widgets to display in the navigation bar.
`index`	`int`	`0`	The initial selected index.
`color`	`Color`	`Colors.white`	The color of the curved area.
`buttonBackgroundColor`	`Color?`	`null`	The color of the floating button. If null, uses `color`.
`backgroundColor`	`Color`	`Colors.blueAccent`	The background color of the navigation bar container.
`onTap`	`ValueChanged<int>?`	`null`	Callback triggered when a new item is tapped.
`animationCurve`	`Curve`	`Curves.easeOut`	The curve used for the transition animation.
`animationDuration`	`Duration`	`600ms`	The duration of the transition animation.
`height`	`double`	`75.0`	The height of the navigation bar.
`maxWidth`	`double?`	`null`	The maximum width of the navigation bar.