-
-
Notifications
You must be signed in to change notification settings - Fork 911
Description
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 |
---|---|---|
![]() |
![]() |
![]() |
- 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 🎉