Erstellen einer einfachen Anwendung in Android Studio

In diesem Kapitel erstellen wir eine einfache Flatteranwendung , um die Grundlagen zum Erstellen einer Flatteranwendung in Android Studio zu verstehen.

Step 1 - Öffnen Sie Android Studio

Step 2- Flatterprojekt erstellen. Klicken Sie dazu aufFile → New → New Flutter Project

Step 3- Wählen Sie Flatteranwendung. Wählen Sie dazuFlutter Application und klicken Sie auf Next.

Step 4 - Konfigurieren Sie die Anwendung wie folgt und klicken Sie auf Next.

• Projektname: hello_app

• Flatter SDK-Pfad: <path_to_flutter_sdk>

• Projektstandort: <path_to_project_folder>

• Beschreibung: Flutter based hello world application

Step 5 - Projekt konfigurieren.

Legen Sie die Unternehmensdomäne als fest flutterapp.tutorialspoint.com und klicken Sie auf Finish.

Step 6 - Geben Sie die Unternehmensdomäne ein.

Android Studio erstellt eine voll funktionsfähige Flatteranwendung mit minimaler Funktionalität. Lassen Sie uns die Struktur der Anwendung überprüfen und dann den Code ändern, um unsere Aufgabe zu erledigen.

Die Struktur der Anwendung und ihr Zweck ist wie folgt:

Hier werden verschiedene Komponenten der Struktur der Anwendung erläutert -

• android - Automatisch generierter Quellcode zum Erstellen einer Android-Anwendung

• ios - Automatisch generierter Quellcode zum Erstellen einer iOS-Anwendung

• lib - Hauptordner mit Dart-Code, der mit dem Flutter-Framework geschrieben wurde

• ib/main.dart - Einstiegspunkt der Flutter-Anwendung

• test - Ordner mit Dart-Code zum Testen der Flatteranwendung

• test/widget_test.dart - Beispielcode

• .gitignore - Git-Versionskontrolldatei

• .metadata - automatisch von den Flatterwerkzeugen erzeugt

• .packages - automatisch generiert, um die Flatterpakete zu verfolgen

• .iml - Projektdatei, die von Android Studio verwendet wird

• pubspec.yaml - Verwendet von Pub, Flutter Paketmanager

• pubspec.lock - Automatisch generiert vom Flutter-Paketmanager, Pub

• README.md - Projektbeschreibungsdatei im Markdown-Format

Step 7- Ersetzen Sie den Dartcode in der Datei lib / main.dart durch den folgenden Code. -

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',
            )
         ),
      );
   }
}

Lassen Sie uns den Dartcode Zeile für Zeile verstehen.

• Line 1- Importiert das Flatterpaket, Material . Das Material ist ein Flatterpaket zum Erstellen einer Benutzeroberfläche gemäß den von Android festgelegten Materialdesign-Richtlinien.

• Line 3- Dies ist der Einstiegspunkt der Flutter-Anwendung. Anrufe runapp Funktion und ein Objekt übergeben MeineAnw Klasse. Der Zweck der runApp- Funktion besteht darin, das angegebene Widget an den Bildschirm anzuhängen.

• Line 5-17- Widget wird verwendet, um eine Benutzeroberfläche im Flatter-Framework zu erstellen. StatelessWidget ist ein Widget, das keinen Status des Widgets beibehält. MyApp erweitert StatelessWidget und überschreibt seine Erstellungsmethode . Der Zweck der Erstellungsmethode besteht darin, einen Teil der Benutzeroberfläche der Anwendung zu erstellen. Hier build - Methode verwendet MaterialApp , ein Widget der Stammebene UI der Anwendung zu erstellen. Es hat drei Eigenschaften - Titel, Thema und Heimat .

  • Titel ist der Titel der Anwendung

  • Thema ist das Thema des Widgets. Hier setzen wir Blau als Gesamtfarbe der Anwendung mithilfe der ThemeData- Klasse und ihrer Eigenschaft primarySwatch .

  • home ist die innere Benutzeroberfläche der Anwendung, für die wir ein weiteres Widget festgelegt haben. MyHomePage

• Line 19 - 38- MyHomePage ist mit MyApp identisch , gibt jedoch das Scaffold Widget zurück. Scaffold ist ein Widget der obersten Ebene neben dem MaterialApp- Widget, mit dem ein UI-konformes Materialdesign erstellt wird. Es hat zwei wichtige Eigenschaften: appBar , um den Header der Anwendung anzuzeigen , und body, um den tatsächlichen Inhalt der Anwendung anzuzeigen . AppBar ist ein weiteres Widget zum Rendern des Headers der Anwendung, das wir in der Eigenschaft appBar verwendet haben . In der Eigenschaft body haben wir das Center- Widget verwendet, mit dem das untergeordnete Widget zentriert wird. Text ist das letzte und innerste Widget, mit dem der Text angezeigt wird. Er wird in der Mitte des Bildschirms angezeigt.

Step 8 - Führen Sie nun die Anwendung aus mit: Run → Run main.dart

Step 9 - Schließlich ist die Ausgabe der Anwendung wie folgt: