Review of features and capabilities of Joomla 4 Web Services and Flutter and we started developing an App to manage our Joomla Site.

1. Develop your Mobile App with Flutter and Joomla 4

2. Carlos Cámara
• Web developer
• Mastering Joomla and
PrestaShop
• 2 Mobile Apps published
• Spanish Podcaster at
MastermindJoomla.com
• Twitter: @carcam
• Web:
www.hepta.es
www.joomladesigner.com

3. Roadmap
• A note about Sponsors
• About J4 API
• Introduction to Flutter
• Our
fi
rst App with Flutter
• Use Joomla as backend for our Flutter App

4. Really try them!!

5. Really try them!!

6. Really try them!!

7. About J4 API

8. Token authorization

9. Get Stuff

10. About Flutter
• Multiplatform development: Mobile devices (iOS, Android), Desktop
(MacOS, Windows, Linux), Web
• O
ffi
cial framework for Fuchsia
• Integrated with Code, Android Studio, Intellij, Emacs, Vim
• Works with his own graphic engine (Skia)
• Hot Reload
• Dart language
• Everything is a Widget
• Tons of 3rd party libraries developed by an awesome community

11. Flutter Web developers
• Dart is an evolution of JavaScript
• Flutter is inspired in web design
• Several layout Widgets and positioning inspired in Flexbox &
Grid
• Widgets are like block HTML elements (SPAN, DIV, UL,…) but a
bit more speci
fi
c
• It’s a great entry point to App development for Web developers
• Debugger similar to Firefox or Chrome developer tools

12. My 2 Apps

13. SourSativa App

14. Wheeltime App

16. References
• Joomla WebServices:
https://magazine.joomla.org/all-issues/august-2020/joomla-web-services-api-101-
tokens,-testing-and-a-taste-test
• https://hoppscotch.io
• Install Flutter:
https://docs.
fl
utter.dev/get-started/install
• Flutter for WebDevs:
https://docs.
fl
utter.dev/get-started/
fl
utter-for/web-devs
• Convert JSON in dart classes:
https://app.quicktype.io/
https://javiercbk.github.io/json_to_dart/
• Code of the demo App for this session
https://github.com/carcam/joomla_
fl
utter_jdayusa22

17. Extensions Code
• Awesome Flutter Snippets
https://marketplace.visualstudio.com/items?
itemName=Nash.awesome-
fl
utter-snippets
• Dart
https://marketplace.visualstudio.com/items?
itemName=Dart-Code.dart-code
• Flutter
https://marketplace.visualstudio.com/items?
itemName=Dart-Code.
fl
utter