This document provides an overview of Flutter and Dart. It discusses installing Flutter, the basics of Dart including classes and constructors, and key Flutter concepts like widgets, stateless and stateful widgets, Material and Cupertino design, animations, pub.dev, state management, and network requests. It also covers limitations of Flutter and resources for learning more.

1. Widyarso Joko Purnomo
Curriculum Developer - Dicoding

2. Flutter is Google’s UI toolkit for building beautiful, natively compiled
applications for mobile, web, and desktop from a single codebase.

8. Install Flutter SDK: https://flutter.dev/docs/get-started/install

11. Dart
class Cat {
String name;
Cat(this.name);
@override
String toString() => "My Cat's name is: $name";
}
void main() {
final tom = Cat('Tom');
print(tom);
for (int i = 0; i < 5; i++) {
print('hello ${i + 1}');
}
}
● High similarity with other
programming languages
● OOP with functional supports
● AOT & JIT compilations

12. Dart
Important things to note:
● Class & constructor
● Named parameters
● Anonymous function/lambda
● Future & async-await

13. Flutter Fundamentals

14. Widgets
● In Flutter, everything is a widget.
● Widget is UI building block in Flutter
● Can represent:
○ Layout : Row, Column, Stack, Scaffold
○ Structures : Button, Text, Image
○ Styles : TextStyle, Color, Padding
○ Animations : FadeInPhoto, ColorTween
○ Positioning & Alignment : Center,
Padding

15. Stateless Widget
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello :)',
),
],
),
),
);
}
}

16. Stateful Widget
class MyCounter extends StatefulWidget {
@override
_MyCounterState createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times: $_counter',
),
RaisedButton(
onPressed: _incrementCounter,
child: Text('Add'),
),
],
),
);
}
}

17. Material Design
https://flutter.dev/docs/development/ui/widgets/material

18. Cupertino (iOS Style)
https://flutter.dev/docs/development/ui/widgets/cupertino

19. Animation (Hero)
https://flutter.dev/docs/development/ui/animations
Animation approaches:
● Implicit Animation
● Explicit Animation

20. pub.dev

21. pub.dev

22. State Management

23. Network Request

24. Local Storage

25. Flutter Web
● Hummingbird
● Beta
● Still a lot of limitations
1 flutter channel beta
2 flutter upgrade
3 flutter config --enable-web
4 flutter run -d chrome

26. Limitations
● It is still new
● Google can ‘kill’ it
● Feature limitations

27. Learning Resources
● https://flutter.dev/
● https://www.youtube.com/flutterdev
● https://www.dicoding.com/learningpaths/21

28. REPLACE ME
Contact:
@widdyjp
widyarso@dicoding.com
THANKS!
Follow us:
@idcamp @dicoding