Flutter 101

Projektentwicklung mit Flutter

Wer bin ich?

• Name: Dominik Schumann
• Job: Software Engineer
• Arbeitgeber: Maibornwolff
• Abschluss: Bachelor of Science @ HWR

Wichtige Links

Flutter Documentation	Our Repo

Kontakt

e_schumannd@doz.hwr-berlin.de

Introduction

Warum Flutter?

• Cross Platform
• echte native Apps
• Schnelles Prototyping
• Ein-Komponent Architektur

Platformen

Mittlerweile auf folgenden Platformen verfügbar:

• Android
• iOS
• Web
• Windows Apps
• Linux
• macOS

Einige Facts zu Flutter

• Wird mit Dart entwickelt, Googles eigene Sprache
• Ist eine native Anwendung, profitiert von nativem Code
• innerhalb von Sekunden ist neuer Code in laufender Anwendung integriert

Entwicklung mit Flutter

Widgets

• Die Komponente in Flutter
• alles besteht aus Widgets

class Test extends StatelessWidget{
    final bool changeable;
    
    Test({
        required this.changeable,
    });

    @override
    Widget build(BuildContext context) {
        return changeable? Text('a') : Text('b');
    }
}

Das gilt genauso auch für Stateful Widgets

class Test extends StatelessWidget{
    bool changeable = true;
    ...

    return ElevatedButton(
        onPressed: () => changeable = !changeable,
        child: changeable ? Text('a') : Text('b'),
        // Text Content will always stay a
    );
}

class Test extends StatefulWidget {
    @override
    State<Test> createState() => _TestState();
}

class _TestState extends StatelessWidget{
    bool _changeable = true;
    ...

    return ElevatedButton(
        onPressed: () => 
            setState(() => _changeable = !_changeable),
        child: _changeable ? Text('a') : Text('b'),
        // Text Content will change on press
    );
}

Unser Repo

https://tinyurl.com/it2020-fv

1. Aufgabe

Baut einen weiteren Button ein, der die Anzahl auf dem Screen verkleinert. Baut den Text in eigenes unter Widget.

Widgets Catalog: https://docs.flutter.dev/development/ui/widgets

Helpful Widgets: Row, Elevated Button

Problem:

Wir haben nun ein Widget in der Mitte das sich um die Verarbeitung der Daten kümmert.

Lösung:

Eine Bibliothek die sich für uns um das State Management kümmert

State Management mit Bloc

Streams

• stellen unendliche Datenströme dar
• ein listen informiert über neuen Input

Was ist Bloc?

• Bloc nutzt Streams für zwei Zwecke:
  • Input von Events (Trigger)
  • Output von States (View)
• Ein Bloc ist die Verarbeitungs Einheit zwischen State und Event

Was brauchen wir für Bloc?

• Event Klassen
• State Klassen
• Bloc
• Interface in der UI

Event Klasse

abstract class CounterEvent extends Equatable {
  const CounterEvent();

  @override
  List<Object> get props => [];
} 

class CounterIncrement extends CounterEvent {}

State Klasse

abstract class CounterState extends Equatable {
  final int count;
  const CounterState({required this.count});

  @override
  List<Object> get props => [count];
}

class CounterInitial extends CounterState {
  const CounterInitial() : super(count: 0);
}

class CounterChanged extends CounterState {
  const CounterChanged({required super.count});
}

Bloc

part 'counter_event.dart';
part 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterInitial()) {
    on<CounterIncrement>((event, emit) => 
        emit(CounterChanged(count: state.count + 1)));
  }
}

Interface UI und Bloc

Coding

Was ist der BuildContext?

• enthält Informationen über bisher gebaute Widgets
• enthält Informationen über den Screen/Device

Widget build(BuildContext context) {
  return BlocProvider(
    create: (context) => Bloc(),
    child:  ElevatedButton(
        onPressed: () => BlocProvider.of<Bloc>(context).add(A()),
        // ERROR: Bloc not Provided in context
        child: const Text('Increment'),
    ), // ElevatedButton
  ) // BlocProvider
}

Wie kann man das umgehen?

Widget build(BuildContext context) {
  return BlocProvider(
    create: (context) => Bloc(),
    child:  Builder(
      builder: (buttonContext) {
        return ElevatedButton(
            onPressed: () => BlocProvider.of<Bloc>(buttonContext).add(A()),
            child: const Text('Increment'),
        ); // ElevatedButton
      }
    ),// Builder
  )// BlocProvider
}

Interface UI und Bloc

Coding

3. Aufgabe

Baut einen Drawer in eure Applikation lasst in diesem einen Namen anzeigen, der auf der Seite verändert werden kann.

Helpful Widgets: Drawer, DrawerHeader, TextField