skip to Main Content

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,
              );
            });
          },
        ),
      ),
    );
  }
}

2

Answers


  1. 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. 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