Fontsize Up

[steveshp]

Hello, I wanted to reach out to see if I could maybe get some help on an issue regarding changing the style of the text in the messages dash chat2 generates. In our project we are using dash chat2 to help connect senior citizens with other users of the app; to make it more accessible we wanted to be able to increase the font size for all text fields on the chat widget. I'm having trouble figuring out how to implement those properties. Would you maybe be willing to provide a quick example or some pointers on how to do so?

[LegendAF]

Looks like this specifically is stopping the text size from being controlled via the textTheme.

For the short term (and easy solution) you could mark all of your messages as isMarkdown (since markdown uses the textTheme by default).

Here is an example controlling all of the text:

• Make sure chatMessage has isMarkdown: true: https://github.com/SebastienBtr/Dash-Chat-2/blob/main/example/lib/data.dart#L88-L94
• Add textTheme to ThemeData: https://github.com/SebastienBtr/Dash-Chat-2/blob/main/example/lib/samples/theming.dart#L16-L28

      data: ThemeData(
        ...,
        textTheme: const TextTheme(
          bodySmall: TextStyle(fontSize: 20),  // YOUR FONT SIZE
          bodyMedium: TextStyle(fontSize: 30), // YOUR FONT SIZE
          bodyLarge: TextStyle(fontSize: 40), // YOUR FONT SIZE
        ),
      ),

• Change time font size: https://github.com/SebastienBtr/Dash-Chat-2/blob/main/example/lib/samples/theming.dart#L74
• Pass in userNameBuilder to MessageOptions

userNameBuilder: (user) => DefaultUserName(
  user: user,
  style: const TextStyle(
    fontSize: 20, // YOUR FONT SIZE
    color: Colors.grey,
  ),
),

**** Caveats the mentions will still be small in this case.

It may be worthwhile adding a textScale parameter to do this all with one variable.

[SebastienBtr]

Looks like this specifically is stopping the text size from being controlled via the textTheme.

For the short term (and easy solution) you could mark all of your messages as isMarkdown (since markdown uses the textTheme by default).

Here is an example controlling all of the text:

• Make sure chatMessage has isMarkdown: true: https://github.com/SebastienBtr/Dash-Chat-2/blob/main/example/lib/data.dart#L88-L94
• Add textTheme to ThemeData: https://github.com/SebastienBtr/Dash-Chat-2/blob/main/example/lib/samples/theming.dart#L16-L28

      data: ThemeData(
        ...,
        textTheme: const TextTheme(
          bodySmall: TextStyle(fontSize: 20),  // YOUR FONT SIZE
          bodyMedium: TextStyle(fontSize: 30), // YOUR FONT SIZE
          bodyLarge: TextStyle(fontSize: 40), // YOUR FONT SIZE
        ),
      ),

• Change time font size: https://github.com/SebastienBtr/Dash-Chat-2/blob/main/example/lib/samples/theming.dart#L74
• Pass in userNameBuilder to MessageOptions

userNameBuilder: (user) => DefaultUserName(
  user: user,
  style: const TextStyle(
    fontSize: 20, // YOUR FONT SIZE
    color: Colors.grey,
  ),
),

**** Caveats the mentions will still be small in this case.

It may be worthwhile adding a textScale parameter to do this all with one variable.

I guess, instead of overwriting the style it could use the Theme data and only override what we need?

[LegendAF]

The biggest offender here is that ParsedText needs to consume the theme data.

ParsedText( 
  parse: messageOptions.parsePatterns != null
      ? messageOptions.parsePatterns!
      : defaultParsePatterns,
  text: text,
  style: TextStyle(
    color: isOwnMessage
        ? messageOptions.currentUserTextColor(context)
        : messageOptions.textColor,
    fontSize: Theme.of(context).textTheme.bodyMedium?.fontSize,
  ),
);

But yeah. I am a fan of only overriding what is needed.

For what it is worth, I removed the style from ParsedText to test and the issue persists.

[SebastienBtr]

Did you try something like that:

style: Theme.of(context).textTheme.bodySmall.copyWith(
              color: isOwnMessage
                          ? messageOptions.currentUserTextColor(context)
                          : messageOptions.textColor,
            )

Not sure which textTheme style should be picked though

I think this, or what you did, is the way to go

[SebastienBtr]

Or we just add a textFontSize in message options, I can see there is a timeFontSize already

[LegendAF]

Did you try something like that:

style: Theme.of(context).textTheme.bodySmall.copyWith(
              color: isOwnMessage
                          ? messageOptions.currentUserTextColor(context)
                          : messageOptions.textColor,
            )

Not sure which textTheme style should be picked though

I think this, or what you did, is the way to go

I did not but I don't see why this wouldn't work. If we want to keep in with allowing theme to control most things this is probably the best route. There is also a fontSize associated with DefaultUserName. I am not sure how to tie those directly into the textTheme without some sort of scaling. It may just be best to allow people to control it directly.

In the app I maintain that implements Dash Chat we use the builders in places where the default sizes would otherwise be used. So it doesn't currently effect my use cases.