Flutter introduction - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Senior Software Engineer, talabat About me Lecturer, Budapest University of Technology and Economics Organizer, Flutter Abu Dhabi & Dubai

Slide 3

Slide 3 text

Installing Flutter https://docs.flutter.dev/get-started/install

Slide 4

Slide 4 text

Everything is a Widget

Slide 5

Slide 5 text

Widgets Stateless Widgets Stateful Widgets • Immutable • Cannot change its state • Ex: Icon, Text • Mutable • Can change state • setState() function • Ex: Checkbox, TextField

Slide 6

Slide 6 text

Widget Catalog

Slide 7

Slide 7 text

Designing UIs in Flutter

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Hot Reload vs Hot Restart

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

List UI

Slide 16

Slide 16 text

List UI

Slide 17

Slide 17 text

List UI @override Widget build(BuildContext context) { return Column( children: [ MovieListItem(!!...), MovieListItem(!!...) MovieListItem(!!...), !!/// (!!...) MovieListItem(!!...), ], ); }

Slide 18

Slide 18 text

List UI @override Widget build(BuildContext context) { return SingleChildScrollView( child: Column( children: [ MovieListItem(!!...), MovieListItem(!!...), MovieListItem(!!...), !!/// (!!...) MovieListItem(!!...), ], ), ); }

Slide 19

Slide 19 text

List UI @override Widget build(BuildContext context) { return SingleChildScrollView( child: Column( children: [ MovieListItem(...), MovieListItem(...), MovieListItem(...), /// (...) MovieListItem(...), ], ), ); } 60 FPS

Slide 20

Slide 20 text

Slide 21

Slide 21 text

List UI @override Widget build(BuildContext context) { return ListView( children: [ MovieListItem(...), MovieListItem(...), MovieListItem(...), /// (...) MovieListItem(...), ], ), ); }

Slide 22

Slide 22 text

List UI @override Widget build(BuildContext context) { return ListView.builder( itemCount: 100, itemBuilder: (context, index) { return MoviesListItem(!!...); }, ); }

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

Synchronous & Asynchronous programming

Slide 25

Slide 25 text

Refers to code that executes in a linear, step-by-step manner Synchronous programming

Slide 26

Slide 26 text

Refers to code that executes in a linear, step-by-step manner Synchronous programming void main() { functionA(); functionB(); functionC(); }

Slide 27

Slide 27 text

Refers to code that executes in a linear, step-by-step manner Synchronous programming void main() { functionA(); longestFunctionEver(); functionC(); }

Slide 28

Slide 28 text

Allows code to execute independently of the main program ﬂow Asynchronous programming Multi-threading

Slide 29

Slide 29 text

Allows code to execute independently of the main program ﬂow Asynchronous programming Mul=-threading Dart’s single thread with Event Loop

Slide 30

Slide 30 text

Allows code to execute independently of the main program ﬂow Asynchronous programming Multi-threading Dart’s single thread with Event Loop

Slide 31

Slide 31 text

A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future

Slide 32

Slide 32 text

A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future asyncFetchData() async { !!/// (…) }

Slide 33

Slide 33 text

A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future Future asyncFetchData() async { /// (…) } Returns with Future

Slide 34

Slide 34 text

A Future is an object in Dart and Flutter that represents a value that may not be available yet. Future Future asyncFetchMovie() async { !!/// Long task await Future.delayed(Duration(…)); return 'Movie title'; } Returns with Future

Slide 35

Slide 35 text

Demo

Slide 36

Slide 36 text

A Future is an object in Dart and Flutter that represents a value that may not be available yet. Future Returns with Future 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(); } }); }

Slide 37

Slide 37 text

A Future is an object in Dart and FluEer that represents a value that may not be available yet. Future Returns with Future Can be used with the FutureBuilder widget

Slide 38

Slide 38 text

Time consuming tasks

Slide 39

Slide 39 text

Wai=ng for User interac=on Time consuming tasks File I/O – reading & wri=ng ﬁles Bluetooth communica=on Image processing Complex computa=ons (3D rendering) Network requests ⏳💬 💾📂 📶🤝 🖼🔍 🧮🌟 🌐🚀

Slide 40

Slide 40 text

HTTP Network Handling

Slide 41

Slide 41 text

Understanding REST API calls Handling JSON responses HTTP Network Handling

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

JSON (JavaScript Object Notation) is a lightweight data interchange format Handling JSON responses Built-in support for JSON parsing with the dart:convert library Reﬂec=on -> Code genera=on 📱 🌐 JSON 📦

Slide 44

Slide 44 text

Demo

Slide 45

Slide 45 text

What’s Next?

Slide 46

Slide 46 text

GitHub Repo:

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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