Skip to content

Commit 69d77b1

Browse files
authored
Update extending flet guide for 0.27.4 (#403)
* Update user-extensions.md * added screenshot
1 parent 93ddc64 commit 69d77b1

File tree

2 files changed

+37
-15
lines changed

2 files changed

+37
-15
lines changed

docs/extend/user-extensions.md

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ While Flet controls leverage many built-in Flutter widgets, enabling the creatio
99

1010
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.
1111

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.
1313

1414
### Prerequisites
1515

@@ -51,11 +51,15 @@ open build/macos/flet-spinkit-example.app
5151

5252
Once the project was built for desktop once, you can make changes to your python files and run it without re-building.
5353

54-
First, install dependencies from pyproject.toml:
54+
First, if you are not using uv, install dependencies from pyproject.toml:
5555

5656
```
5757
pip install .
5858
```
59+
or
60+
```
61+
poetry install
62+
```
5963

6064
Now you can make changes to your example app main.py:
6165

@@ -96,19 +100,9 @@ flet run
96100

97101
5. Re-build your app.
98102

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:
101104

102105
```
103-
pip cache purge
104-
```
105-
106-
:::
107-
108-
When you make any changes to your package, you need to re-build:
109-
110-
```
111-
pip cache purge
112106
flet build macos -v
113107
```
114108

@@ -120,7 +114,7 @@ build/macos/flet-spinkit-example.app/Contents/MacOS/flet-spinkit-example --debug
120114

121115
## Integrate 3rd-party Flutter package
122116

123-
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.
124118

125119
1. Add dependency.
126120

@@ -169,7 +163,6 @@ class FletSpinkitControl extends StatelessWidget {
169163
Go to `examples/flet_spinkit_example`, clear cache and rebuild your app:
170164

171165
```
172-
pip cache purge
173166
flet build macos -v
174167
```
175168

@@ -183,7 +176,11 @@ After creating new Flet project from extension template, you will see the follow
183176

184177
```
185178
├── LICENSE
179+
├── mkdocs.yml
186180
├── README.md
181+
├── docs
182+
│ └── index.md
183+
│ └── FletSpinkit.md
187184
├── examples
188185
│ └── flet_spinkit_example
189186
│ ├── README.md
@@ -211,6 +208,7 @@ After creating new Flet project from extension template, you will see the follow
211208
Flet extension consists of:
212209
* **package**, located in `src` folder
213210
* **example app**, located in `examples/flet-spinkit_example` folder
211+
* **docs**, located in `docs` folder
214212

215213
### Package
216214

@@ -293,6 +291,30 @@ dependencies = [
293291
]
294292
```
295293

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:
301+
302+
```
303+
mkdocs serve
304+
```
305+
306+
Open http://127.0.0.1:8000 in your browser:
307+
308+
<img src="/img/docs/extending-flet/mkdocs.png" className="screenshot-50" />
309+
310+
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+
296318
## Customize properties
297319

298320
In the example above, Spinkit control creates a hardcoded Flutter widget. Now let's customize its properties.
263 KB
Loading

0 commit comments

Comments
 (0)