To design a bottom navigation bar for Flutter in dark mode, you can follow these steps:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.3
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'),
);
}
}
In the MyBottomNavigationBar widget, set the theme to ThemeData.dark() to use the dark mode for the bottom navigation bar.
Create a CupertinoTabBar widget in the bottomNavigationBar parameter of the Scaffold widget. The CupertinoTabBar widget will take care of the bottom navigation bar UI.
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.
Create a List of Widget objects to hold the pages that will be displayed for each tab.
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.
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
Asked: 2023-04-28 16:15:21 +0000
Seen: 10 times
Last updated: Apr 28 '23
In a new Flutter project on Android Studio, is it possible to not have any libs or main.dart file?
How can Google calendar events be generated on the server-side using Flutter?
How can I retrieve an SVG image from a URL in Flutter?
How can I combine streams of different types in Dartlang using rxdart?
What are the steps to disable FlutterFire configuration?
How can zooming similar to desktop be achieved in HTML webview browser using Flutter?
How to imitate Http Client calls during flutter testing?
What is the process of invoking a Cloud Function in Firebase through Flutter?