La prima app con Flutter: Hello World

Completati tutti gli step di installazione dell'ambiente di sviluppo e di un editor, possiamo passare alla creazione della nostra prima app, il classico Hello World.

Apriamo una finestra di terminale e utilizzando il comando cd, posizioniamoci nella cartella radice in cui vogliamo creare il nostro progetto 

 cd c:\work\flutter

e diamo il comando di creazione flutter create, aggiungendo il nome che vogliamo attribuire alla cartella che conterrà il progetto (possibilmente scritto in lettere minuscole, senza spazi)

 flutter create flutter_hello_world

Attendiamo che siano creati tutti i file del progetto e al termine apriamo la cartella appena creata con Visual Studio Code. Se tutto è andato per il verso giusto, dovreste vedere una struttura simile a questa:

Per il momento, tralasciamo tutto il resto e concentriamoci sul file main.dart presente nella cartella lib. Apriamo questo file e sostituiamo il contenuto con il seguente codice

//1

import 'package:flutter/material.dart';

void main() {

  //2

  runApp(const MyApp());

}

//3

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    //4

    return MaterialApp(

      //5

      home:  Scaffold(

        //6

        appBar:  AppBar(

          title : const Text('Flutter demo'),

        ),

        body: const Center(

          //7

          child: Text('Hello World')

        ),

      )

    );

  }

}

Analizziamo alcuni punti del codice:

• //1 - con il comando import 'package:flutter/material.dart';, stiamo indicando di utilizzare come tema di progettazione quello material (linee guida definite da Google); in alternativa, per il momento sappiate solo che esiste un tema cupertino (che segue le linee guida della Apple);
• //2  - all'interno della funzione main() (tipica di tutti i linguaggi C-style) con il comando runApp(const MyApp()); lanciamo la nostra applicazione, definita con la classe MyApp;
• //3  - definiamo la classe MyApp come estensione del tipo StatelessWidget ;
• //4  - nel metodo build() della classe che definisce la nostra applicazione, torniamo un oggetto MaterialApp, con alcuni parametri assegnati;
• //5  - valorizziamo il parametro home con uno Scaffold, cioè un oggetto con il quale è possibile definire la barra del titolo e un contenuto;
• //6  - definiamo il testo da visualizzare nella barra del titolo;
• //7  - definiamo il testo da visualizzare nel corpo della pagina;

Lanciamo l'applicazione da Visual Studio Code

Utilizzando il selettore presente sulla barra di stato di Visual studio Code, 

scegliamo l'emulatore su cui far girare, in debug, la nostra applicazione, e dal menu Esegui, Avvia Debug o in alternativa con il tasto F5 per ottenere questo

Bene, la nostra prima app in Flutter è completata. Nei prossimi articoli, lavoreremo ancora con questo progetto, per introdurre altri elementi di base.

Come per gli articoli precedenti potete trovare questo codice tra le mie repo GitHub: https://github.com/luigimicco/flutter_hello_world