Flutter Intro

Slides from our Flutter Intro workshop. On our own Mobile Hack Night event, we introduced developers to Flutter and taught them how to create Apps with it.

Transcript

1. 1 What you will build What you will learn Prerequisites We will build a movie app prototype with a list, simple navigation and images. - What Flutter is - What Widgets are - How the Tooling around it works • Android Studio/IntelliJ + Flutter Plugin • Flutter SDK • Xcode or Android SDK Setup Flutter Introduction 1. QuickBird HackNight How to create a cross-platform app from a single code base - clone http://bit.do/qb-flutter
2. Flutter Introduction © 2019 QuickBird Studios Hack Night What is this “Flutter” thing? 2
3. Flutter Introduction © 2019 QuickBird Studios Hack Night A different approach to cross-platform 3
4. Flutter Introduction © 2019 QuickBird Studios Hack Night 4 Framework API PlatformAPI PlatformAPI PlatformAPI Platform wrappers
5. Flutter Introduction © 2019 QuickBird Studios Hack Night 5 Button UIButton <button/> android.widget.Button Platform wrappers
6. Flutter Introduction © 2019 QuickBird Studios Hack Night Cons of platforms wrappers 6 • Less control • ⬛ Blackbox • Dependency Hell • Device Fragmentation • Web stuff
7. Flutter Introduction © 2019 QuickBird Studios Hack Night “One of the biggest mistakes in my career was to use web for mobile” - Lee Byron 7
8. Flutter Introduction © 2019 QuickBird Studios Hack Night 8 Flutter Canvas How Flutter works
9. Flutter Introduction © 2019 QuickBird Studios Hack Night 9 Flutter Architecture
10. Flutter Introduction © 2019 QuickBird Studios Hack Night 10 Flutter Architecture
11. Flutter Introduction © 2019 QuickBird Studios Hack Night Widgets 11 void main() { runApp( Center( child: Text('Hello, world!'), ), ); }
12. Flutter Introduction © 2019 QuickBird Studios Hack Night Widgets 12 MaterialApp( home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ QuickbirdLogo(), Text( "QuickBird HackNight", style: TextStyle(fontSize: 56), textAlign: TextAlign.center, ), ], ), ), );
13. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Column 13 Column( mainAxisAlignment: MainAxisAlignment.center, children: [ QuickbirdLogo(), HackNightTitle(), ], )
14. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Column 14 Column( mainAxisAlignment: MainAxisAlignment.end, children: [ QuickbirdLogo(), HackNightTitle(), ], )
15. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Column 15 Column( mainAxisAlignment: MainAxisAlignment.start, children: [ QuickbirdLogo(), HackNightTitle(), ], )
16. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Row 16 Row( children: [ QuickBirdLogo(), QuickBirdLogo(), ], )
17. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Row 17 Row( mainAxisAlignment: MainAxisAlignment.end, children: [ QuickBirdLogo(), QuickBirdLogo(), ], ),
18. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Row 18 Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ QuickBirdLogo(), QuickBirdLogo(), ], ),
19. Flutter Introduction © 2019 QuickBird Studios Hack Night Layouts: Row 19 Row( children: [ Expanded(child: QuickBirdLogo()), QuickBirdLogo(), ], )
20. Flutter Introduction © 2019 QuickBird Studios Hack Night How about non static content? 20
21. Flutter Introduction © 2019 QuickBird Studios Hack Night Creating your first StatefulWidget 21 class BirdFlyGame extends StatefulWidget { @override _BirdFlyGameState createState() => _BirdFlyGameState(); } class _BirdFlyGameState extends State<BirdFlyGame> { var currentAlignment = Alignment(0, 0); @override Widget build(BuildContext context) { return Align( alignment: currentAlignment, child: QuickbirdLogo(), ); } }
22. Flutter Introduction © 2019 QuickBird Studios Hack Night Creating your first StatefulWidget 22 class _BirdFlyGameState extends State<BirdFlyGame> { var currentAlignment = Alignment(0, 0); @override Widget build(BuildContext context) { return Align( alignment: currentAlignment, child: GestureDetector( child: QuickbirdLogo(), onTap: () => randomizeAlignment(), ), ); } void randomizeAlignment() { setState(() { currentAlignment = Alignment(nextDouble(), nextDouble()); }); } }
23. Flutter Introduction © 2019 QuickBird Studios Hack Night Creating your first StatefulWidget 23 class _BirdFlyGameState extends State<BirdFlyGame> { var currentAlignment = Alignment(0, 0); @override Widget build(BuildContext context) { return AnimatedAlign( duration: Duration(milliseconds: 300), curve: Curves.easeOut, alignment: currentAlignment, child: GestureDetector( child: QuickbirdLogo(), onTap: () => randomizeAlignment(), ), ); } void randomizeAlignment() { setState(() { currentAlignment = Alignment(nextDouble(), nextDouble()); }); } }
24. Flutter Introduction © 2019 QuickBird Studios Hack Night What we learned * 24 • Composing Widgets • Basic Layouts • Stateful and Stateless Widgets • Simple State management
25. Flutter Introduction © 2019 QuickBird Studios Hack Night Let’s code! 25 Clone http://bit.do/qb-flutter and open main.dart
26. Flutter Introduction © 2019 QuickBird Studios Hack Night Wrapping it up 26
27. Flutter Introduction © 2019 QuickBird Studios Hack Night Thanks! 27