Introduction to Dart Programming and Flutter Framework PDF

Introduction to Dart Programming Language and Flutter Framework Tim Dosen PBP Dart Programming Language Try Dart Stepping stone: https://dart.dev/tutorials/server/get-started https://dartpad.dev/ And then explore! NB: starts with main() method...

Introduction to Dart Programming Language and Flutter Framework Tim Dosen PBP Dart Programming Language Try Dart Stepping stone: https://dart.dev/tutorials/server/get-started https://dartpad.dev/ And then explore! NB: starts with main() method 3  About Dart Dart is a programming language that optimized and specialized around the needs of user interface creation. Basic example of the language: // Define a function. void printInteger(int aNumber) { print('The number is $aNumber.'); // Print to console. } // This is where the app starts executing. void main() { var number = 42; // Declare and initialize a variable. printInteger(number); // Call a function. } 4 More on Dart Syntax: https://dart.dev/samples  Important Concepts in Dart Everything you can place in a variable is an object, and every object is an instance of a class Although Dart is strongly typed, type annotations are optional because Dart can infer types. - Typed languages are the languages in which we define the type of data type and it will be known by machine at the compile-time or at runtime. 1. Statically typed languages: the data type of a variable is known at the compile time which means the programmer has to specify the data type of a variable at the time of its declaration. Examples: C, C++, and Java. 2. Dynamically typed language: In these languages, interpreters assign the data type to a variable at runtime depending on its value. We don’t even need to specify the type of variable that a function is returning or accepting in these languages. Examples: JavaScript, Python, Ruby, and Perl. 5 https://dart.dev/guides/language/language-tour#important-concepts  Important Concepts in Dart If you enable null safety, variables can’t contain null unless you say they can. You can make a variable nullable by putting a question mark (?) at the end of its type. When you want to explicitly say that any type is allowed, use the type Object? (if you’ve enabled null safety), Object, or — if you must defer type checking until runtime Dart supports generic types, like List (a list of integers) or List (a list of objects of any type). 6 https://dart.dev/guides/language/language-tour#important-concepts  Important Concepts in Dart Dart supports top-level functions (such as main()), as well as functions tied to a class or object (static and instance methods, respectively). You can also create functions within functions (nested or local functions). Similarly, Dart supports top-level variables, as well as variables tied to a class or object (static and instance variables). Instance variables are sometimes known as fields or properties. Unlike Java, Dart doesn’t have the keywords public, protected, and private. If an identifier starts with an underscore (_), it’s private to its library. Identifiers can start with a letter or underscore (_), followed by any combination of those characters plus digits. Dart has both expressions (which have runtime values) and statements (which don’t). Dart tools can report two kinds of problems: warnings and errors. 7 https://dart.dev/guides/language/language-tour#important-concepts Please take your time to try run Fibonacci source code sample from: https://dart.dev/samples Using DartPad https://dartpad.dev/ 8 Flutter Framework Installation & Test Drive Installation https://docs.flutter.dev/get-started/install Test Drive https://docs.flutter.dev/get-started/test-drive?tab=terminal#create-app 10  Mobile Platform Development Framework Review: Django Architecture Your Webserver Environment Request Run Web Internet # manage.py Page Merged of html template and Value from process Extracted arguments from Request Page Web Request index.html views.py It’s your html It’s your python template code code models.py Access to URL (on Browser): DB It’s your model code https://pbp.cs.ui.ac.id/ 12 12 12 In General, we can do: Flutter API created DB by Django Django 13 Django and Flutter Architecture Your Webserver Environment Request Run Web Internet # manage.py Page Response Request views.py It’s your python code SERIALIZERS FLUTTER DB Model https://pbp.cs.ui.ac.id/json 14 14 14 Mobile Platform Structure and Development Life Cycle Mobile App Development Life Cycle (MADLC) Web app diinstal di server. Mobile app diinstal di handphone user. https://www.researchgate.net/publication/276129115_Suitability_of_Existing_Software_Development_Life_Cycle_SDLC_in_Context_o f_Mobile_Application_Development_Life_Cycle_MADLC 16 Development Environment Development Environment Android’s integrated development environment: Android Studio Programming languages: Java, Kotlin, JavaScript, C++ Apple's integrated development environment: Xcode Programming languages: Swift, C 18  Source: https://www.studytonight.com/an Native Android Architecture droid/android-architecture It’s where Your Apps It’s where Your Code uses Android Framework Android OS & Library Hardware Driver 19  Source: Native iOS Architecture https://www.dotnettricks.com/lear n/xamarin/understanding-xamarin- ios-build-native-ios-app It’s where Your Apps It’s where Your Code uses iOS Framework iOS OS & Library Hardware Driver 20 About Flutter Flutter is Google's UI toolkit for building natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. 21 Flutter on Android & iOS Flutter is Google's UI toolkit for building natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Embedder 22 Why Flutter? Problems Flutter wants to solve 1. Long/more expensive development cycle 2. Multiple language to learn 3. Long build/compile time 4. Existing cross-platform solutions side-effects Compared to previous existing framework, Flutter has: - High performance (owns the pixel, no extra layer, native) - Full control of the user interface - Dart language (declarative UI, syntax to layout, etc) - Being back by Google - Open Source - Lots of developer resources and tooling (google codelabs, etc) 24 Project Structure The “hello world” Example 1: flutter create hello_flutter The code for your app is in lib/main.dart Example 2: flutter create my_app 26 Widgets (Stateless & Stateful) MVC vs MVP vs MVVM Architecture In MVC, every action in the View The term ViewModel means "Model When the view notifies the presenter that the user has correlates with a call to a Controller of a View", and can be thought of done something (for example, clicked a button), the along with an action. as abstraction of the view, but it presenter will then update the model and synchronize The controller is responsible for also provides a specialization of the any changes between the Model and the View. handling the User Input and then Model that the View can use for One important thing to mention is that the Presenter updating the Model or the View. data-binding. doesn’t communicate directly to the view. Instead, it communicates through an interface. This way, the presenter and the model can be tested in isolation. 28 What is Widget? It’s a reusable component Remember MTV? Flutter is component based => MVVM => Model, View, View-Model Widget is a component. - Widgets can be understood as the visual representation of parts of the application. And, also handle its own the behaviour. - Widgets are put together to compose the UI of an application. - Imagine it as a puzzle in which you define the pieces. 29 Everything is Widget! A visual/structural element that is a basic structural element, such as the Button or Text widgets A layout specific element that may define the position, margins, or padding, such as the Padding widget A style element that may help to colorize and theme a visual/structural element, such as the Theme widget An interaction element that helps to respond to interactions in different ways, such as the GestureDetector widget 30 Widget Tree The widget tree is the logical representation of all the UIs widgets. It is computed during layout (measurements and structural info) and used during rendering (frame to screen) and hit testing (touch interactions), and this is the things Flutter does best. Widgets are represented in the tree as nodes. It may have a state associated with it; every change to its state results in rebuilding the widget and the child involved. 31  Stateless Flutter Framework: What is Widget? Widget runApp(MyApp()) import 'package:flutter/material.dart'; Run instance class MyApp MyApp // void main() { // runApp(MyApp()); // } MaterialApp void main() => runApp(MyApp()); home class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Scaffold return MaterialApp( appBar body home: Scaffold( appBar: AppBar( title: Text('My First App'), AppBar Text ), body: Text('This is my default text!'), title $1: ‘This is my ), default text’ ); } Text } 32 $1: ‘My First App’ 33 Stateless Widget They do not have a state; they do not change by themselves through some internal action or behavior They are changed by external events on parent widgets in the widgets tree. Give control of how they are built to some parent widget in the tree. 34 Stateless Widget The child widget will receive its description from the parent widget and will not change it by itself. Stateless widgets have only final properties defined during construction, and that's the only thing that needs to be built on the device screen. 35 In Code Another example: https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html 36 Stateful Widget 37 Stateful Widget Change their descriptions dynamically during their lifetimes. Immutable, but they have a company State class that represents the current state of the widget. 38 In Code By extending statefulWidget, MyHomePage must return a valid State object in its createState() method. In our example, it returns an instance of _MyHomePageState. Another example: https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html 39 Flutter Hot Reload Most Famous Feature JIT => Just in time reload, you can instantly see the rendering result on the compilator without need to recompile the code A JIT compilation is where the source code is loaded and compiled to native machine code by the Dart VM on the fly. 41 What is the difference between hot reload, hot restart, and full restart? Hot reload loads code changes into the VM and re-builds the widget tree, preserving the app state; it doesn’t rerun main() or initState(). (⌘\ in Intellij and Android Studio, ⌃F5 in VSCode) Hot restart loads code changes into the VM, and restarts the Flutter app, losing the app state. (⇧⌘\ in IntelliJ and Android Studio, ⇧⌘F5 in VSCode) Full restart restarts the iOS, Android, or web app. This takes longer because it also recompiles the Java / Kotlin / ObjC / Swift code. On the web, it also restarts the Dart Development Compiler. There is no specific keyboard shortcut for this; you need to stop and start the run configuration. Flutter web currently supports hot restart but not hot reload. 42 References https://www.freecodecamp.org/news/an-introduction-to-flutter-the-basics- 9fe541fd39e2/ http://livre21.com/LIVREF/F6/F006145.pdf https://www.studytonight.com/android/android-architecture https://www.dotnettricks.com/learn/xamarin/understanding-xamarin-ios-build-native- ios-app Flutter Docs: https://docs.flutter.dev/ Visual Studio Code: https://code.visualstudio.com/ Visual Studio Code Flutter Extension: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter Android Studio: https://developer.android.com/studio/ https://arun-ts.blogspot.com/2014/10/ https://learn.microsoft.com/en-us/archive/blogs/erwinvandervalk/the-difference- between-model-view-viewmodel-and-other-separated-presentation-patterns https://learn.microsoft.com/en-us/archive/blogs/johngossman/introduction-to- modelviewviewmodel-pattern-for-building-wpf-apps 43