Develop your Mobile App with Flutter and Joomla 4
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
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
Really try them!!
Really try them!!
Really try them!!
About J4 API
Token authorization
Get Stuff
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
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
My 2 Apps
SourSativa App
Wheeltime App
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
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

Develop your Mobile app with Flutter and Joomla 4

  • 1.
    Develop your MobileApp with Flutter and Joomla 4
  • 2.
    Carlos Cámara • Webdeveloper • 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 noteabout Sponsors • About J4 API • Introduction to Flutter • Our fi rst App with Flutter • Use Joomla as backend for our Flutter App
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    About Flutter • Multiplatformdevelopment: 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.
  • 13.
  • 14.
  • 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 • AwesomeFlutter 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