CODEWITHSUNDEEP
fluttermarkdown
Ny Regency
Ny Regency

Reputation: 1722

Flutter: flutter_markdown fontSize

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!

Upvotes: 20

Views: 9639

Answers (5)

Joe M
Joe M

Reputation: 677

Just in case someone is here looking for a solution for markdown_widget package(like I was), here's how it works there:

child: MarkdownWidget( data: item, shrinkWrap: true, config: MarkdownConfig( configs: [PConfig(textStyle: bodyText())]),),

Upvotes: 0

Christian
Christian

Reputation: 26387

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)))))),

Upvotes: 19

Wibi Cahyo Hastono
Wibi Cahyo Hastono

Reputation: 261

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)

Upvotes: 26

k2s
k2s

Reputation: 750

Following code is scalling text size in all elements:

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

Upvotes: 13

Foxy
Foxy

Reputation: 31

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.

Upvotes: 3

Related Questions