|
1 | 1 | # flutter_text_decorator |
| 2 | +![Flutter Text Decorator Logo][logo_white] |
| 3 | +![Flutter Text Decorator Logo][logo_black] |
2 | 4 |
|
3 | | - |
4 | | -<!--  --> |
5 | | -<!-- [](https://pub.dev/packages/flutter_tex_dec) --> |
6 | | - |
7 | | - |
| 5 | +[![License: MIT][license_badge]][license_link] |
| 6 | +[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link] |
8 | 7 |
|
9 | 8 | Bring your words to life leveraging flutter_text_decorator with wavy underlines, colorful boxes, speech bubbles and more. Whether you want to highlight important details, add a playful touch or simply stand out. The package makes it easy to add personality and flair to your text. |
10 | 9 |
|
| 10 | +Developed with passion by [**EXXETA**](https://www.exxeta.com) |
| 11 | + |
11 | 12 | ## Features |
12 | 13 |
|
13 | | -- [x] Boxes |
14 | | -- [x] Underline |
15 | | -- [x] Wavy Box |
16 | | -- [x] Speech Bubble |
| 14 | +- ✅ Boxes |
| 15 | +- ✅ Underline |
| 16 | +- ✅ Wavy Box |
| 17 | +- ✅ Speech Bubble |
17 | 18 |
|
18 | 19 | Feel free to check out the [Example App](./example) and play around. |
19 | 20 |
|
20 | | -## Installation |
21 | | - |
22 | | -### pub.dev |
23 | | - |
24 | | -Add flutter_text_decorator as dependency to `pubspec.yaml`: |
25 | | - |
26 | | -``` |
27 | | -dependencies: |
28 | | - flutter_tex_dec: ^0.1.0 |
29 | | -``` |
30 | | - |
31 | | -## Usage |
32 | | - |
33 | | -### Box Decorator |
34 | | - |
35 | | -``` |
36 | | -TextDecorator.boxed( |
37 | | - style: BoxStyle.rounded, |
38 | | - text: const Text( |
39 | | - 'Rounded Box', |
40 | | - style: TextStyle(fontSize: 32), |
41 | | - ), |
42 | | - strokeWidth: 2, |
43 | | -), |
44 | | -``` |
45 | | - |
46 | | - |
47 | | - |
48 | | -### Circle Decorator |
49 | | - |
50 | | -``` |
51 | | -TextDecorator.circled( |
52 | | - style: CircleStyle.circled, |
53 | | - text: const Text( |
54 | | - 'Circled Text', |
55 | | - style: TextStyle(fontSize: 32), |
56 | | - ), |
57 | | -), |
58 | | -``` |
59 | | - |
60 | | - |
61 | | - |
62 | | -### Underline Decorator |
| 21 | +## Quick Start 🚀 |
| 22 | + |
| 23 | +1. **Add `flutter_text_decorator` to your `pubspec.yaml`** |
| 24 | + |
| 25 | + ```yaml |
| 26 | + dependencies: |
| 27 | + flutter_text_decorator: |
| 28 | + ``` |
| 29 | +
|
| 30 | +2. **Run the following terminal command to install the package:** |
| 31 | + ```sh |
| 32 | + flutter pub get |
| 33 | + ``` |
| 34 | + |
| 35 | +3. **Import the package into your Dart file** |
| 36 | + |
| 37 | + ```sh |
| 38 | + import 'package:flutter_text_decorator/flutter_text_decorator.dart'; |
| 39 | + ``` |
| 40 | + |
| 41 | +4. **Use TextDecorator** |
| 42 | + |
| 43 | + Here is a simple example of how you can use `TextDecorator.boxed`: |
| 44 | + ```dart |
| 45 | + import 'package:flutter/material.dart'; |
| 46 | + import 'package:flutter_text_decorator/flutter_text_decorator.dart'; |
| 47 | +
|
| 48 | + class MyDecoratedWidget extends StatelessWidget { |
| 49 | + const MyDecoratedWidget({super.key}); |
| 50 | +
|
| 51 | + @override |
| 52 | + Widget build(BuildContext context) { |
| 53 | + return Center( |
| 54 | + child: TextDecorator.boxed( |
| 55 | + style: BoxStyle.rounded, |
| 56 | + text: const Text( |
| 57 | + 'Hello Decorated World!', |
| 58 | + style: TextStyle(fontSize: 24, color: Colors.white), |
| 59 | + ), |
| 60 | + color: Colors.blueAccent, |
| 61 | + strokeWidth: 2, |
| 62 | + ), |
| 63 | + ); |
| 64 | + } |
| 65 | + } |
| 66 | + ``` |
| 67 | + |
| 68 | + |
| 69 | +## Styles Preview |
| 70 | + |
| 71 | +<table> |
| 72 | + <tr> |
| 73 | + <td align="center"> |
| 74 | + <h3>Box Decorator</h3> |
| 75 | + <img src="./documentation/img/box.png" alt="Box Decorator Example" width="80%"> |
| 76 | + </td> |
| 77 | + <td align="center"> |
| 78 | + <h3>Circle Decorator</h3> |
| 79 | + <img src="./documentation/img/circle.png" alt="Circle Decorator Example" width="80%"> |
| 80 | + </td> |
| 81 | + </tr> |
| 82 | + <tr> |
| 83 | + <td align="center"> |
| 84 | + <h3>Underline Decorator</h3> |
| 85 | + <img src="./documentation/img/underline.png" alt="Underline Decorator Example" width="80%"> |
| 86 | + </td> |
| 87 | + <td align="center"> |
| 88 | + <h3>Highlight Decorator</h3> |
| 89 | + <img src="./documentation/img/highlight.png" alt="Highlight Decorator Example" width="80%"> |
| 90 | + </td> |
| 91 | + </tr> |
| 92 | +</table> |
| 93 | + |
| 94 | + |
| 95 | +## Planned features 🎯 |
| 96 | + |
| 97 | +We're always thinking of new ways to make text decoration even more fun and versatile! Our next big idea is to introduce a **Comic effect** to bring a playful, graphic-novel style to your Flutter apps. Stay tuned for this and other enhancements. |
63 | 98 |
|
64 | | -``` |
65 | | -TextDecorator.underlined( |
66 | | - style: UnderlineStyle.horizontal, |
67 | | - text: const Text( |
68 | | - 'Underlined Text', |
69 | | - style: TextStyle(fontSize: 24), |
70 | | - ), |
71 | | - color: Colors.orange, |
72 | | - strokeWidth: 2, |
73 | | -), |
74 | | -``` |
75 | | - |
76 | | - |
77 | | - |
78 | | -### Highlight Decorator |
79 | | - |
80 | | -``` |
81 | | -TextDecorator.highlighted( |
82 | | - style: HighlightStyle.marker, |
83 | | - text: const Text( |
84 | | - 'Highlighted Text', |
85 | | - style: TextStyle(fontSize: 32), |
86 | | - ), |
87 | | -), |
88 | | -``` |
89 | | - |
90 | | - |
91 | | - |
92 | | -## Roadmap |
93 | | - |
94 | | -### TODO's |
95 | | - |
96 | | -- [ ] Fix Wavy Box corners |
97 | | -- [ ] Add test automation |
98 | | - |
99 | | -### Planned features |
100 | | - |
101 | | -- [ ] Comic effect |
102 | 99 |
|
103 | 100 | ## Contributing |
| 101 | +We love new ideas and contributions from the community! If you have a suggestion, a bug report, or want to contribute code, please check out our [CONTRIBUTING](./CONTRIBUTING.md) guide to get started. Your input helps make `flutter_text_decorator` even better! |
104 | 102 |
|
105 | | -See [CONTRIBUTING](./CONTRIBUTING.md) |
106 | 103 |
|
107 | | -## Authors and acknowledgment |
| 104 | +## Authors |
108 | 105 |
|
109 | 106 | Authors: |
110 | 107 |
|
111 | 108 | - [Tobias Rump](https://github.com/TobiasRump) |
112 | 109 | - [Jonas Klock](https://github.com/jay-k98) |
113 | 110 |
|
114 | | -Special Thanks: |
115 | | - |
116 | | -- Noah Bauer for the creative name of this package |
117 | | - |
118 | 111 | ## License |
119 | | - |
120 | | -See [LICENSE](./LICENSE) |
| 112 | +This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details. |
| 113 | + |
| 114 | +[logo_black]: ./assets/flutter_text_decorator_logo_dark.png#gh-light-mode-only |
| 115 | +[logo_white]: ./assets/flutter_text_decorator_logo_light.png#gh-dark-mode-only |
| 116 | +[license_link]: https://opensource.org/licenses/MIT |
| 117 | +[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg |
| 118 | +[very_good_analysis_badge]: https://img.shields.io/badge/style-very_good_analysis-B22C89.svg |
| 119 | +[very_good_analysis_link]: https://pub.dev/packages/very_good_analysis |
| 120 | +[very_good_ventures_link]: https://verygood.ventures |
0 commit comments