Links

Flutter

Häufige Widgets

Column / Row

Ein Container, in dem die Unterelemente senkrecht (Column) oder waagrecht (Row) angeordnet werden. Die Unterelemente bestimmen

List<Widget> = [
  Col( 
    crossAxisAlignment: CrossAxisAlignment.start,
    children = [
      Row( children: [
        Expanded(
          child: const Text('Be surprised!'),
        ),
        const SizedBox(width: 16),
        ElevatedButton(
          child: Text('Click it'),
          onPressed: () => sayHello(),
        ),
        ]),
      const SizedBox(height: 16),
      Row( children: [
        const Expanded (flex: 7, 
          child: Text('You need help?'),
      ),
        const SizedBox(height: padding),
        const Expanded (flex: 2,
          child: ElevatedButton(
            child: Text('Help me'),
            onPressed: () => help(),
          ), 
        ),
      ]),
    ]),
];

Platzverteilung

Normalerweise bestimmen die Unterelemente (children) die Dimensionen, sie werden einfach untereinander / hintereinander positioniert.

Will man eine automatische Anpassung, werden die "dynamischen" Elemente jeweils in ein Expanded-Element eingebettet. In diesem Fall wird der Restplatz an alle dynamischen Elemente gleichmäßig verteilt. Mit dem Parameter flex von Expanded kann das Verhältnis eingestellt werden.

Card

final widget = Card(
  margin: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
  child: Padding(
    padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
    child: Text('Wow!'),
  ),
);

Formular

Jedes Formular benötigt einen Key, der normalerweise im Controller erzeugt/gespeichert wird:

key = GlobalKey<FormState>(debugLabel: 'MyForm');

Ein Formular bietet die Möglichkeit der Eingabeprüfung (Validierung).

Dazu wird für jedes Formularfeld eine (eventuell anonyme) Funktion angegeben, die im Fehlerfall einen Fehlertext zurückgibt, sonst null.
Außerdem hat das Formularfeld einen Parameter onSave, der eine Funktion entgegennimmt, die das Speichern des Wertes übernimmt.
Die Validierung wird normalerweise beim Anklicken eines Buttons angestoßen: Alle Textfelder werden validiert.
Ist die Validierung erfolgreich, wird formKey.currentKey.store() aufgerufen.
Dies löst bei allen Textfeldern den Aufruf der Parameterfunktion onSave auf.

final form = Form(
  key: controller.formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'Data'),
        validator: checkInt,
        onSaved: (input) => controller.controllerData = input,
        controller: ,
      ),
  ]),
);
String? checkInt(String input) int.parseInt(input) == null ? 'Not an integer' : null;

void store(controller, String input){
    if (controller, formKey.currentState?.validate() ?? false) {
      controller.formKey.currentState?.save();
    }
}

DropDownButton (Combobox)

final items1 = [
  DropdownMenuItem(child: Image.asset('img/undefined.png'), value: ''),
  DropdownMenuItem(child: Text('Active'), value: 'A'),
  DropdownMenuItem(child: Text('Inactive'), value: 'I'),
];
final button1 = DropdownButton<String>(
  value: '',
  items: items1,
  onChanged: (value) {
    controller.active = value
  },
);
final item2 = List<int>generate(5, (i) => i+1).map((no) => DropdownMenuItem(child: Text('Element $no'), value: no));
final button2 = DropdownButton<int>(
  value: 0,
  items: items2,
  onChanged: (value) {
    controller.no = value
  },
);

Rückgabe der GetView.build() Methode

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: controller.applicationData.appBarBuilder('Demo'),
        drawer: controller.applicationData.drawerBuilder(context),
        body: Text('Hello world!'),
  }

Grundgerüst einer GUI-App

void main() {
  globalLogger = GetxLogger();
  ApplicationData.createDummy();
  runApp(
    GetMaterialApp(
      title: "MyApp",
      initialRoute: AppPages.initialRoute,
      getPages: AppPages.routes,
    ),
  );
}

Flutter-Widgets

Inhaltsverzeichnis