Cookies, lecker Cookies :-)
Auch diese Seite analysiert, u.a. durch Cookies, deine Nutzung zwecks Reichweitenmessung sowie Optimierung und Personalisierung von Inhalten und Werbung. Eingebundene Dritte führen diese Informationen ggf. mit weiteren Daten zusammen. Details hierzu findest du in der Datenschutzerklärung. Du kannst deine Einstellungen jederzeit unter Cookie-Einstellungen unten auf der Seite ändern. Indem du auf der Seite weitersurfst, stimmst du – jederzeit für die Zukunft widerruflich – dieser Datenverarbeitung durch den Seitenbetreiber und Dritte zu. Weitere Informationen: Impressum
Nur notwendige Cookies akzeptieren
Ja, ich bin einverstanden!
Details

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 & Social

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.

Marc Hoffmann
Digital Marketing Experte
🔍
SUCHE
Abbrechen
Premium

Flutter Tutorial Deutsch


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.

Dein Flutter Basiscode

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

AppBar Titel
Hallo Coder

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.

Passwort benötigt?

Hier bekommst Du von mir die wirklich heißen Tipps und Passworte für die geschützten Premium-Artikel und Online-Tools. (Bild anklicken!)hintergrundwissen

Zum Seitenanfang