How to use css-property in html string in Flutter?

Question

Is there any better approach to use css property in html string in flutter? It is possible via inline or internal css property but is it possible via external css in flutter?

Future<void> _printPdfAsHtml() async {
  print('Print ...');
  await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
    return await Printing.convertHtml(
        format: format,
        html:
            '<html><body><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table><table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table></body></html>');
  });
}

no you can not use external css. – heyharshil May 31 '20 at 05:55 — heyharshil, May 31 '20 at 05:55

heyharshil · Accepted Answer · 2019-08-13T05:04:24.210

1

Just Use Inline CSS OR Internal CSS

Future<void> _printPdfAsHtml() async {
  print('Print ...');
  await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
  return await Printing.convertHtml(
    format: format,
    html: '<html><head><style>table{ border:1px solid black;}</style></head><body><table><tr><td>somedata</td></tr></table></body></html>');
     });
  }

You Can also find a reference Here :https://www.w3schools.com/css/css_howto.asp

edited Aug 13 '19 at 05:04

answered Aug 13 '19 at 04:57

heyharshil

177
8

I want to know, How to use External CSS? – jazzbpn Aug 13 '19 at 05:02
You do note user external CSS to this property. You have to use EITHER Internal CSS that i post in answer OR inline CSS. – heyharshil Aug 13 '19 at 05:06
I want to separate the styles so I have to use external css. How to do that? Isn't it possible? – jazzbpn Aug 13 '19 at 05:09
@jazzbpn you can also find a reference from link given in Posted answer. – heyharshil Aug 13 '19 at 05:09
After seeing your answer, I knew it is possible via inline or internal css. But I want to keep code clean. So, is it possible via external css? – jazzbpn Aug 13 '19 at 05:10
@jazzbpn According to my knowledge it's not possible in this type of html strings like making a pdf or sending a mail. in this type of code you have to use internal or inline css. – heyharshil Aug 13 '19 at 05:13
@jazzbpn i think internal CSS is best option for you. So your styling code is in separate tag and your html code is separate too. – heyharshil Aug 13 '19 at 05:15
@Hvr, the html string will be so long so I just want to split the possible codes. Thank you for the answer. – jazzbpn Aug 13 '19 at 05:18
@jazzbpn Yes but this is the only way i think. – heyharshil Aug 13 '19 at 05:21
Okey, Let see. Thank you !! – jazzbpn Aug 13 '19 at 05:22

How to use css-property in html string in Flutter?

1 Answers1