Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
flutterui:custom_screen [2020/08/06 22:48] admin |
flutterui:custom_screen [2020/08/06 22:53] admin |
||
---|---|---|---|
Line 50: | Line 50: | ||
=== Creating a custom screen === | === Creating a custom screen === | ||
- | Theres are two kinds of custom screens | + | Theres are two use-cases of custom screens |
- | - A custom screen thats available only on the client side | + | - A screen which is available only on the client side |
- | - A custom screen thats available on the server | + | - A screen which is available on the server |
- | In this tutorial we will cover both of these. Let's start with a custom screen thats not available on the server. For this we have to once again extend an already existing class: **CustomScreen**. | + | In this tutorial we'll cover both use-cases. Let's start with a custom screen thats not available on the server. For this we have to extend an already existing class: **CustomScreen**. |
<file dart> | <file dart> | ||
Line 76: | Line 76: | ||
</file> | </file> | ||
- | In this class you can return any widget you want in the **getWidget** function. The **withServer** function tells the client not to communicate with the server for this screen. The **update** function is not necessary for this example. | + | In this class you can return any widget you want in the **getWidget** function. The **withServer** function tells the client, not to communicate with the server for this screen. The **update** function is not necessary for this example. |
If you want to create a custom screen that communicates with the server, you have to `return true;` in the **withServer** function: | If you want to create a custom screen that communicates with the server, you have to `return true;` in the **withServer** function: | ||
Line 123: | Line 123: | ||
</file> | </file> | ||
- | In the **getWidget** function we once again return our desired widget. In this case we create a CoCustomComponent which can hold any widget we want. Afterwards we get the component that we want to replace from the widget tree via `this.componentScreen.getComponentFromName('contactPanel');`. | + | In the **getWidget** function we return our custom widget. In this case we create a CoCustomComponent which can hold any widget we want. Afterwards we get the component that we want to replace from the widget tree via `this.componentScreen.getComponentFromName('contactPanel');`. |
- | To replace this component with out very own widget we just have to call `this.componentScreen.replaceComponent(comp, contactComp);`. | + | To replace this component with our own widget, we just have to call `this.componentScreen.replaceComponent(comp, contactComp);`. |
We also override the **update** function to update our components when we get new data from the server. The **withServer** function now tells our screen to communicate with the server. | We also override the **update** function to update our components when we get new data from the server. The **withServer** function now tells our screen to communicate with the server. | ||
An example screen can be found [[https://github.com/sibvisions/flutterclient.example/blob/master/lib/screens/contact_custom_screen.dart|here]]. And an example CustomScreenManager [[https://github.com/sibvisions/flutterclient.example/blob/master/lib/example_custom_screen_manager.dart|here]]. | An example screen can be found [[https://github.com/sibvisions/flutterclient.example/blob/master/lib/screens/contact_custom_screen.dart|here]]. And an example CustomScreenManager [[https://github.com/sibvisions/flutterclient.example/blob/master/lib/example_custom_screen_manager.dart|here]]. |