Broken text styling when using Theme.of(context).textTheme

[stephanie-finch]

Text styling in my screenshot goes bananas when I style with Theme.of(context).textTheme.* but the screenshot will look okay if I hardcode text styles. This was reproducible in our iOS and Android emulators with Flutter v2.0.6 and screenshot: ^1.2. Examples below, let us know if there's anything else that'll be useful to provide for debugging!

Hardcoded Text Style Example What screenshot looks like when we are hardcoding text style (which is correct and matches what widget looks like in app):

// Widget code that gets captured
return Column(
      children: [
        Text(
          'Title Header Font 24',
          textAlign: TextAlign.center,
          style: TextStyle( // <----- hardcoded to match our Theme.of(context).textTheme.headline6
            fontFamily: 'Rubik',
            fontSize: 24,
            color: Colors.black,
            height: 1,
          ),
        ),
        Text(
          'Tilte Font 40',
          textAlign: TextAlign.center,
          style: TextStyle( // <----- hardcoded to match our Theme.of(context).textTheme.headline1
            fontFamily: 'Rubik',
            fontSize: 40,
            fontWeight: FontWeight.bold,
            color: Colors.black,
            height: 1,
          ),
        ),
      ],
    );

Broken Styling Using Theme Example When using Theme.of(context).textTheme:

// Widget code that gets captured
return Column(
      children: [
        Text(
          'Title Header Font 24',
          textAlign: TextAlign.center,
          style: Theme.of(context).textTheme.headline6,
        ),
        Text(
          'Tilte Font 40',
          textAlign: TextAlign.center,
          style: Theme.of(context).textTheme.headline1,
        ),
      ],
    );

In case it's useful, this is how we're capturing:

final ScreenshotController controller = ScreenshotController();
final Uint8List imageBytes = await controller.captureFromWidget(widget);
final String tempPath = (await getTemporaryDirectory()).path;
final File file = File('$tempPath/$filename');
// Render a preview of cached image file in the app + combine with share extensions

font in pubspec.yaml

flutter:
  fonts:
    - family: Rubik
      fonts:
        - asset: assets/fonts/Rubik-Regular.ttf
        - asset: assets/fonts/Rubik-Bold.ttf
          weight: 700

[stephanie-finch]

Thanks @ritheshSalyan for working on this! @SachinGanesh wondering if there's anything blocking from accepting the merge request? We have a lot of screenshots we'd like to generate more easily.

[SachinGanesh]

@stephanie-finch PR Already merged.

[stephanie-finch]

@SachinGanesh Oh, was styling with Theme.of(context) supposed to be fixed with the merge request? We still have the same issue even when using screenshot v1.2.3 (with Flutter 2.2.3, Dart 2.13.4) so wanted to double check whether that's expected or if this issue seems too hard to get fixed.

Thanks!

[callmejm]

What work for me is directly use GoogleFonts.montserratTextTheme().bodyText1!.copyWith

[acike]

InheritedTheme.captureAll work for me below is example

final image = await ScreenshotController() .captureFromWidget(InheritedTheme.captureAll( context, YourWidget( child : xxx ), ))

[WieFel]

Had a similar problem: when using Theme.of(context).colorScheme.primary, the color in the screenshot would be different.

InheritedTheme.captureAll work for me below is example

final image = await ScreenshotController() .captureFromWidget(InheritedTheme.captureAll( context, YourWidget( child : xxx ), ))

This helped! @acike thank you!