curved_nav_bar 0.1.0

Curved bottom navigation bar with a center action button for a middle tab, camera, dialog, or any other action.

example/lib/main.dart

import 'package:curved_nav_bar/curved_nav_bar.dart';
import 'package:flutter/material.dart';

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

/// Demo application for the curved navigation bar.
class MyApp extends StatelessWidget {
  /// Creates the demo application.
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Curved nav bar',
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Curved nav bar'),
    );
  }
}

/// Home page showing a [CurvedNavBar] with an app bar and two tabs.
class MyHomePage extends StatelessWidget {
  /// Creates a home page whose [title] is shown in the app bar.
  const MyHomePage({super.key, required this.title});

  /// Title displayed in the app bar.
  final String title;

  @override
  Widget build(BuildContext context) {
    return CurvedNavBar(
      appBar: AppBar(title: Text(title)),
      // Open on Home. Use 1 to open on Wallet instead.
      initialIndex: 0,
      onTap: (int index) => debugPrint('Selected tab $index'),
      scaffoldBackgroundColor: Colors.white,
      actionButton: CurvedActionBar(
        onTab: (bool selected) => debugPrint('Camera selected: $selected'),
        text: 'Camera',
        textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
        activeIcon: const _ActionIcon(
          icon: Icons.camera_alt,
          background: Colors.white,
        ),
        inActiveIcon: const _ActionIcon(
          icon: Icons.camera_alt_outlined,
          background: Colors.white70,
        ),
      ),
      activeColor: Colors.blue,
      navBarBackgroundColor: Colors.limeAccent,
      inActiveColor: Colors.black45,
      itemTextStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
      appBarItems: const [
        FABBottomAppBarItem(
          activeIcon: Icon(Icons.home, color: Colors.blue),
          inActiveIcon: Icon(Icons.home, color: Colors.black26),
          text: 'Home',
        ),
        FABBottomAppBarItem(
          activeIcon: Icon(Icons.wallet_giftcard, color: Colors.blue),
          inActiveIcon: Icon(Icons.wallet_giftcard, color: Colors.black26),
          text: 'Wallet',
          textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
        ),
      ],
      bodyItems: const [
        _ColorPage(color: Colors.blue, label: 'Home page'),
        _ColorPage(color: Colors.pinkAccent, label: 'Wallet page'),
      ],
      actionBarView: const _ColorPage(
        color: Colors.orange,
        label: 'Camera page',
      ),
    );
  }
}

class _ActionIcon extends StatelessWidget {
  const _ActionIcon({required this.icon, required this.background});

  final IconData icon;
  final Color background;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(color: background, shape: BoxShape.circle),
      child: Icon(icon, size: 40, color: Colors.orange),
    );
  }
}

class _ColorPage extends StatelessWidget {
  const _ColorPage({required this.color, required this.label});

  final Color color;
  final String label;

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: ColoredBox(
        color: color,
        child: Center(
          child: Text(
            label,
            style: const TextStyle(color: Colors.white, fontSize: 28),
          ),
        ),
      ),
    );
  }
}