Creazione di un'applicazione semplice in Android Studio

In questo capitolo, creiamo una semplice applicazione Flutter per comprendere le basi della creazione di un'applicazione flutter in Android Studio.

Step 1 - Apri Android Studio

Step 2- Crea progetto Flutter. Per questo, fare clic suFile → New → New Flutter Project

Step 3- Seleziona Flutter Application. Per questo, selezionaFlutter Application e fare clic Next.

Step 4 - Configurare l'applicazione come di seguito e fare clic Next.

• Nome del progetto: hello_app

• Percorso SDK Flutter: <path_to_flutter_sdk>

• Sede del progetto: <path_to_project_folder>

• Descrizione: Flutter based hello world application

Step 5 - Configura progetto.

Imposta il dominio dell'azienda come flutterapp.tutorialspoint.com e fare clic Finish.

Step 6 - Inserisci il dominio dell'azienda.

Android Studio crea un'applicazione flutter completamente funzionante con funzionalità minime. Controlliamo la struttura dell'applicazione e poi cambiamo il codice per svolgere il nostro compito.

La struttura dell'applicazione e il suo scopo sono i seguenti:

I vari componenti della struttura dell'applicazione sono spiegati qui:

• android - Codice sorgente generato automaticamente per creare applicazioni Android

• ios - Codice sorgente generato automaticamente per creare applicazioni ios

• lib - Cartella principale contenente il codice Dart scritto utilizzando il framework flutter

• ib/main.dart - Punto di ingresso dell'applicazione Flutter

• test - Cartella contenente il codice Dart per testare l'applicazione flutter

• test/widget_test.dart - Codice di esempio

• .gitignore - File di controllo della versione Git

• .metadata - generato automaticamente dagli strumenti flutter

• .packages - generato automaticamente per tracciare i pacchetti flutter

• .iml - file di progetto utilizzato da Android Studio

• pubspec.yaml - Usato da Pub, Gestore di pacchetti Flutter

• pubspec.lock - Generato automaticamente dal gestore di pacchetti Flutter, Pub

• README.md - File di descrizione del progetto scritto in formato Markdown

Step 7- Sostituisci il codice dart nel file lib / main.dart con il codice seguente -

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

Cerchiamo di capire riga per riga il codice del dardo.

• Line 1- importa il pacchetto flutter, materiale . Il materiale è un pacchetto flutter per creare un'interfaccia utente secondo le linee guida di progettazione dei materiali specificate da Android.

• Line 3- Questo è il punto di ingresso dell'applicazione Flutter. Chiama la funzione runApp e gli passa un oggetto della classe MyApp . Lo scopo della funzione runApp è allegare il widget dato allo schermo.

• Line 5-17- Widget viene utilizzato per creare l'interfaccia utente nel framework flutter. StatelessWidget è un widget, che non mantiene alcuno stato del widget. MyApp estende StatelessWidget e sovrascrive il suo metodo di compilazione . Lo scopo del metodo build è creare una parte dell'interfaccia utente dell'applicazione. Qui, il metodo build utilizza MaterialApp , un widget per creare l'interfaccia utente a livello di root dell'applicazione. Ha tre proprietà: titolo, tema e home .

  • titolo è il titolo dell'applicazione

  • il tema è il tema del widget. Qui, impostiamo il blu come colore generale dell'applicazione utilizzando la classe ThemeData e la sua proprietà, primarySwatch .

  • home è l'interfaccia utente interna dell'applicazione, che abbiamo impostato un altro widget, MyHomePage

• Line 19 - 38- MyHomePage è uguale a MyApp tranne che restituisce Scaffold Widget. Scaffold è un widget di primo livello accanto al widget MaterialApp utilizzato per creare un design del materiale conforme all'interfaccia utente. Ha due proprietà importanti, appBar per mostrare l'intestazione dell'applicazione e il corpo per mostrare il contenuto effettivo dell'applicazione. AppBar è un altro widget per eseguire il rendering dell'intestazione dell'applicazione e lo abbiamo utilizzato nella proprietà appBar . Nella proprietà body , abbiamo utilizzato il widget Center , che lo centra widget figlio. Il testo è l'ultimo e più interno widget per mostrare il testo e viene visualizzato al centro dello schermo.

Step 8 - Ora, esegui l'applicazione usando, Run → Run main.dart

Step 9 - Infine, l'output dell'applicazione è il seguente: