Marc Coach Hoffmann
Facebook: Marc Hoffmann

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:

  • Stateful
  • Scaffold
  • AppBar
  • Center
  • Text

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.

PS: Um den Link zu dieser Seite weiter zu schicken, kannst Du Dir mit nur einem Klick die...
Artikel-URL kopieren
Teilen per
Facebook
WhatsApp
Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können. Unter Datenschutz erfährst Du mehr dazu.
schließen