---
title: Intro a Flutter
tags: DAW, programacio, flutter
---

<div style="width: 30%; margin-left: auto;">


</div>

<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Llicència de Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />Aquesta obra està subjecta a una llicència de <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Reconeixement-CompartirIgual 4.0 Internacional de Creative Commons</a>

# Intro a Flutter
## Build apps for any screen
## Instal·lació de Flutter
Seguiu la guia d'instal·lació de la [pàgina oficial](https://docs.flutter.dev/get-started/install).

## Hello World!
A mode d'introducció a Flutter analitzarem el nostre _primer projecte_, l'imprescindible __Hello World!__.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello World!',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          color: Colors.blue,
        ),
      ),
    ),
  );
}

La primera línia:
> import 'package:flutter/material.dart';

la trobarem en la quasi totalitat dels projectes i serveix per a importar la llibreria 'material.dart' que ens proporciona material de disseny d'aplicacions creat per Google.

Desprès cridem a la funció d'entrada de la nostra app: 'main', on cridem a una una única funció: 'runApp' a la que li passem un sol paràmetre de tipus Widget __-ja veurem més endavant què és un widget de Flutter-__.

## Els Widgets
Un _Widget_ és un bloc de la interfaç gràfica de la nostra aplicació. La interfaç gràfica de Flutter es composa de widgets ordenats en forma d'arbre, on un sól widget fa d'arrel de l'arbre.

<img style="width: 30%"
src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg" />

## Google codelabs
Google, com a creador de Flutter està interessat en formar desenvolopadors en aquesta tecnologia i consegüentment és un bon proveïdor de tutorials per a tots els nivells.
En aquesta secció desenvoluparem la [app d'exemple](https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=en#0) que ens suggereixen.

### Observacions
1. La classe ChangeNotifierProvider es pot veure com una implementació del [patró de disseny __Observer__](https://refactoring.guru/design-patterns/observer).
2. Atenció als que coneixeu HTML i CSS, a Flutter el Padding és un Widget més. Això és degut a que es prioritza la __composició__ per sobre de l'herència. Segons la documentació oficial, aquesta característica proporciona major llibertat a l'hora d'utilitzar el padding, el widget no ha de tenir cura de què és el que està embolcallant; podem fer padding fins i tot de tota l'app sencera o de qualsevol altre widget, encara que sigui un widget custom creat per nosaltres.
3. [__SafeArea__ class](https://api.flutter.dev/flutter/widgets/SafeArea-class.html): Genera widgets amb suficient paddding per a evitar que el seu contingut quedi ocult per intrussions del sistema operatiu (per exemple, la barra d'estat) o per característiques físiques del dispositiu (com poden ser els ja comuns _notch_ d'alguns telèfons mòbils.)
4.[__Expanded__ class](https://api.flutter.dev/flutter/widgets/Expanded-class.html): Classe que embolcalla un widget del tipus Row, Column o Flex i els fa ocupar tot l'espai disponible.
5. Flutter utilitza __pixels lògics__ com a unitat de longitud. 38 pixels lògics equivalent aproximadament a 1 cm, independentment de la resolució del dispositiu.

## Enllaços d'interés
[Pàgina oficial](https://flutter.dev/)
[Instal·lació d'Android Studio](https://developer.android.com/studio/install#linux)
[Articles interessants](https://xurxodev.com/tag/flutter/)