Desenvolvimento Multiplataforma com Flutter e Firebase

Slides do workshop ministrado na semana academica da Engenhaira de Controle e Automação e Engenharia Eletrônica, sobre desenvolvimento multiplataforma com Flutter e Firebase.

Transcript

1. DESENVOLVIMENTO MOBILE MULTIPLATAFORMA FLUTTER & FIREBASE
2. JOÃO REICHERT ・iOS Developer @ Brave.ag ・Eng. Controle e Automação @ UFPel ・5 anos trabalhando com iOS https://github.com/reeichert/ joao.reichert@brave.ag
3. CONTEÚDO • Recap ! • O que é Flutter " • O que é Firebase # • Code
4. RECAP !
5. WRAPPER WEBVIEW
6. WRAPPER WEBVIEW
7. TRANSPILER
8. TRANSPILER
9. FLUTTER
10. O QUE É FLUTTER?
11. O QUE É FLUTTER? • Um SDK para desenvolver apps multiplataforma*
12. O QUE É FLUTTER? • Um SDK para desenvolver apps multiplataforma* • Foco em apps de alta performance, modernos e bonitos
13. O QUE É FLUTTER? • Um SDK para desenvolver apps multiplataforma* • Foco em apps de alta performance, modernos e bonitos • Desenvolvido pelo Google, é gratuito e open-source
14. O QUE É FLUTTER? • Um SDK para desenvolver apps multiplataforma* • Foco em apps de alta performance, modernos e bonitos • Desenvolvido pelo Google, é gratuito e open-source
15. O QUE É FLUTTER? • Um SDK para desenvolver apps multiplataforma* • Foco em apps de alta performance, modernos e bonitos • Desenvolvido pelo Google, é gratuito e open-source ★ Multiplataforma (iOS, Android e Fuchsia)
16. FLUTTER
17. EXEMPLOS
18. EXEMPLOS
19. TUDO É WIDGET
20. WIDGETS StatelessWidget
21. WIDGETS StatefulWidget
22. PLATFORM CHANNELS iOS Host Android Host Flutter App (client) MethodChannel
23. PLATFORM CHANNELS Kotlin
24. PLATFORM CHANNELS Kotlin
25. PLATFORM CHANNELS Swift
26. PLATFORM CHANNELS Swift
27. PLATFORM CHANNELS Flutter
28. HOT RELOAD
29. HOT RELOAD
30. HOT RELOAD
31. HOT RELOAD
32. XCODE
33. XCODE
34. XCODE
35. ESTRUTURA
36. ESTRUTURA import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(); } }
37. ESTRUTURA class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.teal, ), home: HomePage(), ); } }
38. ESTRUTURA class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold(); } }
39. ESTRUTURA class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ) ); } }
40. ESTRUTURA class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.teal, ), home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ) ); }
41. ESTRUTURA
42. ESTRUTURA class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ), drawer: Drawer() ); } }
43. ESTRUTURA class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ), drawer: Drawer() ); } }
44. ESTRUTURA class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ), drawer: Drawer(), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () {}, ) ); } }
45. ESTRUTURA class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ), body: playersList(), ); } Widget playersList() { return Container(); } }
46. ESTRUTURA class HomePage extends StatelessWidget { final players = [ 'Bruxo', 'Romário', 'Ronaldo', 'Adriano', 'Neymar', 'Vampeta' ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Workshop'), ), body: playersList(), ); } Widget playersList() { return Container(); } }
47. ESTRUTURA Widget playersList() { return ListView.builder( itemCount: players.lenght, itemBuilder: (context, index) { return Text(players[index]); } ); }
48. ESTRUTURA Widget playerRow(String playerName) { return ListTile( title: Text(playerName) ); }
49. ESTRUTURA Widget playersList() { return ListView.builder( itemCount: players.lenght, itemBuilder: (context, index) { return playerRow(players[index]); } ); } Widget playerRow(String playerName) { return ListTile( title: Text(playerName) ); }
50. ESTRUTURA Widget playerRow(String playerName) { return Padding( padding: const EdgeInsets.all(8.0), child: Container( decoration: BoxDecoration( border: Border.all(color: Colors.red), borderRadius: BorderRadius.circular(10.0) ), child: ListTile( title: Text(playerName), ), ), ); }
51. ESTRUTURA Column( children: <Widget>[], ); Row( children: <Widget>[], );
52. FIREBASE
53. O QUE É FIREBASE? Firebase nos ajuda a construir melhores apps mobile e a crescer o negócio Construindo aplicativos de forma rápida, sem ter que gerenciar infra-estrutura
54. O QUE É FIREBASE? Gratuito em sua maior parte e com preços acessíveis para escalar
55. BUILD • Realtime Database • Cloud Firestore (Beta) • Authentication • ML Kit(Beta) • Hosting • Cloud Storage • Cloud Functions
56. IMPROVE • Crashlytics • Performance Monitoring • Test Lab
57. GROW • Google analytics • Cloud messaging • Dynamic links • Remote config • App indexing • A/B Testing (Beta) • Predictions (Beta)
58. FLUTTERFIRE
59. CODE '
60. CODE '