Flutter: flutter_markdown fontSize

Question

Is there any way to change the font size of text when using flutter_markdown? Something like supplying a TextStyle to a Text widget. Thanks!

Solution 1

Markdown(
    data: html2md.convert(article.content),
    styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context))
                    .copyWith(
                       p: Theme.of(context).textTheme.body1.copyWith(fontSize: 12.0)
                    ),
)

you can overide text style of spesific element in markdown, code above example to overide p element from markdown (<p> element in html)

Solution 2

Following code is scalling text size in all elements:

Markdown(
  styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context))
      .copyWith(textScaleFactor: 1.5),
  data: md,
);

Solution 3

In 2021 the way to style your main text is:

Markdown(
    data: "This is the *way*",
    styleSheet: MarkdownStyleSheet.fromTheme(ThemeData(
      textTheme: TextTheme(
          bodyText2: TextStyle(
              fontSize: 20.0, color: Colors.green)))))),

Solution 4

This works for me:

theme:new ThemeData(
  backgroundColor: Colors.black26,primarySwatch: Colors.grey,
  textTheme: TextTheme(body1: TextStyle(fontSize: 25.0),
  headline: TextStyle(fontSize: 25.0),title: TextStyle(fontSize: 30.0))
),

You can check out the StyleSheet class provided in the markdown github repo. Basically, this snippet of code is my cheat sheet:

  p: theme.textTheme.body1,
  h1 theme.textTheme.headline,
  h2: theme.textTheme.title,
  h3: theme.textTheme.subhead,
  h4: theme.textTheme.body2,
  h5: theme.textTheme.body2,
  h6: theme.textTheme.body2,

You can customize header1 by modifying headline in the themedata of MaterialApp. Similarly, you can customize h2 by modifying title and so on.

View more solutions