Showing
7 changed files
with
220 additions
and
62 deletions
@@ -5,16 +5,23 @@ This is a flutter package to create markdown widget. with Latex math formula sup | @@ -5,16 +5,23 @@ This is a flutter package to create markdown widget. with Latex math formula sup | ||
5 | You can create simple markdown view by this package. | 5 | You can create simple markdown view by this package. |
6 | 6 | ||
7 | At this moment this package supports: | 7 | At this moment this package supports: |
8 | -* Unordered list | 8 | +- List |
9 | 9 | ||
10 | - `* <Text here>` | ||
11 | -* Links | 10 | + - Unordered list item |
11 | + 1. Ordered list item | ||
12 | 12 | ||
13 | - `[<text here>](<href>)` | ||
14 | -* Images with size | 13 | +- Horizontal line |
15 | 14 | ||
16 | - `` | ||
17 | -* Table | 15 | + --- |
16 | + | ||
17 | +- Links | ||
18 | + | ||
19 | + [<text here>](<href>) | ||
20 | + | ||
21 | +- Images with size | ||
22 | + | ||
23 | +  | ||
24 | +- Table | ||
18 | 25 | ||
19 | ``` | 26 | ``` |
20 | | Name | Roll | | 27 | | Name | Roll | |
@@ -25,17 +32,34 @@ At this moment this package supports: | @@ -25,17 +32,34 @@ At this moment this package supports: | ||
25 | |-------------|-------------| | 32 | |-------------|-------------| |
26 | | sohag | 1 | | 33 | | sohag | 1 | |
27 | 34 | ||
28 | -* Bolt texts | 35 | +- Bolt text |
36 | + | ||
37 | + **Bolt text** | ||
38 | + | ||
39 | +- Italic text | ||
40 | + | ||
41 | + *Italic text* | ||
42 | + | ||
43 | +- heading texts | ||
44 | + | ||
45 | + # Heading 1 | ||
46 | + ## Heading 2 | ||
47 | + ### Heading 3 | ||
48 | + #### Heading 4 | ||
49 | + ##### Heading 5 | ||
50 | + ###### Heading 6 | ||
51 | + | ||
52 | +- Latex formula $\frac a b$ | ||
29 | 53 | ||
30 | - `**<Text here>**` | ||
31 | -* heading texts | 54 | + $\frac a b$ |
32 | 55 | ||
33 | - `## <Text here>` | ||
34 | -* Latex formula | 56 | +- Radio button and checkbox |
35 | 57 | ||
36 | - `$\frac a b$` | 58 | + () Unchecked radio |
59 | + (x) Checked radio | ||
60 | + [] Unchecked checkbox | ||
61 | + [x] Checked checkbox | ||
37 | 62 | ||
38 | - $\frac a b$ | ||
39 | 63 | ||
40 | ## Getting started | 64 | ## Getting started |
41 | 65 |
@@ -33,16 +33,27 @@ class MyHomePage extends StatefulWidget { | @@ -33,16 +33,27 @@ class MyHomePage extends StatefulWidget { | ||
33 | class _MyHomePageState extends State<MyHomePage> { | 33 | class _MyHomePageState extends State<MyHomePage> { |
34 | final TextEditingController _controller = | 34 | final TextEditingController _controller = |
35 | TextEditingController(text: '''# hi how are you? | 35 | TextEditingController(text: '''# hi how are you? |
36 | - | ||
37 | ## hi how are you? | 36 | ## hi how are you? |
38 | - | ||
39 | ### hi how are you? | 37 | ### hi how are you? |
40 | - | ||
41 | #### hi how are you? | 38 | #### hi how are you? |
42 | - | ||
43 | ##### hi how are you? | 39 | ##### hi how are you? |
40 | +###### hi how are you? | ||
41 | + | ||
42 | +--- | ||
43 | +**bold text** | ||
44 | +*Italic text* | ||
45 | +[Link]() | ||
46 | +- unordered list | ||
47 | +1. ordered list 1 | ||
48 | +2. ordered list 2 | ||
49 | +(x) Radio checked | ||
50 | +() Radio unchecked | ||
51 | +[x] checkbox checked | ||
52 | +[] Checkbox unchecked | ||
44 | 53 | ||
45 | -###### hi how are you?'''); | 54 | +| Name | Country | |
55 | +| Sohag | Bangladesh | | ||
56 | +'''); | ||
46 | @override | 57 | @override |
47 | Widget build(BuildContext context) { | 58 | Widget build(BuildContext context) { |
48 | return Scaffold( | 59 | return Scaffold( |
@@ -68,11 +79,15 @@ class _MyHomePageState extends State<MyHomePage> { | @@ -68,11 +79,15 @@ class _MyHomePageState extends State<MyHomePage> { | ||
68 | ), | 79 | ), |
69 | ), | 80 | ), |
70 | ConstrainedBox( | 81 | ConstrainedBox( |
71 | - constraints: const BoxConstraints(maxHeight: 300), | ||
72 | - child: TextField( | ||
73 | - decoration: const InputDecoration(border: OutlineInputBorder()), | ||
74 | - maxLines: null, | ||
75 | - controller: _controller, | 82 | + constraints: const BoxConstraints(maxHeight: 200), |
83 | + child: Padding( | ||
84 | + padding: const EdgeInsets.all(8.0), | ||
85 | + child: TextField( | ||
86 | + decoration: const InputDecoration( | ||
87 | + border: OutlineInputBorder(), label: Text("Type here:")), | ||
88 | + maxLines: null, | ||
89 | + controller: _controller, | ||
90 | + ), | ||
76 | ), | 91 | ), |
77 | ), | 92 | ), |
78 | ], | 93 | ], |
@@ -204,7 +204,7 @@ packages: | @@ -204,7 +204,7 @@ packages: | ||
204 | path: ".." | 204 | path: ".." |
205 | relative: true | 205 | relative: true |
206 | source: path | 206 | source: path |
207 | - version: "0.0.2" | 207 | + version: "0.0.3" |
208 | tex_text: | 208 | tex_text: |
209 | dependency: transitive | 209 | dependency: transitive |
210 | description: | 210 | description: |
@@ -3,9 +3,8 @@ import 'package:tex_text/tex_text.dart'; | @@ -3,9 +3,8 @@ import 'package:tex_text/tex_text.dart'; | ||
3 | 3 | ||
4 | /// It creates a markdown widget closed to each other. | 4 | /// It creates a markdown widget closed to each other. |
5 | class MdWidget extends StatelessWidget { | 5 | class MdWidget extends StatelessWidget { |
6 | - MdWidget(String expression, | ||
7 | - {super.key, this.style, this.onLinkTab, this.followLinkColor = false}) | ||
8 | - : exp = expression.trim(); | 6 | + const MdWidget(this.exp, |
7 | + {super.key, this.style, this.onLinkTab, this.followLinkColor = false}); | ||
9 | final String exp; | 8 | final String exp; |
10 | final TextStyle? style; | 9 | final TextStyle? style; |
11 | final Function(String url, String title)? onLinkTab; | 10 | final Function(String url, String title)? onLinkTab; |
@@ -14,17 +13,22 @@ class MdWidget extends StatelessWidget { | @@ -14,17 +13,22 @@ class MdWidget extends StatelessWidget { | ||
14 | Widget build(BuildContext context) { | 13 | Widget build(BuildContext context) { |
15 | final RegExp h = RegExp(r"^(#{1,6})\s(.*)$"); | 14 | final RegExp h = RegExp(r"^(#{1,6})\s(.*)$"); |
16 | final RegExp b = RegExp(r"^\*\*([^\s].*[^\s])\*\*$"); | 15 | final RegExp b = RegExp(r"^\*\*([^\s].*[^\s])\*\*$"); |
16 | + final RegExp i = RegExp(r"^\*([^\s].*[^\s])\*$"); | ||
17 | final RegExp a = RegExp(r"^\[([^\s].*[^\s]?)?\]\(([^\s]+)?\)$"); | 17 | final RegExp a = RegExp(r"^\[([^\s].*[^\s]?)?\]\(([^\s]+)?\)$"); |
18 | final RegExp img = RegExp(r"^\!\[([^\s].*[^\s]?)?\]\(([^\s]+)\)$"); | 18 | final RegExp img = RegExp(r"^\!\[([^\s].*[^\s]?)?\]\(([^\s]+)\)$"); |
19 | - final RegExp ol = RegExp(r"^\*{1}\s(.*)$"); | ||
20 | - final RegExp table = | ||
21 | - RegExp(r"^(((\|(.*)?\|)(\s?)+\n(\s?)+)+)?((\|(.*)?\|))$"); | 19 | + final RegExp ul = RegExp(r"^(\-)\s(.*)$"); |
20 | + final RegExp ol = RegExp(r"^([0-9]+.)\s(.*)$"); | ||
21 | + final RegExp rb = RegExp(r"^\((x)?\)\s(.*)$"); | ||
22 | + final RegExp cb = RegExp(r"^\[(x)?\]\s(.*)$"); | ||
23 | + final RegExp hr = RegExp(r"^(--)[-]+$"); | ||
24 | + final RegExp table = RegExp( | ||
25 | + r"^(((\|[^\n\|]+\|)((([^\n\|]+\|)+)?))(\n(((\|[^\n\|]+\|)(([^\n\|]+\|)+)?)))+)?$", | ||
26 | + ); | ||
22 | if (table.hasMatch(exp)) { | 27 | if (table.hasMatch(exp)) { |
23 | final List<Map<int, String>> value = exp | 28 | final List<Map<int, String>> value = exp |
24 | .split('\n') | 29 | .split('\n') |
25 | .map<Map<int, String>>( | 30 | .map<Map<int, String>>( |
26 | (e) => e | 31 | (e) => e |
27 | - .trim() | ||
28 | .split('|') | 32 | .split('|') |
29 | .where((element) => element.isNotEmpty) | 33 | .where((element) => element.isNotEmpty) |
30 | .toList() | 34 | .toList() |
@@ -38,7 +42,8 @@ class MdWidget extends StatelessWidget { | @@ -38,7 +42,8 @@ class MdWidget extends StatelessWidget { | ||
38 | } | 42 | } |
39 | } | 43 | } |
40 | if (maxCol == 0) { | 44 | if (maxCol == 0) { |
41 | - return const SizedBox(); | 45 | + // return const SizedBox(); |
46 | + return Text("", style: style); | ||
42 | } | 47 | } |
43 | return Table( | 48 | return Table( |
44 | defaultVerticalAlignment: TableCellVerticalAlignment.middle, | 49 | defaultVerticalAlignment: TableCellVerticalAlignment.middle, |
@@ -64,23 +69,96 @@ class MdWidget extends StatelessWidget { | @@ -64,23 +69,96 @@ class MdWidget extends StatelessWidget { | ||
64 | } | 69 | } |
65 | if (h.hasMatch(exp)) { | 70 | if (h.hasMatch(exp)) { |
66 | var match = h.firstMatch(exp.trim()); | 71 | var match = h.firstMatch(exp.trim()); |
67 | - return TexText( | ||
68 | - "${match?[2]}", | ||
69 | - style: [ | ||
70 | - Theme.of(context).textTheme.headline4?.copyWith(color: style?.color), | ||
71 | - Theme.of(context).textTheme.headline5?.copyWith(color: style?.color), | ||
72 | - Theme.of(context).textTheme.headline6?.copyWith(color: style?.color), | ||
73 | - Theme.of(context) | ||
74 | - .textTheme | ||
75 | - .titleMedium | ||
76 | - ?.copyWith(color: style?.color), | ||
77 | - Theme.of(context).textTheme.titleSmall?.copyWith(color: style?.color), | ||
78 | - Theme.of(context).textTheme.bodySmall?.copyWith(color: style?.color), | ||
79 | - ][match![1]!.length - 1], | 72 | + return Column( |
73 | + children: [ | ||
74 | + Row( | ||
75 | + children: [ | ||
76 | + TexText( | ||
77 | + "${match?[2]}", | ||
78 | + style: [ | ||
79 | + Theme.of(context) | ||
80 | + .textTheme | ||
81 | + .headlineLarge | ||
82 | + ?.copyWith(color: style?.color), | ||
83 | + Theme.of(context) | ||
84 | + .textTheme | ||
85 | + .headlineMedium | ||
86 | + ?.copyWith(color: style?.color), | ||
87 | + Theme.of(context) | ||
88 | + .textTheme | ||
89 | + .headlineSmall | ||
90 | + ?.copyWith(color: style?.color), | ||
91 | + Theme.of(context) | ||
92 | + .textTheme | ||
93 | + .titleLarge | ||
94 | + ?.copyWith(color: style?.color), | ||
95 | + Theme.of(context) | ||
96 | + .textTheme | ||
97 | + .titleMedium | ||
98 | + ?.copyWith(color: style?.color), | ||
99 | + Theme.of(context) | ||
100 | + .textTheme | ||
101 | + .titleSmall | ||
102 | + ?.copyWith(color: style?.color), | ||
103 | + ][match![1]!.length - 1], | ||
104 | + ), | ||
105 | + ], | ||
106 | + ), | ||
107 | + if (match[1]!.length == 1) const Divider(height: 6), | ||
108 | + ], | ||
80 | ); | 109 | ); |
81 | } | 110 | } |
82 | - if (ol.hasMatch(exp)) { | ||
83 | - var match = ol.firstMatch(exp.trim()); | 111 | + if (hr.hasMatch(exp)) { |
112 | + return const Divider( | ||
113 | + height: 5, | ||
114 | + ); | ||
115 | + } | ||
116 | + if (cb.hasMatch(exp)) { | ||
117 | + var match = cb.firstMatch(exp.trim()); | ||
118 | + return Row( | ||
119 | + crossAxisAlignment: CrossAxisAlignment.center, | ||
120 | + mainAxisSize: MainAxisSize.min, | ||
121 | + children: [ | ||
122 | + Padding( | ||
123 | + padding: const EdgeInsets.symmetric(horizontal: 10), | ||
124 | + child: Checkbox( | ||
125 | + // value: true, | ||
126 | + value: ("${match?[1]}" == "x"), | ||
127 | + onChanged: (value) {}, | ||
128 | + fillColor: ButtonStyleButton.allOrNull(style?.color), | ||
129 | + ), | ||
130 | + ), | ||
131 | + MdWidget( | ||
132 | + "${match?[2]}", | ||
133 | + style: style, | ||
134 | + ), | ||
135 | + ], | ||
136 | + ); | ||
137 | + } | ||
138 | + if (rb.hasMatch(exp)) { | ||
139 | + var match = rb.firstMatch(exp.trim()); | ||
140 | + return Row( | ||
141 | + crossAxisAlignment: CrossAxisAlignment.center, | ||
142 | + mainAxisSize: MainAxisSize.min, | ||
143 | + children: [ | ||
144 | + Padding( | ||
145 | + padding: const EdgeInsets.symmetric(horizontal: 10), | ||
146 | + child: Radio( | ||
147 | + value: true, | ||
148 | + groupValue: ("${match?[1]}" == "x"), | ||
149 | + onChanged: (value) {}, | ||
150 | + fillColor: ButtonStyleButton.allOrNull(style?.color), | ||
151 | + ), | ||
152 | + ), | ||
153 | + MdWidget( | ||
154 | + "${match?[2]}", | ||
155 | + style: style, | ||
156 | + ), | ||
157 | + ], | ||
158 | + ); | ||
159 | + } | ||
160 | + if (ul.hasMatch(exp)) { | ||
161 | + var match = ul.firstMatch(exp.trim()); | ||
84 | return Row( | 162 | return Row( |
85 | crossAxisAlignment: CrossAxisAlignment.center, | 163 | crossAxisAlignment: CrossAxisAlignment.center, |
86 | mainAxisSize: MainAxisSize.max, | 164 | mainAxisSize: MainAxisSize.max, |
@@ -90,11 +168,34 @@ class MdWidget extends StatelessWidget { | @@ -90,11 +168,34 @@ class MdWidget extends StatelessWidget { | ||
90 | child: Icon( | 168 | child: Icon( |
91 | Icons.circle, | 169 | Icons.circle, |
92 | color: style?.color, | 170 | color: style?.color, |
93 | - size: 12, | 171 | + size: 8, |
94 | ), | 172 | ), |
95 | ), | 173 | ), |
96 | MdWidget( | 174 | MdWidget( |
97 | - "${match?[1]}", | 175 | + "${match?[2]}", |
176 | + style: style, | ||
177 | + ), | ||
178 | + ], | ||
179 | + ); | ||
180 | + } | ||
181 | + if (ol.hasMatch(exp)) { | ||
182 | + var match = ol.firstMatch(exp.trim()); | ||
183 | + return Row( | ||
184 | + crossAxisAlignment: CrossAxisAlignment.center, | ||
185 | + mainAxisSize: MainAxisSize.max, | ||
186 | + children: [ | ||
187 | + Padding( | ||
188 | + padding: const EdgeInsets.symmetric(horizontal: 11), | ||
189 | + child: Text( | ||
190 | + "${match?[1]}", | ||
191 | + style: (style ?? const TextStyle()) | ||
192 | + .copyWith(fontWeight: FontWeight.bold), | ||
193 | + // color: style?.color, | ||
194 | + // size: 12, | ||
195 | + ), | ||
196 | + ), | ||
197 | + MdWidget( | ||
198 | + "${match?[2]}", | ||
98 | style: style, | 199 | style: style, |
99 | ), | 200 | ), |
100 | ], | 201 | ], |
@@ -108,6 +209,14 @@ class MdWidget extends StatelessWidget { | @@ -108,6 +209,14 @@ class MdWidget extends StatelessWidget { | ||
108 | const TextStyle(fontWeight: FontWeight.bold), | 209 | const TextStyle(fontWeight: FontWeight.bold), |
109 | ); | 210 | ); |
110 | } | 211 | } |
212 | + if (i.hasMatch(exp)) { | ||
213 | + var match = i.firstMatch(exp.trim()); | ||
214 | + return TexText( | ||
215 | + "${match?[1]}", | ||
216 | + style: | ||
217 | + (style ?? const TextStyle()).copyWith(fontStyle: FontStyle.italic), | ||
218 | + ); | ||
219 | + } | ||
111 | if (a.hasMatch(exp)) { | 220 | if (a.hasMatch(exp)) { |
112 | var match = a.firstMatch(exp.trim()); | 221 | var match = a.firstMatch(exp.trim()); |
113 | if (match?[1] == null && match?[2] == null) { | 222 | if (match?[1] == null && match?[2] == null) { |
@@ -156,20 +265,24 @@ class MdWidget extends StatelessWidget { | @@ -156,20 +265,24 @@ class MdWidget extends StatelessWidget { | ||
156 | ), | 265 | ), |
157 | ); | 266 | ); |
158 | } | 267 | } |
159 | - List<String> expL = exp | ||
160 | - .split('\n') | ||
161 | - .map( | ||
162 | - (e) => e.trim(), | ||
163 | - ) | ||
164 | - .toList(); | 268 | + List<String> expL = exp.split('\n'); |
269 | + // .map( | ||
270 | + // (e) => e.trim(), | ||
271 | + // ) | ||
272 | + // .toList(); | ||
165 | bool hasMatch = false; | 273 | bool hasMatch = false; |
166 | 274 | ||
167 | for (final each in expL) { | 275 | for (final each in expL) { |
168 | if (a.hasMatch(each) || | 276 | if (a.hasMatch(each) || |
169 | - h.hasMatch(each) || | ||
170 | b.hasMatch(each) || | 277 | b.hasMatch(each) || |
278 | + i.hasMatch(each) || | ||
279 | + h.hasMatch(each) || | ||
280 | + hr.hasMatch(each) || | ||
281 | + ol.hasMatch(each) || | ||
282 | + rb.hasMatch(each) || | ||
283 | + cb.hasMatch(each) || | ||
171 | img.hasMatch(each) || | 284 | img.hasMatch(each) || |
172 | - ol.hasMatch(each)) { | 285 | + ul.hasMatch(each)) { |
173 | hasMatch = true; | 286 | hasMatch = true; |
174 | } | 287 | } |
175 | } | 288 | } |
@@ -177,7 +290,6 @@ class MdWidget extends StatelessWidget { | @@ -177,7 +290,6 @@ class MdWidget extends StatelessWidget { | ||
177 | return Wrap( | 290 | return Wrap( |
178 | crossAxisAlignment: WrapCrossAlignment.center, | 291 | crossAxisAlignment: WrapCrossAlignment.center, |
179 | spacing: 10, | 292 | spacing: 10, |
180 | - runSpacing: 2, | ||
181 | children: exp | 293 | children: exp |
182 | .split("\n") | 294 | .split("\n") |
183 | .map<Widget>((e) => MdWidget( | 295 | .map<Widget>((e) => MdWidget( |
@@ -23,10 +23,13 @@ class TexMarkdown extends StatelessWidget { | @@ -23,10 +23,13 @@ class TexMarkdown extends StatelessWidget { | ||
23 | return Column( | 23 | return Column( |
24 | crossAxisAlignment: CrossAxisAlignment.start, | 24 | crossAxisAlignment: CrossAxisAlignment.start, |
25 | children: data | 25 | children: data |
26 | - .split("\n\n") | 26 | + .trim() |
27 | + .split( | ||
28 | + RegExp(r"\n\n+"), | ||
29 | + ) | ||
27 | .map<Widget>( | 30 | .map<Widget>( |
28 | (e) => Padding( | 31 | (e) => Padding( |
29 | - padding: const EdgeInsets.all(8.0), | 32 | + padding: const EdgeInsets.all(4), |
30 | child: MdWidget( | 33 | child: MdWidget( |
31 | e, | 34 | e, |
32 | style: style, | 35 | style: style, |
1 | name: tex_markdown | 1 | name: tex_markdown |
2 | description: This package is used to create flutter widget that can render markdown and latex formulas. It is very simple to use and uses native flutter components. | 2 | description: This package is used to create flutter widget that can render markdown and latex formulas. It is very simple to use and uses native flutter components. |
3 | -version: 0.0.2 | 3 | +version: 0.0.3 |
4 | homepage: https://github.com/saminsohag/flutter_packages/tree/main/tex_markdown | 4 | homepage: https://github.com/saminsohag/flutter_packages/tree/main/tex_markdown |
5 | 5 | ||
6 | environment: | 6 | environment: |
-
Please register or login to post a comment