Skip to content

08 Flutter/Dart - Intro

Native development

native

Flutter

flutter

Install 1

Install (Xcode and/or Android studio required)

Install

Win

  • https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.13.6-stable.zip

macOS - intel

  • https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.13.6-stable.zip

macOS - Apple Silicon (rosetta2 also needed?)

  • https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.13.6-stable.zip

Linux

  • https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.13.6-stable.tar.xz

Install 2

Set up path variable

export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

Run 

1
2
> flutter precache
> flutter doctor

Fix all problems!

Ide

Either VS Code or Android Studio

  • VS Code
    • Install Flutter extension (Flutter v3.48.0)
  • Android Studio
    • Install Flutter and Dart plugin

Run again doctor from inside VS
View > Command Paletter > type doctor > Select Flutter: Run Flutter Doctor

FIX ALL THE ISSUES!!!!

First App - VS Code

  • View > Command Palette.
  • Flutter: New Project
  • Give name and location


Let everything cool down, look for emulator connection on lower-right corner

  • Select Debug palette, click on Cog wheel
    • Create flutter debug configuration (or just press F5)

flutter

flutter

Run your app

  • Debug > Start Debugging
  • Or press F5

Wait for it!

  • Try Hot Reload
    • Change some strings in main.dart
    • Save file
  • Activate Dart Dev Tools when asked

Flutter - Dart

  • Flutter apps are written using the Dart programming language, also originally from Google and now an ECMA standard.
  • Dart shares many of the same features as other modern languages such as Kotlin and Swift and can be trans-compiled into JavaScript code.
  • As a cross-platform framework, Flutter most closely resembles React Native, as Flutter allows for a reactive and declarative style of programming.

Dart

https://dart.dev/
https://dart.dev/guides/language/language-tour

  • Strongly typed, Single inheritance
  • Mixins
  • Implicit interfaces (every class is also an Interface)
  • implements for interfaces, extends for inheritance, with for mixin

Flutter - Widget

  • Everything is widget!

  • Images, icons, and text in a Flutter app are all widgets. Even layout elements such as the rows, columns, and grids that arrange, constrain, and align other widgets, are widgets themselves.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter'),
        ),
        body: const Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

Flutter - Widgets

  • Widgets describe what their view should look like given their current configuration and state.
  • When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
  • Widgets are subclasses mostly of either StatelessWidget or StatefulWidget, depending on whether your widget manages any state.
  • Main task is to implement a build() function, which describes the widget in terms of other, lower-level widgets.
  • Lowest widget is RenderObjectWidget

StatelessWidget

  • User interface does not depend on anything other than the configuration information in the object/widget itself and the BuildContext in which the widget is inflated
  • Stateless widgets receive arguments from their parent widget, which they store in final member variables. When a widget is asked to build(), it uses these stored values to derive new arguments for the widgets it creates.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
class Frog extends StatelessWidget {
  const Frog({
    Key? key,
    this.color = const Color(0xFF2DBD3A),
    required this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(color: color, child: child);
  }
}

StatefulWidget

  • Widget constructors only use named arguments.
  • Named arguments can be marked as required using “required”.
  • The first argument is key, and the last argument is child, children, or the equivalent.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Bird extends StatefulWidget {
  const Bird({
    Key? key,
    this.color = const Color(0xFFFFE306),
    required this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  State<Bird> createState() => _BirdState();
}

class _BirdState extends State<Bird> {
  double _size = 1.0;
  void grow() {
    setState(() {
      _size += 0.1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.color,
      transform: Matrix4.diagonal3Values(_size, _size, 1.0),
      child: widget.child,
    );
  }
}

Basic widgets

  • Text
    • The Text widget lets you create a run of styled text within your application.
  • Row, Column
    • These flex widgets let you create flexible layouts in both the horizontal (Row) and vertical (Column) directions. The design of these objects is based on the web’s flexbox layout model.
  • Stack
    • Instead of being linearly oriented (either horizontally or vertically), a Stack widget lets you place widgets on top of each other in paint order. You can then use the Positioned widget on children of a Stack to position them relative to the top, right, bottom, or left edge of the stack. Stacks are based on the web’s absolute positioning layout model.
  • Container
    • The Container widget lets you create a rectangular visual element. A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow. A Container can also have margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three-dimensional space using a matrix.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  body: Center(
          child: Row(
            mainAxisAlignment: 
                MainAxisAlignment.center,
            children: <Widget>[
              Text('0'),
              Text('0'),
              Text('0'),
            ],
          ),
        ),