Cupertino Tab Bar Color not Changing

[kushalgoel786]

I wanted to change the background color of the tab bar on the press of the First button in the Theme Page File. But, it's not working.

The color has to be changed from grey[50] to black, on the press of that button.

Flutter Doctor is all fine, no problem.
Since I am reporting an issue the first time, I didn't know how to do the indentation and GitHub messed with it.

Any other improvement/suggestion is the code is highly appreciated.

PS - This is my personal project and I am cloning an app 'Chao Timer' available on the App Store. The 3rd screen is complete and the 4th under process. You may see that for reference for the app and the feature I am talking about.

Below is the code :

Main.Dart -

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:trial_app_2/Help.dart';
import 'package:trial_app_2/Components/MorePageListGap.dart';
import 'ThemeProperties.dart';
import 'package:trial_app_2/Components/MorePageListItem.dart';
import 'package:trial_app_2/ThemePage.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Scaffold> tabs = [];
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBuilder: (ctxt, index) {
        if (index == 2) {
          return Help();
        } else if (index == 3) {
          return More();
        } else {
          return Container(
            color: Colors.green,
          );
        }
      },
      tabBar: CupertinoTabBar(
        backgroundColor: tabBarColor,
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.clock),
            title: Text('Timer'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.news),
            title: Text('Stats'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search),
            title: Text('Help'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.info),
            title: Text('More'),
          ),
        ],
      ),
    );
  }
}

//TODO - More Page
class More extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF3F2F8),
      appBar: AppBar(
        toolbarHeight: 45.0,
        backgroundColor: appBarColor,
        elevation: 0.5,
        title: Text(
          "More",
          style: TextStyle(color: appBarTextColor, fontWeight: FontWeight.w300),
        ),
      ),
      body: ListView(
        children: [
          MorePageListGap(),
          MorePageListItem(
            trailingText: '3.2.1',
            showTrailingText: true,
            showArrow: false,
            name: 'App Version',
          ),
          MorePageListGap(height: 20.0),
          MorePageListItem(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThemePage()),
              );
            },
            name: 'Theme',
            trailingText: 'a',
            showTrailingText: true,
          ),
          MorePageListItem(
            name: 'Timer Settings',
            onTap: () {
              print(tabBarColor);
            },
          ),
          MorePageListGap(height: 20.0),
          MorePageListItem(
            name: 'Rate if Like Me',
          ),
          MorePageListItem(
            name: 'Send Feedback',
          ),
          MorePageListItem(
            name: 'Tell Friends about Me',
          ),
          MorePageListGap(height: 20.0),
          MorePageListItem(
            name: 'Licenses',
          ),
          MorePageListGap(height: 20.0),
        ],
      ),
    );
  }
}

ThemePage.dart

import 'package:flutter/material.dart';
import 'package:trial_app_2/ThemeProperties.dart';
import 'package:flutter/cupertino.dart';
import 'package:trial_app_2/Components/ThemePageItem.dart';

class ThemePage extends StatefulWidget {
  @override
  _ThemePageState createState() => _ThemePageState();
}

class _ThemePageState extends State<ThemePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        actionsForegroundColor: appBarActionsColor,
        previousPageTitle: "More",
        backgroundColor: appBarColor,
        middle: Text(
          'Theme',
          style: TextStyle(
            fontWeight: FontWeight.w300,
            fontSize: 20.0,
            color: appBarTextColor,
          ),
        ),
      ),
      body: Container(
        color: Colors.grey[50],
        child: ListView(
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(12.0, 28.0, 0.0, 6.0),
              child: Text(
                "SELECT THEME",
                style: TextStyle(fontSize: 12.0, color: Colors.grey.shade700),
              ),
            ),
            ThemePageItem(
              color: Colors.blue.shade600,
              text: "Blue",
              onTap: () {
                setState(() {
                  appBarColor = Colors.blue;
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.yellow;
                  tabBarColor = Colors.yellow;
                });
              },
            ),
            ThemePageItem(
              color: Colors.white,
              text: "White",
              whiteText: false,
              onTap: () {
                setState(() {
                  appBarColor = Colors.grey[50];
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.blue;
                });
              },
            ),
            ThemePageItem(
              color: Colors.red,
              text: "Red",
              onTap: () {
                setState(() {
                  appBarColor = Colors.red;
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.yellow;
                });
              },
            ),
            ThemePageItem(
              color: Colors.green,
              text: "Green",
              onTap: () {
                setState(() {
                  appBarColor = Colors.green;
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.yellow;
                });
              },
            ),
            ThemePageItem(
              color: Colors.yellow,
              text: "Yellow",
              onTap: () {
                setState(() {
                  appBarColor = Colors.yellow;
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.red;
                });
              },
            ),
            ThemePageItem(
              color: Colors.black,
              text: "Black",
              onTap: () {
                setState(() {
                  appBarColor = Colors.black;
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.white;
                });
              },
            ),
            ThemePageItem(
              color: Colors.pink[300],
              text: "Pink",
              onTap: () {
                setState(() {
                  appBarColor = Colors.pink[300];
                  appBarTextColor = Colors.white;
                  appBarActionsColor = Colors.yellow;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

ThemeProperties.Dart

import 'package:flutter/material.dart';

Color appBarColor = Colors.grey[50];
Color appBarTextColor = Colors.black;
Color appBarActionsColor = Colors.blue;
Color tabBarColor = Colors.grey[50];

Components/ThemePageItem.dart -

import 'package:flutter/material.dart';

class ThemePageItem extends StatelessWidget {
  const ThemePageItem({
    this.color,
    this.text,
    this.onTap,
    this.whiteText = true,
  });

  final Color color;
  final String text;
  final Function onTap;
  final bool whiteText;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: onTap,
      tileColor: color,
      title: Text(
        text,
        style: TextStyle(color: whiteText ? Colors.white : Colors.black),
      ),
    );
  }
}

[TahaTesser]

Hi @kushalgoel786
It seems you are asking for assistance on personal code. Please see https://flutter.dev/community for resources and asking questions like this,
you may also get some help if you post it on Stack Overflow and if you need help with your code, please see https://www.reddit.com/r/flutterhelp/
Closing, as this isn't an issue with Flutter itself. If you disagree, please write in the comments and I will reopen it.
Thank you

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.