Revision history [back]

To design a bottom navigation bar for Flutter in dark mode, you can follow these steps:

1. Add the dependencies for the bottom navigation bar in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3

1. In your main.dart file, create a stateless widget for the bottom navigation bar.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Bar',
      theme: ThemeData.dark(),
      home: MyBottomNavigationBar(),
    );
  }
}

class MyBottomNavigationBar extends StatefulWidget {
  MyBottomNavigationBarState createState() => MyBottomNavigationBarState();
}

class MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: CupertinoTabBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search),
            title: Text('Search'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Page'),
    );
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Search Page'),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Profile Page'),
    );
  }
}

1. In the MyBottomNavigationBar widget, set the theme to ThemeData.dark() to use the dark mode for the bottom navigation bar.

2. Create a CupertinoTabBar widget in the bottomNavigationBar parameter of the Scaffold widget. The CupertinoTabBar widget will take care of the bottom navigation bar UI.

3. Set the currentIndex parameter of the CupertinoTabBar widget to track the current tab selection. When a tab is tapped, the onTap function will be called and update the currentIndex value accordingly.

4. Create a List of Widget objects to hold the pages that will be displayed for each tab.

5. Finally, create three StatelessWidget objects to represent the three pages that will be displayed for each tab. In the build method for each page, return a Center widget with a Text widget to display the name of the page.

With these steps, you can design a bottom navigation bar for Flutter in dark mode.