Trace:
Differences
This shows you the differences between two versions of the page.
| Both sides previous 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 will 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]]. | ||