tech
Defaultdeesfrzh

Flutter

Google UI-Toolkit fuer Cross-Platform Apps - eine Codebasis, Hot Reload, native Performance

TL;DR

Was: Googles UI-Toolkit zum Erstellen nativ kompilierter Anwendungen.

Warum: Eine Codebasis für iOS/Android/Web/Desktop, Hot Reload, schöne UIs, tolle Performance.

Quick Start

Installation: Folgen Sie flutter.dev/docs/get-started/install

Verifizieren:

flutter doctor

Neue App erstellen:

flutter create my_app
cd my_app
flutter run

Cheatsheet

BefehlBeschreibung
flutter create nameNeues Projekt erstellen
flutter runAuf Gerät/Emulator ausführen
flutter build apkAndroid APK bauen
flutter build iosiOS App bauen
flutter pub getDependencies holen
flutter pub add pkgPaket hinzufügen
flutter testTests ausführen

Gotchas

Basic widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Meine App')),
        body: const Center(child: Text('Hallo, Flutter!')),
      ),
    );
  }
}

Stateful widget

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Zähler: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Erhöhen'),
        ),
      ],
    );
  }
}

Common widgets

// Layout
Column(children: [...])
Row(children: [...])
Container(padding: ..., child: ...)
ListView.builder(itemBuilder: ...)

// Eingabe
TextField(controller: ..., onChanged: ...)
ElevatedButton(onPressed: ..., child: ...)

// Anzeige
Text('Hallo')
Image.network('url')
Icon(Icons.star)
// Push
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));

// Pop
Navigator.pop(context);

// Benannte Routen
Navigator.pushNamed(context, '/details');

Next Steps