Ask Your Question
4

How can I design a bottom navigation bar for FLUTTER in dark mode?

asked 2023-04-28 16:15:21 +0000

scrum gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2023-04-28 16:19:02 +0000

woof gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-04-28 16:15:21 +0000

Seen: 10 times

Last updated: Apr 28 '23