How to change Text Size of different Texts in my app in real time in Flutter

Question

In my app, I made custom TextStyles for different purposes. I made variables for their respective sizes and initialized them like this -

double fontSize1=24;
double fontSize2=20;
double fontSize3=18;
double bodyText1Size=16;
double bodyText2Size=14;
double bodyText3Size=12;
double buttonTextStyleSize=16;
double linkStyleSize=12;

var headingStyle1 = TextStyle(
  fontSize: fontSize1,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

var headingStyle2 = TextStyle(
  fontSize: fontSize2,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

var headingStyle3 = TextStyle(
  fontSize: fontSize2,
  fontWeight: FontWeight.w600,
  color: Colors.black,
);

var headingStyle4 = TextStyle(
  fontSize: fontSize3,
  fontWeight: FontWeight.w600,
  color: Colors.black,
);

var bodyText1 = TextStyle(
  fontSize: bodyText1Size,
  fontWeight: FontWeight.w400,
  color: Colors.black,
);

var bodyText2 = TextStyle(
  fontSize: bodyText2Size,
  fontWeight: FontWeight.w400,
  color: Colors.black,
);

var bodyText3 = TextStyle(
  fontSize: bodyText3Size,
  fontWeight: FontWeight.w400,
  color: tertiaryTextColor,
);

var buttonTextStyle = TextStyle(
  fontSize: buttonTextStyleSize,
  fontWeight: FontWeight.bold,
  color: Colors.black,
);

var linkStyle = TextStyle(
  fontSize: linkStyleSize,
  fontWeight: FontWeight.w600,
  color: Colors.black,
);

And then, used them in my main.dart in my Material App's TextTheme like this -

textTheme: TextTheme(
            headline1: headingStyle1,
            headline2: headingStyle2,
            headline3: headingStyle3,
            headline4: headingStyle4,
            headline6: bodyText3,
            bodyText1: bodyText1,
            bodyText2: bodyText2,
            button: buttonTextStyle,
            caption: linkStyle,
          ),

Now, I am using this everywhere in my app, for eg -

Text(
    "These settings will be applied all across the app",
    style: Theme.of(context)
    .textTheme
    .bodyText2!
    .apply(color: tertiaryTextColor),
),

Now, I want to change their sizes from my UI, and for that I created two Buttons and in them, just for now I increased/decreased their sizes. I used setState to change their sizes like this -

InkWell(
      onTap: () {
        setState(() {
          fontSize1--;
          fontSize2--;
          fontSize3--;
        });
        print("Font Sizes increased by 1");
        print("Font Sizes 1 = $fontSize1");
        print("Font Sizes 2 = $fontSize2");
        print("Font Sizes 3 = $fontSize3");
     },
     child: Text(
        "-",
        style: Theme.of(context)
        .textTheme
        .headline2!
        .apply(color: secondaryTextColor),
     ),
 ),

Now, in my logs, as i printed, their sizes are changing but UI is not. Why? Can you please tell me a solution for this?

Answer 1

You can call textTheme with .copy and change what you want for example color or size or .... etc

Text(
"These settings will be applied all across the app",
style: Theme.of(context)
.textTheme
.bodyText2!
// .apply(color: tertiaryTextColor), comment this
.copyWith(color: tertiaryTextColor),  // add this line for color attribute or any else
),