Skip to content

Instantly share code, notes, and snippets.

@daohoangson
Created September 28, 2019 14:29
Show Gist options
  • Save daohoangson/ac391ae13aa5d53c293687cbc83db0bb to your computer and use it in GitHub Desktop.
Save daohoangson/ac391ae13aa5d53c293687cbc83db0bb to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
const html = """
<div style="font-size:18px;font-family:verdana;">
<h1 style="color:#B22222;font-size:20px !important;font-weight:bold;">Bones Of Hand</h1>
<ol style="line-height:1.5em;">
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">The hand consists of carpal bones at wrist, metacarpal bones in the palm, and phalangeal bones in the digits. </span>
</span>
</span>
</span>
</li>
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Carpal bones are short bones, eight in number, and arranged in two rows proximal and distal, each row presenting four bones. From lateral to medial side, bones of proximal row arescaphoid lunate triquetraland pisiform;bones of distal row are trapezium, trapezoid, capitate and hamate. Ossification of carpal bones appears after birth in a spiral manner as follows:</span>
</span>
</span>
</span>
</li>
</ol>
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="line-height:1.5em;border-collapse:collapse;border:none;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;width:100%;" width="214">
<tbody>
<tr style="height:135.85pt">
<td style="width:70.75pt;border:solid windowtext 1.0pt;padding:0in 5.4pt 0in 5.4pt;height:135.85pt" valign="top" width="94">
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<b>
<span style="line-height:150%;">Carpel bone</span>
</b>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Capitate</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Hamate</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Triquetral</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Lunate</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Scaphoid</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Trapezium</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Trapezoid</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">Pisiform</span>
</span>
</span>
</span>
</p>
</td>
<td style="width:1.25in;border:solid windowtext 1.0pt;border-left:none;padding:0in 5.4pt 0in 5.4pt;height:135.85pt" valign="top" width="120">
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<b>
<span style="line-height:150%;">Ossification (in years)</span>
</b>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">1</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">2</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">3</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">4</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">5</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">6</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">7</span>
</span>
</span>
</span>
</p>
<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;line-height:150%">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span style="line-height:150%;">12</span>
</span>
</span>
</span>
</p>
</td>
</tr>
</tbody>
</table>
<p class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<b>
<span lang="EN-IN" style="line-height:150%;">&nbsp;</span>
</b>
</span>
</span>
</span>
</p>
<p class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<b>
<span lang="EN-IN" style="line-height:150%;">Applied Anatomy</span>
</b>
</span>
</span>
</span>
</p>
<ol start="1" style="line-height:1.5em;margin-left:20px;list-style-type:lower-alpha;">
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Capitate is the largest carpal, first carpal bone to ossify and articulates with maximum number of bones. </span>
</span>
</span>
</span>
</li>
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Lunate </span>
<span lang="EN-IN" style="line-height:150%;">is the most commonly dislocated carpal bone. </span>
</span>
</span>
</span>
</li>
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Scaphoid is the most commonly fractured carpal bone. </span>
</span>
</span>
</span>
</li>
</ol>
<ol start="3" style="line-height:1.5em;">
<li class="Style" style="margin-top:10.55pt;margin-right:0.95pt;margin-bottom:0.0001pt;line-height:150%;">
<span lang="EN-IN" style="line-height:150%;">Metacarpal bones </span>
<span lang="EN-IN" style="line-height:150%;">are miniature long bones, five in number and are numbered from lateral to medial side. Each
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">metacarpal possesses a diaphysis and a single epiphysis (unique property among the long bones as most of the long bones have two epiphysis). The epiphysis 0f all metacarpals are directed towards the head, except in the first
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">where it is located towards the base. Heads of metacarpals articulate with proximal phalanges forming MP joints
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">(Knuckles). </span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<ol start="1" style="list-style-type:lower-alpha;">
<li class="Style" style="margin-top:5.5pt;margin-right:0.65pt;margin-bottom:0.0001pt;line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Bennett's fracture dislocation </span>
<span lang="EN-IN" style="line-height:150%;">is an oblique intra-articular fracture of base of 1
<sup>st</sup> metacarpal with dislocation of carpometacarpal joint.
</span>
</span>
</span>
</span>
</li>
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Rolando's fracture </span>
<span lang="EN-IN" style="line-height:150%;">is extra-articular fracture of the base of 1
<sup>st</sup> metacarpal.
</span>
</span>
</span>
</span>
</li>
<li class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Boxer'sfracture</span>
<span lang="EN-IN" style="line-height:150%;"> is the fracture through the neck of 5
<sup>th</sup> metacarpal.
</span>
</span>
</span>
</span>
</li>
</ol>
</li>
<li class="Style" style="margin-top:11pt;margin-right:0.95pt;margin-bottom:0.0001pt;line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<span lang="EN-IN" style="line-height:150%;">Phalangeal bones are 14 in number, 3 for each medial four fingers and 2 for the thumb. These bones are referred to as proximal, middle and distal phalanges. Phalanges are miniature long bones and possess a diaphysis and a single epiphysis directed towards the base (like the first metacarpal bone). </span>
</span>
</span>
</span>
</li>
</ol>
<p class="Style" style="line-height:150%;">
<span style="color:#000000;">
<span style="font-size:18px;">
<span style="font-family:verdana,geneva,sans-serif;">
<b>
<span lang="EN-IN" style="line-height:150%;"></span>
</b>
<span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;"></span>
</span>
</span>
</span>
</p>
</div>
""";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: HtmlWidget(html),
),
),
);
}
@Vinoth1094
Copy link

Thanks @daohoangson. Seems like upgrading the plugin version worked like charm. But does the plugin currently support alphabet lists?
Numeric lists, Roman numeric lists, and bullet-point lists are working fine.

@daohoangson
Copy link
Author

But does the plugin currently support alphabet lists? Numeric lists, Roman numeric lists, and bullet-point lists are working fine.

No, not yet. I have created a new issue for this daohoangson/flutter_widget_from_html#90, subscribe to that one if you want to get notified when it's released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment