Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change Font style in Html widget in Flutter?

Tags:

flutter

dart

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'],)
                        ],
                      )
                    )
                  ],
                )
              ),
            );
          }
        }
like image 833
Vignesh PV Avatar asked Jul 29 '19 15:07

Vignesh PV


People also ask

How do you change the font on Flutter text widget?

You can change the font size of text in a Text Widget using style property. Create a TextStyle object with fontSize and specify this object as style for Text Widget.

How do I display HTML string in Flutter?

To display valid HTML you can set the src field to the following: _src = "data:text/html;charset=utf-8," + Uri. encodeComponent("HTML_CONTENT_HERE"); For the package you can also pass markdown to the src and it will convert it for you.

Can we use HTML and CSS in Flutter?

Flutter actually controls every pixel that is drawn to the screen and doesn't use HTML, JavaScript, or CSS to define any of its look or logic.


2 Answers

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,
    ),
    },
)
like image 184
live-love Avatar answered Sep 25 '22 23:09

live-love


We can use defaultTextStyle Try this code

    Html(
     data: "<b>Hai</b>",
     defaultTextStyle: TextStyle(
       fontSize: 15,
       color: Colors.blue,
       fontWeight: FontWeight.bold),
    ),
like image 41
Techalgoware Avatar answered Sep 24 '22 23:09

Techalgoware