2.1: Concetti base di Flutter

In questa lezione andremo a vedere quelli che sono i concetti fondamentali degli elementi di Flutter.

Alcune informazioni utili

• Tutti i widget iniziano con la maiuscola mentre gli argomenti con la minuscola.
• In flutter ogni elemento è un widget e ogni widget ha i propri argomenti

Architettura di base di un’app Flutter

Un’app Flutter è composta da:

• main() → punto di ingresso
• runApp() → lancia l’app
• Widget → tutto è un widget!

void main() {
    runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                body: Center(child: Text("Hello Flutter!")),
            ),
        );
    }
}

Approccio dichiarativo

A differenza di molte altre soluzioni Flutter adotta come React un approccio dichiarativo sulla UI questo ci permette di delegare la gestione della ui allo stato e facilmente separare la logica di business dalla UI.

Widget Tree

In Flutter, l’interfaccia utente è un albero di widget. Ogni widget può avere figli, e insieme formano una gerarchia:

Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(
                children: [
                    Text("Ciao"),
                    ElevatedButton(onPressed: () {}, child: Text(\"Premi\")),
                ],
            ),
        ),
    );
}

Struttura:

Scaffold
    └── Center
        └── Column
            ├── Text
            └── ElevatedButton

Ciclo di Vita dei Widget

StatelessWidget

• build() viene chiamato una sola volta.
• Il widget non cambia mai dopo la creazione.

StatefulWidget

• Usa una classe State con metodi specifici:

Come Flutter aggiorna la UI

1. Chiami setState()
2. Flutter marca il widget come “sporco”
3. Richiama build() e genera un nuovo albero

L’algoritmo di diff (Reconciliation)

Flutter confronta il nuovo widget tree con il precedente:

• Se tipo e Key coincidono → riusa il widget
• Altrimenti → lo ricrea (Da questo possiamo dire che il Widget è Immutabile)

ListView(
    children: items.map((item) => Text(item, key: ValueKey(item))).toList(),
)

Senza Key, Flutter si basa solo sulla posizione, il che può portare a errori se l’ordine cambia.

Widget principali

Possiamo individuare quelli che sono i widget base utili per realizzare una applicazione ma prima facciamo una lista di vari widget che in futuro potranno essere esplorati.

Layout

Single-child

• Container
• Center
• Padding
• Expanded
• Constrained Box

Multi-child

• Column
• Row
• Stack
• Carousel View
• Grid View
• List View
• Wrap

Sliver widgets

I Sliver widgets sono dei widget speciali usati all’interno di scroll view personalizzate per ottenere comportamenti di scorrimento avanzati e flessibili.

• CustomScrollView
• SliverAppBar
• SliverGrid
• SliverList

Questi sono solo alcuni Widget utili per il layout dell’applicazione ma sono sufficienti per la maggior parte delle view.

Text

• Text
• DefaultTextStyle
• RichText

Assets, images, and icon widgets

• Asset Bundle
• Icon
• Image
• Raw Image

Scrolling

• DraggableScrollableSheet
• Grid View
• List View
• Page View
• RefreshIndicator
• SingleChildScrollView
• ScrollBar

Async widgets

• Future Builder
• Stream Builder

Painting and effect widgets

• BackdropFilter
• DecoratedBox
• RotatedBox
• Transform
• CustomPaint

Input Widget

• Autocomplete
• Form
• FormField

Interaction Widget

Touch

• AbsorbPointer
• DraggableScrollableSheet
• Dismissible
• Draggable
• GestureDetector

Routing

• Hero
• Navigator

Animation and motion widgets

• AnimatedWidget (abstract class)
• DecoratedBoxTransition
• Align Transition
• Animated Builder
• Animated Container
• AnimatedDefaultTextStyle
• AnimatedList
• AnimatedSize
• FadeTransition
• MatrixTransition