Flutter: Killing two birds with one stone

I gave a talk on how you can get started with flutter, in Road to DevFest event
https://gdg.community.dev/events/details/google-gdg-banjul-presents-road-to-devfest/

Transcript

1. Flutter: Umar Saidu Auna. Lead Organizer, GDG Minna Mobile Engineer @umarauna Killing two birds with one stone
2. What is flutter?
3. Is it a language or framework?
4. Flutter is….
5. • Google Ul toolkit for building natively compiled apps for mobile, web and desktop. • Build iOS and Android apps using a single codebase. • Cross platform - Mac / Windows / Linux. • Extremley fast. What flutter is…
6. • Flutter uses an O0P language called Dart. • Optimized for Ul. • Fast on all platforms. • Similar to JavaScript with elements of Java. The Dart Programming Language
7. Widgets
8. Widgets • Everything is a widget. • Uses Material design. • Scaffold, AppBar, Container, Image, Icon, etc. • Stateless & Stateful. • Build method.
9. class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( //Here you can design the UI of this screen ); } } Stateless Widgets Immutable state that can NOT be changed during runtime
10. class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Container( //Here you can design the UI of this stateful screen ); } } Stateful Widgets Mutable state that can be redrawn on the screen multiple times
11. Different Types of Widgets Output & Input (Visible) RaisedButton(), Text(), Card(),..... Drawn onto the screen: “What the user sees” Layout & Control (Invisible) Row(), Column(), ListView(),.... Give your app structure and control how visible widgets are drawn onto the screen (indirectly visible)
13. Important things to know
14. If you are wondering how flutter/Dart “transformed” to a Native app.. Flutter SDK helps in doing that. Flutter SDK
15. Flutter Does NOT Use Platform Primitives Flutter ElevatedButton() ElevatedButton() iOS Android UIButton Button Custom implementation (“Flutter directly controls every pixel which is drawn”) Greater control, less platform-limitations X
16. Material Design Everywhere • Material is a Design System created (and heavily used) by Google. • It is NOT Google's Style, it is for Everyone! It is indeed highly customizable (and works on iOS devices, too). • Material Design is built into Flutter but you also find Apple-styled (Cupertino) widgets.
17. Requirements • iOS: Latest Xcode & iOS simulator / iPhone. • Android: Android Studio / SDK / Emulator / Android Phone. • Android Studio Plugin. • VSCode Extension.
19. How to start killing two birds with one stone?
21. Free resources • https://flutter.dev/learn • https://bit.ly/fluttermapp • https://medium.com/flutter-community • https://www.youtube.com/c/FlutterCommunityVideos • https://fluttercrashcourse.com/ Resources
22. Advice
23. Finally…..
24. Thank you. Umar Saidu Auna. Lead Organizer, GDG Minna. @umarauna Questions?