How to change Font style in Html widget in Flutter?

Question

I have added post description from Json Rest API using HTML package in flutter. The default font size looks too small. How to increase the font size of below content - Html( data: user['news_description'],),

import 'package:flutter_html/flutter_html.dart';

    class NewsDetails extends StatelessWidget {
          var user;
          var image_url = 'http://example.com/news/upload/';
          NewsDetails(this.user);

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Image.network(image_url + user['news_image'],  width: double.infinity, height: 300.0, fit: BoxFit.cover,),
                    SizedBox(height:5.0),
                    Padding(padding: EdgeInsets.all(15.0),
                      child: Column(
                        children: <Widget>[
                          Text(user['news_title'],
                            style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.w400),),
                          SizedBox(height:10.0),
                        Html( data: user['news_description'],)
                        ],
                      )
                    )
                  ],
                )
              ),
            );
          }
        }

Alex · Accepted Answer · 2024-12-23 02:39:45Z

46

Using flutter_html for richtext html.

Try this code to change the Html font style:

Html(
  data: 'my text',
  style: {
    "body": Style(
      fontSize: FontSize(18.0),
      fontWeight: FontWeight.bold,
    ),
  },
)

edited Dec 23, 2024 at 2:39

Alex

2,5541 gold badge20 silver badges28 bronze badges

answered May 19, 2020 at 22:09

live-love

53.2k27 gold badges257 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Balaji Over a year ago

This is the correct answer for the latest version flutter html 2.2.1

Noor Hossain Over a year ago

but now, in 2022 its not working, what is the approach now ?

omega_mi Over a year ago

I set font size to 17 sp, but it not display properly. I almost cannot read because its very small. It happened in certain device. Do you know how to fix this ?

Alex · Accepted Answer · 2024-12-23 02:41:50Z

7

You could use customTextStyle to change the font size.

customTextStyle: (dom.Node node, TextStyle baseStyle) {
  return baseStyle.merge(TextStyle(height: 2, fontSize: 28));
}

Complete example,

Html(
  data: user['news_description'],
  customTextStyle: (dom.Node node, TextStyle baseStyle) {
    return baseStyle.merge(TextStyle(height: 2, fontSize: 28));
  },
)

edited Dec 23, 2024 at 2:41

Alex

2,5541 gold badge20 silver badges28 bronze badges

answered Jul 29, 2019 at 15:47

Anu Viswan

18.2k4 gold badges27 silver badges53 bronze badges

3 Comments

Adnan haider Over a year ago

how to change width of table in flutter which show full screen width?

Ivan Yoed Over a year ago

Upvote for this answer. But I have a little issue. What if I want to use the newest version of this package? It does not seem to have kept this customTextStyle property...

ListenSoftware Louise Ai Agent Over a year ago

what is dom.Node node

Stackobea Technologies · Accepted Answer · 2022-03-16 05:44:42Z

4

We can use defaultTextStyle Try this code

    Html(
     data: "<b>Hai</b>",
     defaultTextStyle: TextStyle(
       fontSize: 15,
       color: Colors.blue,
       fontWeight: FontWeight.bold),
    ),

edited Mar 16, 2022 at 5:44

answered Sep 28, 2020 at 11:09

Stackobea Technologies

7207 silver badges12 bronze badges

2 Comments

ListenSoftware Louise Ai Agent Over a year ago

is there a missing " on the data

Stackobea Technologies Over a year ago

@GoldenLion Thanks for giving feedback. I updated the changes.

Doan Bui · Accepted Answer · 2022-04-23 01:53:07Z

4

In year 2022, with new version of flutter_html package. To set style for html we do the following:

data: '<p>HTML text</p>',
style: {
    // p tag with text_size
    "p": Style(
           fontSize: FontSize(16),
           padding: EdgeInsets.all(6),
           backgroundColor: Colors.grey,
         ),
},

answered Apr 23, 2022 at 1:53

Doan Bui

4,53634 silver badges40 bronze badges

Comments

Hoang Phuc · Accepted Answer · 2022-10-18 01:44:52Z

2

To change Html text style (color, size, style...) you can try:

Html(
      data: '${controller.product.value.description}',
      style: {
        'p': Style(
          color: Colors.grey
        ),
        'h4': Style(
            color: Colors.redAccent
        )
      },
    ),

and to change all text you can use: '*': Style(...),

answered Oct 18, 2022 at 1:44

Hoang Phuc

1221 silver badge6 bronze badges

Comments

Hamed Rezaee · Accepted Answer · 2024-03-05 21:04:19Z

0

For text color just use ColorFiltered

ColorFiltered(
 colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),
 child: Html(data: data)
)

edited Mar 5, 2024 at 21:04

Hamed Rezaee

7,2986 gold badges44 silver badges63 bronze badges

answered Feb 28, 2024 at 10:49

Smbat Tumasyan

314 bronze badges

Collectives™ on Stack Overflow

How to change Font style in Html widget in Flutter?

6 Answers 6

3 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related