Flutter introduction

In April 2023, I gave an online workshop on Flutter development in collaboration with 7 GDSC groups during Flutter Forward Extended with BCE Patna. Over 80 university students attended the workshop where I covered topics like synchronous and asynchronous programming in Dart, understanding REST API calls and integrating one response to a basic UI.

Code samples: https://github.com/flutter-uae/flutter-intro-movie-app
Event link: https://gdsc.community.dev/events/details/developer-student-clubs-bakhtiyarpur-college-of-engineering-patna-presents-advanced-concepts-in-flutter/

Transcript

1. Introduc)on to Flu-er Senior Software Engineer @talabat , Delivery Hero Lecturer @Budapest University of Technology and Economics Co-organizer @Flutter Abu Dhabi & Dubai Csongor Vogel gerfalcon GerfalconVogel
2. Senior Software Engineer, talabat About me Lecturer, Budapest University of Technology and Economics Organizer, Flutter Abu Dhabi & Dubai
3. Installing Flutter https://docs.flutter.dev/get-started/install
4. Everything is a Widget
5. Widgets Stateless Widgets Stateful Widgets • Immutable • Cannot change its state • Ex: Icon, Text • Mutable • Can change state • setState() function • Ex: Checkbox, TextField
6. Widget Catalog
7. Designing UIs in Flutter
12. Hot Reload vs Hot Restart
13. In the previous episode What is Flutter? History of Flutter Advantages of Flutter Flutter Architecture Everything is a Widget Stateless vs Stateful Widgets Hot reload & Hot restart Live coding: Building Movie app UI
14. Agenda Understanding some advanced widget & UI components Synchronous & Asynchronous programming Pubspec & package integration Understanding REST API calls Handling JSON responses Connecting Movie app UI with APIs Resources for Advance Flutter
15. List UI
16. List UI
17. List UI @override Widget build(BuildContext context) { return Column( children: [ MovieListItem(!!...), MovieListItem(!!...) MovieListItem(!!...), !!/// (!!...) MovieListItem(!!...), ], ); }
18. List UI @override Widget build(BuildContext context) { return SingleChildScrollView( child: Column( children: [ MovieListItem(!!...), MovieListItem(!!...), MovieListItem(!!...), !!/// (!!...) MovieListItem(!!...), ], ), ); }
19. List UI @override Widget build(BuildContext context) { return SingleChildScrollView( child: Column( children: [ MovieListItem(...), MovieListItem(...), MovieListItem(...), /// (...) MovieListItem(...), ], ), ); } 60 FPS
20. List UI @override Widget build(BuildContext context) { return SingleChildScrollView( child: Column( children: [ MovieListItem(!!...), MovieListItem(!!...), MovieListItem(!!...), !!/// (!!...) MovieListItem(!!...), ], ), ); } 60 FPS ❌
21. List UI @override Widget build(BuildContext context) { return ListView( children: [ MovieListItem(...), MovieListItem(...), MovieListItem(...), /// (...) MovieListItem(...), ], ), ); }
22. List UI @override Widget build(BuildContext context) { return ListView.builder( itemCount: 100, itemBuilder: (context, index) { return MoviesListItem(!!...); }, ); }
23. Demo
24. Synchronous & Asynchronous programming
25. Refers to code that executes in a linear, step-by-step manner Synchronous programming
26. Refers to code that executes in a linear, step-by-step manner Synchronous programming void main() { functionA(); functionB(); functionC(); }
27. Refers to code that executes in a linear, step-by-step manner Synchronous programming void main() { functionA(); longestFunctionEver(); functionC(); }
28. Allows code to execute independently of the main program flow Asynchronous programming Multi-threading
29. Allows code to execute independently of the main program flow Asynchronous programming Mul=-threading Dart’s single thread with Event Loop
30. Allows code to execute independently of the main program flow Asynchronous programming Multi-threading Dart’s single thread with Event Loop
31. A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future
32. A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future asyncFetchData() async { !!/// (…) }
33. A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future Future<T> asyncFetchData() async { /// (…) } Returns with Future<T>
34. A Future is an object in Dart and Flutter that represents a value that may not be available yet. Future Future<String> asyncFetchMovie() async { !!/// Long task await Future.delayed(Duration(…)); return 'Movie title'; } Returns with Future<T>
35. Demo
36. A Future is an object in Dart and Flutter that represents a value that may not be available yet. Future Returns with Future<T> Can be used with the FutureBuilder widget @override Widget build(BuildContext context) { return FutureBuilder( future: future, builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { return widgetToBuild; } else if (snapshot.hasError) { return Icon(Icons.error_outline); } else { return CircularProgressIndicator(); } }); }
37. A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future Returns with Future<T> Can be used with the FutureBuilder widget
38. Time consuming tasks
39. Wai=ng for User interac=on Time consuming tasks File I/O – reading & wri=ng files Bluetooth communica=on Image processing Complex computa=ons (3D rendering) Network requests ⏳💬 💾📂 📶🤝 🖼🔍 🧮🌟 🌐🚀
40. HTTP Network Handling
41. Understanding REST API calls Handling JSON responses HTTP Network Handling
42. REST (Representational State Transfer) is an architectural style for web services Understanding REST API calls HTTP methods like: • POST (Create) • GET (Read), • PUT (Update), • DELETE (Delete). 📱 🌐 REST
43. JSON (JavaScript Object Notation) is a lightweight data interchange format Handling JSON responses Built-in support for JSON parsing with the dart:convert library Reflec=on -> Code genera=on 📱 🌐 JSON 📦
44. Demo
45. What’s Next?
46. GitHub Repo:
47. What’s Next? Fancy custom scrolling - Slivers Asynchronous programming – Generators, Streams, error handling Animations - tween/physics-based State management - Provider, BLoC or Riverpod Networking - Authentication, headers and interceptors Persistent data - path, key-value data, SQLite Testing - unit, widget and integration tests Platform-specific APIs - Platform Channels
48. Senior SoGware Engineer, talabat - Delivery Hero Lecturer, Budapest University of Technology and Economics Co-organizer, FluHer Abu Dhabi & Dubai Csongor Vogel Thank you! @GerfalconVogel In/csongorvogel @gerfalcon