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

314

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

Share:
314
jazzbpn
Author by

jazzbpn

With 6+ years of experience, I have developed many iOS/android applications in different context, professional and oldest passion for computer programming began very early in my life. I've learned the social environment is as important as logic aspects of the developing approach then I appreciate very much to get in touch with positive and eager colleagues that involve me in new and exciting challenges. This is why I still want to get involved in new opportunities to improve my skillness.

Updated on December 13, 2022

Comments

  • jazzbpn
    jazzbpn 11 months

    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>');
      });
    }
    
  • jazzbpn
    jazzbpn about 4 years
    I want to know, How to use External CSS?
  • heyharshil
    heyharshil about 4 years
    You do note user external CSS to this property. You have to use EITHER Internal CSS that i post in answer OR inline CSS.
  • jazzbpn
    jazzbpn about 4 years
    I want to separate the styles so I have to use external css. How to do that? Isn't it possible?
  • heyharshil
    heyharshil about 4 years
    @jazzbpn you can also find a reference from link given in Posted answer.
  • jazzbpn
    jazzbpn about 4 years
    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?
  • heyharshil
    heyharshil about 4 years
    @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
    heyharshil about 4 years
    @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.
  • jazzbpn
    jazzbpn about 4 years
    @Hvr, the html string will be so long so I just want to split the possible codes. Thank you for the answer.
  • heyharshil
    heyharshil about 4 years
    @jazzbpn Yes but this is the only way i think.
  • jazzbpn
    jazzbpn about 4 years
    Okey, Let see. Thank you !! 😊