Programmazione Web

Come configurare Flutter e creare un'applicazione Web Hello World in Linux

Come configurare Flutter e creare un'applicazione Web Hello World in Linux
Flutter è un framework di sviluppo di applicazioni che può essere utilizzato per sviluppare app multipiattaforma in esecuzione su codice nativo una volta compilato o costruito. Essendo sviluppato da Google, Flutter consente di creare prototipi rapidi in breve tempo oltre a creare app a tutti gli effetti che utilizzano API specifiche della piattaforma. Utilizzando Flutter, puoi creare app dall'aspetto accattivante per dispositivi mobili, sistemi operativi desktop e browser Web utilizzando i widget di material design ufficiali. Questo articolo discuterà l'installazione di Flutter e la creazione di un nuovo progetto per lo sviluppo di un'applicazione web. Flutter utilizza "Dart" come linguaggio di programmazione principale per scrivere app.

Installa Flutter su Linux

Puoi installare Flutter in Linux usando due metodi. Il primo metodo è piuttosto semplice, tutto ciò che devi fare è eseguire un semplice comando per installare Flutter dallo snap store.

$ sudo snap install flutter --classic

Il secondo metodo prevede il download del repository flutter da GitHub. Esegui i seguenti comandi in successione per installare Flutter manualmente:

$ sudo apt install git
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1 --no-single-branch

Tieni presente che l'esecuzione del comando precedente ti consentirà di ottenere i file richiesti dal repository ufficiale di Flutter, inclusi i file binari eseguibili. Sarai in grado di eseguire questi file binari dalla cartella "bin". Tuttavia, questi file eseguibili non verranno aggiunti alla variabile PATH a livello di sistema e non sarà possibile eseguirli da nessuna parte a meno che non li si aggiunga manualmente alla variabile PATH. Per farlo, segui i passaggi seguenti.

Aperto ".bashrc" che si trova nella tua cartella home usando il tuo editor di testo preferito:

$ nano “$HOME/.bashrc”

Aggiungi la seguente riga in fondo al file, sostituendo con cura il corda.

export PERCORSO="$PERCORSO:/fluttuare/bin"

Ad esempio, se hai scaricato il repository Flutter nella cartella "Download", dovrai aggiungere la seguente riga:

export PATH="$PATH:$HOME/Download/flutter/bin"

Salva il file una volta che hai finito. Ricaricare ".bashrc" eseguendo il comando seguente:

$ fonte “$HOME/.bashrc”

Per verificare che la cartella "bin" di Flutter sia stata aggiunta al percorso, eseguire il comando seguente:

$ echo $PATH

Dovresti ottenere un output come questo:

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/ nit/Download/flutter/bin

Notare la presenza della parola chiave "flutter" e il percorso completo che mostra la cartella "bin" nella directory "flutter".

Per verificare se il comando "flutter" può essere eseguito da qualsiasi percorso, utilizzare il comando seguente:

$ che svolazzano

Dovresti ottenere un output come questo:

/home/nit/Download/flutter/bin/flutter

Nota che il linguaggio "Dart", necessario per scrivere app Flutter, viene fornito in bundle con i file Flutter scaricati dal repository git o dal pacchetto snap. Eseguire il comando seguente per verificare le dipendenze mancanti necessarie per eseguire Flutter:

$ flutter dottore

Alcuni file richiesti potrebbero iniziare a essere scaricati per completare l'installazione di Flutter. Se non hai ancora installato Android SDK, verrà mostrato un messaggio nell'output per guidarti attraverso l'installazione.

Se desideri sviluppare app Android utilizzando Flutter, fai clic sui collegamenti visibili nell'output del terminale e segui i passaggi pertinenti per installare Android SDK.

Questo tutorial si concentra sulla creazione di applicazioni web utilizzando Flutter. Per abilitare il supporto per la creazione di app web, esegui in successione i seguenti comandi:

$ flutter canale beta
$ flutter upgrade
$ flutter config --enable-web

Per verificare che il supporto dell'applicazione Web sia stato effettivamente abilitato, eseguire il comando seguente:

dispositivi $ flutter

Dovresti ottenere un output come questo:

2 dispositivi collegati:
Web Server (web) • web-server • web-javascript • Flutter Tools
Chrome (web)     • chrome     • web-javascript • Google Chrome 87.0.4280.66

Se finora hai seguito correttamente i passaggi, Flutter dovrebbe essere installato correttamente sul tuo sistema, pronto per creare alcune app web.

Crea un nuovo progetto Flutter

Per creare un nuovo progetto di applicazione web "HelloWorld" utilizzando Flutter, esegui i comandi indicati di seguito:

$ flutter crea ciaomondo
$ cd ciaomondo

Per testare il progetto appena creato, esegui il comando:

$ flutter run -d chrome

Dovresti vedere una demo dell'applicazione web Flutter come questa:

Puoi eseguire il debug delle app Web Flutter utilizzando gli strumenti di sviluppo integrati in Chrome.

Modifica il tuo progetto

Il progetto demo che hai creato sopra contiene un "main.dart" che si trova nella cartella "lib". Codice contenuto in questo “main.dart" è commentato molto bene e può essere compreso abbastanza facilmente. Ti suggerirei di leggere il codice almeno una volta per comprendere la struttura di base di un'app Flutter.

Flutter supporta la "ricarica a caldo", che ti consente di aggiornare rapidamente la tua app senza riavviarla per vedere le modifiche. Prova a cambiare il titolo dell'applicazione da "Flutter Demo Home Page" a "Hello World !!" nel principale.dardo" file. Una volta fatto, premi digita il terminale per aggiornare lo stato dell'app senza riavviarlo.

Crea la tua app Flutter

Per creare la tua app web Flutter, usa il comando specificato di seguito dalla directory del tuo progetto:

$ flutter costruisci web

Una volta terminato il processo di compilazione, dovresti avere una nuova cartella nella directory del tuo progetto situata nel percorso "build/web". Qui troverai tutto il necessario”.html", ".js" e ".css" necessari per servire il progetto online. Troverai anche vari file di risorse utilizzati nel progetto.

Risorse utili

Per saperne di più sullo sviluppo di app Web utilizzando Flutter, fare riferimento alla sua documentazione ufficiale. Puoi fare riferimento alla documentazione ufficiale per il linguaggio Dart per ottenere una migliore comprensione delle app Flutter. Flutter include tonnellate di pacchetti ufficiali e di terze parti che puoi utilizzare per sviluppare rapidamente app. Puoi trovare questi pacchetti disponibili qui. Puoi utilizzare i widget Flutter di material design nelle tue app web. Puoi trovare la documentazione per questi widget nella documentazione ufficiale di Flutter. Puoi anche avere un'idea di questi widget sfogliando le demo funzionanti dei componenti web di material design.

Conclusione

Flutter è in fase di sviluppo da un po' di tempo ormai e sta crescendo come framework per lo sviluppo di app multipiattaforma "scrivi una volta e distribuisci ovunque". La sua adozione e popolarità potrebbero non essere così elevate come altri framework di questo tipo, ma fornisce un'API stabile e robusta per sviluppare applicazioni multipiattaforma.

Come utilizzare Xdotool per stimolare i clic del mouse e le sequenze di tasti in Linux
Xdotool è uno strumento da riga di comando gratuito e open source per simulare i clic del mouse e le sequenze di tasti. Questo articolo tratterà una b...
I 5 migliori mouse per computer ergonomici per Linux
L'uso prolungato del computer provoca dolore al polso o alle dita?? Soffri di rigidità articolare e devi continuamente stringerti la mano? Senti un do...
Come modificare le impostazioni del mouse e del touchpad utilizzando Xinput in Linux
La maggior parte delle distribuzioni Linux viene fornita con la libreria "libinput" per impostazione predefinita per gestire gli eventi di input su un...