Question 362085 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to change the color of icons and navigation bar according to a page theme

I’m trying to make the color of the icons and navigation bar change according to the page theme in pageview. Basically, there would be 5 pages but one of them is always in dark theme so I want to somehow make the theme of everything in the screen wrapper changes when I move to that specific page. Here’s the code

import 'package:at_app1/features/post/presentation/create_post.dart';
import 'package:at_app1/features/post/presentation/home_page.dart';
import 'package:feather_icons/feather_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class ScreenWrapper extends StatefulWidget {
  ScreenWrapper({super.key});

  @override
  State<ScreenWrapper> createState() => _ScreenWrapperState();
}

class _ScreenWrapperState extends State<ScreenWrapper> {
// Method to set the status bar brightness based on the theme
  /*void updateStatusBarBrightness() {
    Brightness statusBarBrightness = Theme.of(context).brightness;
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarBrightness: statusBarBrightness,
      statusBarIconBrightness: statusBarBrightness == Brightness.dark
          ? Brightness.light
          : Brightness.dark,
    ));}*/

  /*void setStatusColor (bool theme) {
     if (theme) {
          print(Text('Dark'));


        // Changing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: Colors.black,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Colors.black,
          systemNavigationBarIconBrightness: Brightness.dark,
        ));
        print(SystemUiOverlayStyle.dark.statusBarColor.toString());

        }
        else {
          print(Text('Light'));

        // Changing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: Colors.white,
          statusBarIconBrightness: Brightness.light,
          systemNavigationBarColor: Colors.white,
          systemNavigationBarIconBrightness: Brightness.light,

        ));
       

        }
  }*/

  int _currentIndex = 0;

  final _bottomNavigationBarItems = [
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.home,
      ),
      activeIcon: Icon(
        FeatherIcons.home,
        color: Colors.pink,
      ),
      label: '',
      backgroundColor: null,
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.users,
      ),
      activeIcon: Icon(
        FeatherIcons.users,
        color: Colors.blue,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.plusCircle,
      ),
      activeIcon: Icon(
        FeatherIcons.plusCircle,
        color: Colors.orange,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.heart,
      ),
      activeIcon: Icon(
        FeatherIcons.heart,
        color: Colors.purple,
      ),
      label: '',
    ),
    const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.bookmark,
      ),
      label: '',
      activeIcon: Icon(
        FeatherIcons.bookmark,
        color: Colors.yellow,
      ),
    ),
  ];

  //display profile sheet
  /*Future _displayProfileSheet(BuildContext context) {
    return showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => ProfilePage(),
    );
  }*/

  final PageController _pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      body: Stack(
        alignment: Alignment.topCenter,
        children: [
          PageView(
            controller: _pageController,
            onPageChanged: (newIndex) {
              setState(() {
                _currentIndex = newIndex;
                if (newIndex == 1) {
              // Change the color of the bottom navigation bar here
              ThemeData.dark();
            } else {
              // Reset the color of the bottom navigation bar to the default
              ThemeData();
            }
              });
            },
            children: const [
              HomePage(),
              CreatePostPage(),
              //FollowingPostPage(),
              //CameraExampleHome(),
              //NotificationPage(),
              //SavedPage(),
            ],
          ),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: AppBar(
              //systemOverlayStyle: SystemUiOverlayStyle(
              //statusBarColor: Theme.of(context).colorScheme.primary,
              //statusBarBrightness: Brightness.light,
              //systemStatusBarContrastEnforced: true,
              //),
              backgroundColor: Color.fromARGB(0, 0, 0, 0),
              leadingWidth: 50,
              leading: Padding(
                padding: EdgeInsets.only(
                    left: MediaQuery.of(context).size.width * 0.05),

                //to add profile picture
                child: GestureDetector(
                    onTap: () {
                      //_displayProfileSheet(context);
                    },
                    child: CircleAvatar(
                      backgroundColor: Colors.grey,
                    )),
              ),
              elevation: 0,
              actions: [
                //to add feedback funtion
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Icon(
                      Icons.circle,
                      color: Colors.red.withOpacity(0.7),
                      size: 40,
                    ),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.flag_outlined,
                          size: 20,
                          color: Colors.white,
                        )),
                  ],
                ),

                //to add search function
                Padding(
                  padding: EdgeInsets.only(
                      right: MediaQuery.of(context).size.width * 0.03),
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Icon(
                        Icons.circle,
                        color: Colors.yellow.withOpacity(0.7),
                        size: 40,
                      ),
                      IconButton(
                          onPressed: () {},
                          icon: Icon(
                            Icons.search,
                            color: Colors.white,
                            size: 20,
                          )),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        height: MediaQuery.of(context).size.height * 0.08,
        child: BottomNavigationBar(
          unselectedFontSize: 0,
          selectedFontSize: 0,
          iconSize: 30,
          fixedColor: null,
          currentIndex: _currentIndex,
          items: _bottomNavigationBarItems,
          type: BottomNavigationBarType.fixed,
          onTap: (index) {
            setState(() {
              _pageController.animateToPage(
                index,
                duration: const Duration(milliseconds: 10),
                curve: Curves.ease,
              );
            });
          },
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    You can override a icon button theme by using Theme.of(context):

        const BottomNavigationBarItem(
      icon: Icon(
        FeatherIcons.users,
      ),
      activeIcon: Icon(
        FeatherIcons.users,
        color: Theme.of(context).copyWith(
          iconButtonTheme: <Your ThemeData>,),
        ),
      label: '',
    ),

    you can add this to each nav icon button where you need to change the theme when nav icon is active.

    Login or Signup to reply.
  2. 0

    You can wrap your bottomNavigationBar in a Theme widget and change it conditionally.

     @override
  Widget build(BuildContext context) {
    ThemeData getTheme(int page) {
      switch (page) {
        case 1:
          return ThemeData.dark().copyWith(
            splashColor: Colors.transparent, //remove splash
            bottomNavigationBarTheme: const BottomNavigationBarThemeData(
              type: BottomNavigationBarType.fixed,
              backgroundColor: Color(0xFFB2E9F2),
              unselectedIconTheme:
                  IconThemeData(color: Color(0xFF9E9E9E), size: 30),
              selectedIconTheme:
                  IconThemeData(color: Color(0xFFF44236), size: 30),
              unselectedLabelStyle: TextStyle(fontSize: 0),
              selectedLabelStyle: TextStyle(fontSize: 0),
            ),
          );
        case 2:
          return ThemeData.light().copyWith(
            bottomNavigationBarTheme: const BottomNavigationBarThemeData(),
          );
        default:
          return Theme.of(context).copyWith(
            splashColor: Colors.transparent, //remove splash
          );
      }
    }

return Scaffold(
      bottomNavigationBar: Theme(
          data: getTheme(_currentIndex),
          child: Container(
            height: MediaQuery.of(context).size.height * 0.08,
            child: BottomNavigationBar(...)...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search