Marc Hoffmann
Digital Marketing Experte
Notwendige Cookies
Diese Cookies sind immer aktiviert, da sie für Grundfunktionen der Website erforderlich sind. Hierzu zählen Cookies, mit denen gespeichert werden kann, wo auf der Seite du dich bewegst – während eines Besuchs oder, falls du es möchtest, auch von einem Besuch zum nächsten. Sie tragen sie zur sicheren und vorschriftsmäßigen Nutzung der Seite bei.Marketing-Cookies werden verwendet, um Besuchern auf Webseiten zu folgen. Die Absicht ist, Anzeigen zu zeigen, die relevant und ansprechend für den einzelnen Benutzer sind und daher wertvoller für Publisher und werbetreibende Drittparteien sind.
In diesem Tutorial zeige ich Dir, wie Du mit Flutter eine eigene App erstellst. Du lernst zahlreiche Widgets kennen und ich erkläre Dir, wie Du sie einsetzt, um Deine App sowohl mit hilfreichen Funktionen als auch mit einer besonderen Optik zu versehen.
Damit Du es so einfach wie möglich hast, schreibe ich Dir zu jedem Widget auch den passenden Code dazu.
So kannst Du ihn kopieren, in Deiner App an den passenden Stellen einfügen und siehst blitzschnell Ergebnisse.
Als Entwicklungsumgebung nutze ich Visual Studio Code und gebe Dir auch praktische Short-Codes mit auf den Weg.
Damit wir jetzt durchstarten können, erstellen wir uns einen einfachen Screen namens ScreenOne im Material-Design, den wir im Anschluss zum Testen der Widgets nutzen.
ScreenOne
Der Screen besteht aus den folgenden Widgets:
Kopiere den folgenden Code, füge ihn in eine leere „main.dart“-Datei ein und klicke auf Debug, um Dir das Ergebnis anzusehen.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App Titel',
home: ScreenOne(),
);
}
}
class ScreenOne extends StatefulWidget {
@override
_ScreenOneState createState() => _ScreenOneState();
}
class _ScreenOneState extends State<ScreenOne> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AppBar Titel'),
),
body: Center(
child: Text('Hallo Coder'),
),
);
}
}
Tipp: Zum automatischen Formatieren des Codes kannst Du die Tastenkombination [Alt]+[Shift]+[F] nutzen.
