[INFO REQ] Flutter Integration and Support

[Kumaresan]

We have been using the Bryntum Scheduler in our web application. Now we would like to integrate the same on Flutter application. Could you please show some examples or demo where Bryntum Scheduler has been integrated with Flutter application. When I have interacted with Henrik, he said its possible and will be easy. Can you guys share some inputs on how this can be integrated with Flutter application.

[pmiklashevich]

Hello,

We don't have any showcases with Flutter at the moment. We will try to create one shortly and give it to you as an entry point. ETA is next week. Ticket here: https://github.com/bryntum/support/issues/2371

Please list here the features you need, so we can add them to the demo. Are you going to use Scheduler or SchedulerPro? Also it would be nice if you share the project requirements, so we understand your usecase better.

Meanwhile you can start from reading our docs and learning how our demos work.
https://www.bryntum.com/docs/scheduler/
https://www.bryntum.com/examples/scheduler/
You can find all demos locally in the "examples" folder. Feel free to run any and modify it to see how this or that feature works.

Please pay attention to Integration section to catch general idea. Basically Scheduler is a javascript library that creates a component and renders it into a DOM element. So you need to include the library and styles, prepare a div to render Scheduler to, give it a size, and create a Scheduler object with the features you like and render it to the div using appendTo config.

If something is not clear, or you need help, please create a new thread and we will try to help you. Guidelines here: viewtopic.php?f=35&t=772

Best regards,
Pavel

[Kumaresan]

We are using Bryntum Scheduler not Pro.

Following are the items that we are trying to achieve.

1) Hours Display (Row wise) with configurable From and To time
2) Minutes Display (Row wise) under every Hours with configurable split minutes
3) Employee Display (Column Wise)
4) Expanding of block item both side in the row
5) Squeeze of block item both side in the row
6) Move the block horizontally within row
7) Move the block vertically between rows
8) Swap the blocks upon placing one over another
9) Block should be editable to have note/tip to user
10) Block should be able to differentiate in colors to represent different behavior of states
11) Adding of new row with block item
12) Ability to handle events with custom script to meet specific needs
13) Option for grouping of employee department wise

Sample GUI representation is attached.

[mats]

All seems reasonable and easy. Few comments:

1) Hours Display (Row wise) with configurable From and To time
See https://bryntum.com/docs/scheduler/#Scheduler/preset/ViewPreset and https://bryntum.com/docs/scheduler/#Scheduler/preset/ViewPresetHeaderRow

2) Minutes Display (Row wise) under every Hours with configurable split minutes
See #1

3) Employee Display (Column Wise)
See https://bryntum.com/docs/scheduler/#Grid/column/Column

4) Expanding of block item both side in the row
Please explain, add image

5) Squeeze of block item both side in the row
Please explain, add image

6) Move the block horizontally within row
Supported out of the box

7) Move the block vertically between rows
Supported out of the box

8) Swap the blocks upon placing one over another
Implementable in about 5 lines of code

9) Block should be editable to have note/tip to user
Please see https://bryntum.com/docs/scheduler/#Scheduler/feature/EventTooltip

10) Block should be able to differentiate in colors to represent different behavior of states
You can output any HTML as part of an event block. Please see: https://www.bryntum.com/examples/scheduler/nestedevents/

11) Adding of new row with block item
Just call scheduler.resourceStore.add, https://bryntum.com/docs/scheduler/#Core/data/Store#function-add

12) Ability to handle events with custom script to meet specific needs
We trigger lots of useful events, you can browse in our docs in the Events section: https://bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#events

13) Option for grouping of employee department wise
Supported: https://www.bryntum.com/examples/scheduler/grouping/

[Kumaresan]

Hope showcasing of Flutter integration / examples / Demo will be ready by this week as informed earlier and We will be able to use Bryntum scheduler in our Flutter application

[pmiklashevich]

It's very easy to start if you have some basic experience with Flutter. First need to go through the getting started guide and prepare the development environment. https://flutter.dev/docs/get-started/install

Then run in console

flutter doctor

When all requirements are met you can move on.

Then create a new application

flutter create scheduler_app

Flutter compiles the app to native code. It allows to use Flutter & Dart to have one code base and compile it to both iOS and Android. To allow Javascript component to be used inside a native app, need to use official WebView plugin developed by the Flutter dev team.

Please follow the installation guide here to run web app inside native iOS/Android app: https://pub.dev/packages/webview_flutter/install
When the plugin is enabled, copy the official example to main.dart file: https://pub.dev/packages/webview_flutter/example
You can compile it and see how it works. The demo shows how to run Javascript in the app. And how to communicate with the Javascript component. You can replace the initialUrl with a URL to one of our online demos. At the end you will have to build and run a web version of the Scheduler and point to it in your Flutter app.

The WebView docs are here: https://pub.dev/documentation/webview_flutter/latest/webview_flutter/WebView-class.html
Please learn them to understand how the WebView demo works.

Here's what we've got so far (Scheduler Basic demo):

Снимок экрана 2021-02-16 в 15.39.42.png (870.1 KiB) Viewed 1345 times

We're going to wrap it up in a demo in the future releases. Stay tuned!

Meanwhile you can share your progress/experience with us. If you have questions about getting started the Flutter app, you can post here, otherwise please create a new thread for each new question you have. Note, since this is a web application embedded into native application, always try to narrow a problem down to simple web application. And only when the problem is reproducible in Flutter only, attach Dart sources. How to ask for help is described here: viewtopic.php?f=35&t=772

Good luck!

[Kumaresan]

Can you please share the link for demo code base which you have created so that i can directly import and run the app?

[pmiklashevich]

It is not ready to be published yet. We will inform you as soon as it is available. Have you tried to proceed the steps I explained above? Does WebView work for you fine? If so, just replace the initialUrl with the URL of your choice and you're ready to develop your app. You said you have already Scheduler application for Web. You can set its URL as an entry point.

[Kumaresan]

Thanks for the response and suggestions.
Currently our Flutter application going to be on Web not devices. If we use WebView, does it possible to pass the data back and forth? Any alternative other than WebView to integrate the Bryntum scheduler in Flutter web.

[pmiklashevich]

Currently our Flutter application going to be on Web not devices.

Could you please explain the need of Flutter if you only target Web? The main idea of Flutter is to have one code base to be able to compile it then to mobile/web/desktop. This is a quote from official website https://flutter.dev/

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

To build Flutter app for Web you can enabled web support, see here:
https://flutter.dev/docs/get-started/web
https://flutter.dev/docs/get-started/codelab-web
But it makes no sense to embed Javascript component into Flutter app and then compile it back to web (though technically should be possible). Just develop normal web version as a standalone project. Please explain the usecase you have.