08 Flutter/Dart - Intro

Native development

native

Flutter

flutter

Install 1

Install (Xcode and/or Android studio required)

Win

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

macOS - intel

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

macOS - Apple Silicon (rosetta2 also needed)

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

Linux

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

Install 2

Set up path variable

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

Run

> 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

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

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.

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.

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.

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.

  body: Center(
          child: Row(
            mainAxisAlignment: 
                MainAxisAlignment.center,
            children: <Widget>[
              Text('0'),
              Text('0'),
              Text('0'),
            ],
          ),
        ),