flutter_animated_navkit 1.0.0 copy "flutter_animated_navkit: ^1.0.0" to clipboard
flutter_animated_navkit: ^1.0.0 copied to clipboard

A customizable animated bottom navigation bar with expandable hexagonal notch for Flutter apps.

example/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animated_navkit/flutter_animated_navkit.dart';
import 'package:flutter_animated_navkit/model/bottom_nav_item.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animated NavKit Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    ListView.builder(
      padding: const EdgeInsets.only(bottom: 100),
      itemCount: 5,
      itemBuilder: (context, index) => ListTile(
        leading: const Icon(Icons.notifications),
        title: Text('Notification ${index + 1}'),
      ),
    ),
    ListView.builder(
      padding: const EdgeInsets.only(bottom: 100),
      itemCount: 5,
      itemBuilder: (context, index) => ListTile(
        leading: const Icon(Icons.person),
        title: Text('Profile Info ${index + 1}'),
      ),
    ),
    ListView.builder(
      padding: const EdgeInsets.only(bottom: 100),
      itemCount: 5,
      itemBuilder: (context, index) => ListTile(
        leading: const Icon(Icons.person),
        title: Text('Profile Info ${index + 1}'),
      ),
    ),
    ListView.builder(
      padding: const EdgeInsets.only(bottom: 100),
      itemCount: 5,
      itemBuilder: (context, index) => ListTile(
        leading: const Icon(Icons.person),
        title: Text('Profile Info ${index + 1}'),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: SafeArea(bottom: false, child: _pages[_currentIndex]),
      bottomNavigationBar: AnimatedBottomNavkit(
        menuExpandDuration: Duration(milliseconds: 500),
        middleHexagonIconSize: 25,
        middleHexagonElevation: 15,
        expandedMenuIconSpacing: 25,
        expandedMenuIcons: [
          MenuIconItem(
            onTap: () {},
            widget: Icon(
              CupertinoIcons.camera,
              color: Colors.white,
              size: 25,
            ),
          ),
          MenuIconItem(
            onTap: () {},
            widget: Icon(
              CupertinoIcons.mic,
              color: Colors.white,
              size: 25,
            ),
          ),
          MenuIconItem(
            onTap: () {},
            widget: Icon(
              CupertinoIcons.play,
              color: Colors.white,
              size: 25,
            ),
          ),
        ],
        items: [
          BottomNavItem(
            icon: CupertinoIcons.home,
          ),
          BottomNavItem(
            icon: CupertinoIcons.search,
          ),
          BottomNavItem(
            icon: CupertinoIcons.person,
          ),
          BottomNavItem(
            icon: CupertinoIcons.settings,
          ),
        ],
        middleHexagonSize: 50,
        showMiddleNotch: true,
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
      ),
    );
  }
}
11
likes
140
points
16
downloads

Publisher

unverified uploader

Weekly Downloads

A customizable animated bottom navigation bar with expandable hexagonal notch for Flutter apps.

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

MIT (license)

Dependencies

flutter, hexagon

More

Packages that depend on flutter_animated_navkit