salomon_bottom_bar: An Accessible and Standards-Compliant Bottom Navigation Bar for Flutter

Published on by Flutter News Hub

salomon_bottom_bar: An Accessible and Standards-Compliant Bottom Navigation Bar for Flutter

The salomon_bottom_bar package provides a bottom navigation bar for Flutter apps that adheres strictly to the specifications defined by Aurélien Salomon in his Google Bottom Bar Navigation Pattern. This ensures that the navigation bar is visually consistent, accessible, and mimics the semantics of the standard BottomNavigationBar widget.

Features

  • Adheres to Salomon's specifications: Meets the exact visual design and functionality guidelines set by Salomon.
  • Highly accessible: Designed with accessibility in mind, providing clear and consistent navigation for users with disabilities.
  • Mimics BottomNavigationBar semantics: Maintains the familiar behavior and semantics of the native BottomNavigationBar widget, making it easy to integrate into existing apps.

Installation

To install the salomon_bottom_bar package, add it to your pubspec.yaml file:

dependencies:
  salomon_bottom_bar: ^X.Y.Z

Usage

To use the salomon_bottom_bar in your Flutter app, simply replace the existing BottomNavigationBar with the salomon.BottomBar widget. The following code snippet shows an example:

import 'package:salomon_bottom_bar/salomon_bottom_bar.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Salomon Bottom Bar Demo'),
      ),
      body: Center(
        child: Text('Current index: $_selectedIndex'),
      ),
      bottomNavigationBar: SalomonBottomBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          SalomonBottomBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
            selectedColor: Colors.blue,
          ),
          SalomonBottomBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
            selectedColor: Colors.red,
          ),
        ],
      ),
    );
  }
}

Accessibility

The salomon_bottom_bar is designed to be highly accessible, meeting the WCAG 2.0 guidelines. It provides clear and consistent navigation for users with disabilities, including:

  • Screen reader support: The bar's items are announced by screen readers, providing context and navigation options to visually impaired users.
  • Keyboard navigation: Users can navigate the bar using the keyboard, enabling access for users who cannot use a mouse or touchpad.
  • High-contrast mode support: The bar's colors and typography are designed to be visible in high-contrast mode, making it easier for users with low vision to use.

Conclusion

The salomon_bottom_bar package provides a powerful and accessible bottom navigation bar for Flutter apps. It adheres to the industry-standard specifications, ensuring visual consistency and accessibility. By using this package, developers can easily create apps that meet the latest design and accessibility guidelines.

Flutter News Hub