Skip to content

Honouring the app's theme #303

@edwardaux

Description

@edwardaux

Firstly, just wanted to say this is a cracking library! This is by far the best library in this space. Thank you!

One thing that I've noticed is that the default styling doesn't seem to follow the app's theme (although #18 seems to suggest that it does). Also, something that seems related is how it scales the text based on the user's device accessibility settings. Consider this super-simple app:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('')),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Text('Heading2', style: Theme.of(context).textTheme.headline2),
              Text('Body', style: Theme.of(context).textTheme.bodyText2),
              Html(data: '<h2>Heading2</h2>Body'),
              Html(data: '<h2>Heading2</h2><p>Body</p>'),
            ],
          ),
        ),
      ),
    );
  }
}

This results in the following:

Standard Size Small Text Largish
Simulator Screen Shot - iPhone 11 - 2020-05-24 at 13 23 36 Simulator Screen Shot - iPhone 11 - 2020-05-24 at 13 23 44 Simulator Screen Shot - iPhone 11 - 2020-05-24 at 13 24 53
  • For the standard scenario, headings are different sizes, but at least the text seems to be the same as the app's theme
  • With small text enabled, headings are heaps smaller. Text inside and outside a <p> tag are scaled at different sizes (not sure why)
  • Once you get to the really large text, things get way out of proportion. This screenshot is at the 3rd-largest text. At this point, headings barely even fit on a screen, text outside a <p> tag take's about 25% of the screen height, and text inside a<p> tag is about 80% of the screen height

If I explicitly assign a style like this:

Html(
  data: '<h2>Heading2</h2><p>Body</p>',
  style: {
    "h2": Style.fromTextStyle(Theme.of(context).textTheme.headline2),
  },
)

it looks a bit better initially (in that the styles seem to match), however a) I would have thought this would be the default behaviour, and b) the scaling still doesn't match the standard text components.

I'm happy to look at creating a PR to resolve this if you can point me in the right direction.

Thanks again for a great library 🎉

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions