Come configurare il flutter e creare applicazione Web Hello World in Linux

Flutter è un framework di sviluppo dell'applicazione che può essere utilizzato per sviluppare app multipiattaforma in esecuzione su codice nativo una volta compilato o costruito. Essendo sviluppato da Google, Flutter ti consente di creare prototipi rapidi in breve tempo e consente di creare app a pieno titolo che utilizzino API specifiche della piattaforma. Utilizzando Flutter, è possibile creare belle app dall'aspetto per dispositivi mobili, sistemi operativi desktop e browser Web utilizzando widget di progettazione di materiali ufficiali. Questo articolo discuterà l'installazione di Flutter e la creazione di un nuovo progetto per lo sviluppo di un'applicazione Web. Flutter usa "Dart" come linguaggio di programmazione principale per la scrittura di app.

Installa il flutter su Linux

È possibile installare Flutter in Linux usando due metodi. Il primo metodo è piuttosto semplice, tutto ciò che devi fare è eseguire un semplice comando per installare il flutter da 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 manualmente il flutter:

$ sudo APT Installa git
$ git clone https: // github.com/flutter/flutter.git -b stabile-profonde 1 --no-single-branch

Si noti che l'esecuzione del comando sopra riceverà i file richiesti dal repository Flutter ufficiale 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 del percorso ampio del sistema e non sarai in grado di eseguirli da nessuna parte a meno che non li aggiunga manualmente alla variabile del percorso. Per fare ciò, segui i passaggi seguenti.

Aprire ".File Bashrc "situato nella cartella di casa utilizzando il tuo editor di testo preferito:

$ nano "$ home/.Bashrc "

Aggiungi la riga seguente nella parte inferiore del file, sostituendo attentamente la stringa.

Export Path = "$ Path:/flutter/cestino "

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

Export Path = "$ Path: $ home/downloads/flutter/bin"

Salva il file una volta terminato. Ricaricare ".File Bashrc ”eseguendo il comando di seguito:

$ fonte “$ home/.Bashrc "

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

$ echo $ percorso

Dovresti ottenere un output come questo:

/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/cesta nit/download/flutter/cestino

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 fluttua

Dovresti ottenere un output come questo:

/home/nit/downloads/flutter/bin/flutter

Si noti che la lingua "Dart", necessaria per scrivere app flutter, viene fornita in bundle con file flutter scaricati dal repository Git o dal pacchetto snap. Esegui il comando seguente per verificare le dipendenze mancanti necessarie per eseguire il flutter:

$ Flutter Doctor

Alcuni file richiesti possono iniziare a scaricare per completare la configurazione di flutter. Se non hai ancora installato Android SDK, un messaggio verrà visualizzato nell'output per guidarti attraverso l'installazione.

Se si desidera sviluppare app Android utilizzando Flutter, fare clic sui collegamenti visibili nell'output del terminale e seguire 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, eseguire i seguenti comandi in successione:

$ beta beta del canale flutter
$ Flutter Upgrade
$ flutter config --Nable-Web

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

$ flutter dispositivi

Dovresti ottenere un output come questo:

2 dispositivi collegati:
Web Server (Web) • Web-Server • Web-JavaScript • Strumenti Flutter
Chrome (Web) • Chrome • Web-JavaScript • Google Chrome 87.0.4280.66

Se hai seguito correttamente i passaggi finora, il flutter dovrebbe essere ora installato correttamente sul tuo sistema, pronto a creare alcune app Web.

Crea un nuovo progetto Flutter

Per creare un nuovo progetto di applicazione Web "Helloworld" utilizzando Flutter, eseguire i comandi di seguito:

$ flutter crea helloworld
$ CD Helloworld

Per testare il tuo progetto appena creato, eseguire il comando:

$ flutter run -d chrome

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

È possibile eseguire il debug di app Web flutter utilizzando strumenti di sviluppo integrati in Chrome.

Modifica il tuo progetto

Il progetto demo che hai creato sopra contiene un "principale.File Dart "situato nella cartella" Lib ". Codice contenuto in questo "principale.Il file dart ”è commentato molto bene e può essere compreso abbastanza facilmente. Ti suggerirei di passare attraverso il codice almeno una volta per comprendere la struttura di base di un'app Flutter.

Flutter supporta "Hot Reload", permettendoti di aggiornare rapidamente la tua app senza rilanciarla per vedere le modifiche. Prova a cambiare il titolo dell'applicazione da "Flutter Demo Home Page" a "Hello World !!" nel principale.File Dart ". Una volta fatto, premere il tasto nel terminale per aggiornare lo stato dell'app senza rilanciare.

Costruisci la tua app Flutter

Per creare l'app Web Flutter, utilizzare il comando specificato di seguito dalla directory del progetto:

$ Flutter Build Web

Una volta terminato il processo di build, dovresti avere una nuova cartella nella directory del progetto situata sul percorso "build/web". Qui troverai tutto ciò che è necessario ".html ",".js "e".File CSS ”richiesti per servire il progetto online. Troverai anche vari file di risorse utilizzati nel progetto.

Risorse utili

Per saperne di più sullo sviluppo delle app web utilizzando Flutter, consultare la sua documentazione ufficiale. Puoi fare riferimento alla documentazione ufficiale per Dart Language per comprendere meglio le app Flutter. Flutter viene fornito con tonnellate di pacchetti ufficiali e di terze parti che è possibile utilizzare per sviluppare rapidamente le app. Puoi trovare questi pacchetti disponibili qui. Puoi utilizzare i widget flutter di progettazione del materiale nelle tue app web. Puoi trovare la documentazione per questi widget nella documentazione ufficiale di Flutter. Puoi anche avere una sensazione di questi widget navigando demo di lavoro dei componenti Web di progettazione di materiali.

Conclusione

Flutter è in fase di sviluppo da un po 'di tempo e sta crescendo come un framework per lo sviluppo di app "Scrivi una volta distribuite ovunque". La sua adozione e popolarità potrebbe non essere alta come altri tali framework, ma fornisce un'API stabile e robusta per sviluppare applicazioni multipiattaforma.