You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/extend/user-extensions.md
+37-15Lines changed: 37 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ While Flet controls leverage many built-in Flutter widgets, enabling the creatio
9
9
10
10
To address this, the Flet framework provides an extensibility mechanism. This allows you to incorporate widgets and APIs from your own custom Flutter packages or [third-party libraries](https://pub.dev/packages?sort=popularity) directly into your Flet application.
11
11
12
-
In this guide, you will learn how to create Flet extension from template and then customize it to integrate 3rd-party Flutter package into your Flet app.
12
+
In this guide, you will learn how to create Flet extension from template and then customize it to integrate 3rd-party Flutter package into your Flet app or share it with community.
13
13
14
14
### Prerequisites
15
15
@@ -51,11 +51,15 @@ open build/macos/flet-spinkit-example.app
51
51
52
52
Once the project was built for desktop once, you can make changes to your python files and run it without re-building.
53
53
54
-
First, install dependencies from pyproject.toml:
54
+
First, if you are not using uv, install dependencies from pyproject.toml:
55
55
56
56
```
57
57
pip install .
58
58
```
59
+
or
60
+
```
61
+
poetry install
62
+
```
59
63
60
64
Now you can make changes to your example app main.py:
61
65
@@ -96,19 +100,9 @@ flet run
96
100
97
101
5. Re-build your app.
98
102
99
-
:::info Known issue
100
-
There is a [known issue](https://github.com/flet-dev/flet/issues/4754) that Flet would build with cached files and your changes will not be included. As a temporary solution, you need to clear cache before re-building:
103
+
When you make any changes to your flutter package, you need to re-build:
101
104
102
105
```
103
-
pip cache purge
104
-
```
105
-
106
-
:::
107
-
108
-
When you make any changes to your package, you need to re-build:
For the example purposes we will be integrating[flutter_spinkit](https://pub.dev/packages/flutter_spinkit) package into our Flet app.
117
+
Let's integrate[flutter_spinkit](https://pub.dev/packages/flutter_spinkit) package into our Flet app.
124
118
125
119
1. Add dependency.
126
120
@@ -169,7 +163,6 @@ class FletSpinkitControl extends StatelessWidget {
169
163
Go to `examples/flet_spinkit_example`, clear cache and rebuild your app:
170
164
171
165
```
172
-
pip cache purge
173
166
flet build macos -v
174
167
```
175
168
@@ -183,7 +176,11 @@ After creating new Flet project from extension template, you will see the follow
183
176
184
177
```
185
178
├── LICENSE
179
+
├── mkdocs.yml
186
180
├── README.md
181
+
├── docs
182
+
│ └── index.md
183
+
│ └── FletSpinkit.md
187
184
├── examples
188
185
│ └── flet_spinkit_example
189
186
│ ├── README.md
@@ -211,6 +208,7 @@ After creating new Flet project from extension template, you will see the follow
211
208
Flet extension consists of:
212
209
***package**, located in `src` folder
213
210
***example app**, located in `examples/flet-spinkit_example` folder
211
+
***docs**, located in `docs` folder
214
212
215
213
### Package
216
214
@@ -293,6 +291,30 @@ dependencies = [
293
291
]
294
292
```
295
293
294
+
### Docs
295
+
296
+
If you are planning to share your extension with community, you can easily generate documenation from your source code using [mkdocs](https://www.mkdocs.org/).
297
+
298
+
Flet extension comes with `docs` folder containing initial files for your documentation and `mkdocs.yml`.
299
+
300
+
Run the following command to see how your docs look locally:
Once your documentation is ready, if your package is hosted on GitHub, your can run the following command to host your documentation on GitHub pages:
311
+
312
+
```
313
+
mkdocs gh-deploy
314
+
```
315
+
316
+
You may find [this guide](https://realpython.com/python-project-documentation-with-mkdocs/#step-5-build-your-documentation-with-mkdocs) helpful to get started with mkdocs.
317
+
296
318
## Customize properties
297
319
298
320
In the example above, Spinkit control creates a hardcoded Flutter widget. Now let's customize its properties.
0 commit comments