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

user_12810223 0
Viewed 178

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?

dart flutter
2 Answers

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
),
user_184495280

I think that you have to change the headingStyle variable and not the fontSize. Because the headingStyle variable has been set with the current fontSize, even though you change the fontSize, the headingStyle does not change because it is a variable. You can change the headingStyle from variable to method like this:

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

with this code, everytime you will define a textStyle, it will create and return the textStyle, so while you update the state, It will get the new fontSize.

Also, instead of changing the fontSize, you can change the headingStyle like this:

  onTap() {
    setState(() {
      headingStyle1 = TextStyle(
        fontSize: --fontSize1,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      );

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

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

      headingStyle4 = TextStyle(
        fontSize: --fontSize3,
        fontWeight: FontWeight.w600,
        color: Colors.black,
      );
    });
    print("Font Sizes increased by 1");
    print("Font Sizes 1 = $fontSize1");
    print("Font Sizes 2 = $fontSize2");
    print("Font Sizes 3 = $fontSize3");
  }
user_138585760
Related