rounded_bottom_bar_flutter

Description:

rounded bottom bar flutter

Package Name: RoundedBottomBar for Flutter #
Description: #
RoundedBottomBar for Flutter is a sleek and adaptable Flutter package crafted to simplify the integration of rounded bottom navigation bars into Flutter applications. With its contemporary design and robust features, this package enables developers to seamlessly incorporate rounded bottom navigation bars, supporting both SVG icons via RoundedBottomBarSVG and icon data via RoundedBottomBar.

Features #

Sleek Design: Modern and stylish bottom navigation bars.
SVG Support: Scalable Vector Graphics (SVG) for high-quality icons.
Customization: Easily customize colors, sizes, and styles.
Smooth Transitions: Fluid animations for seamless navigation.
Flexible Configuration: Configure navigation items with ease.
Accessibility: Supports dynamic font sizing and screen readers.
Platform Compatibility: Works seamlessly on Android and iOS.

Usage #
How to Use:

Install the package using your preferred package manager (pub get).
Import the package into your Flutter project.
Instantiate the RoundedBottomBar widget and configure it with your desired settings.
Add navigation items using the items property, specifying icons, labels, and callback functions.
For SVG icons, utilize the RoundedBottomBarSVG class to provide SVG assets.

Example:
import 'package:flutter/material.dart';
import 'package:rounded_bottom_bar_flutter/rounded_bottom_bar_flutter.dart';

import 'image_routes.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int currentIndex = 0;
List<String> icons = [
ImageRoutes.navBarHome,
ImageRoutes.navBarLocation,
ImageRoutes.navBarSpeedRun,
ImageRoutes.navBarLineUp,
];
List<IconData> iconsData = [
Icons.home,
Icons.data_exploration_rounded,
Icons.run_circle_outlined,
Icons.location_pin,

];

List<Widget> pages = [
const Center(child: Icon(Icons.home)),
const Center(child: Icon(Icons.location_pin)),
const Center(child: Icon(Icons.spa_outlined)),
const Center(child: Icon(Icons.line_axis_rounded)),
];

@override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context,e)=>Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: pages.elementAt(currentIndex),
floatingActionButton: RoundedBottomBarSVG(
currentIcon: currentIndex,
onTap: (int index) => updateIndex(index),
svgIcons: icons,
),
),
);
}

updateIndex(int index) {
setState(() {
currentIndex = index;
});
}
}

copied to clipboard
Get Started:
Explore the documentation and examples to seamlessly integrate RoundedBottomBar into your Flutter project and enhance your app's navigation experience.