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