Bearbeiten von „Flutter-Widgets“

= Links =
* [[Flutter]]

= Häufige Widgets =
== Column / Row ==
Ein Container, in dem die Unterelemente senkrecht (Column) oder waagrecht (Row) angeordnet werden.
Die Unterelemente bestimmen 
<pre>
List<Widget> = [
  Col( 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(),
        ),
      ),
      ]),
  ]),
];
</pre>

=== Platzverteilung ===
Normalerweise bestimmen die Unterelemente (<code>children</code>) 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 <code>flex</code> von Expanded kann das Verhältnis eingestellt werden.

= Card =
<pre>
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!'),
  ),
);
</pre>

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

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

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 <code>null</code>.
* Außerdem hat das Formularfeld einen Parameter <code>onSave</code>, 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 <code>formKey.currentKey.store()</code> aufgerufen.
* Dies löst bei allen Textfeldern den Aufruf der Parameterfunktion <code>onSave</code> auf.

<pre>
final form = Form(
  key: controller.formKey,
  child: Column(
    children: [
      TextFormField(
        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();
    }
}
</pre>

= Rückgabe der GetView.build() Methode =

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

= Grundgerüst einer GUI-App =
<pre>
void main() {
  globalLogger = GetxLogger();
  ApplicationData.createDummy();
  runApp(
    GetMaterialApp(
      title: "MyApp",
      initialRoute: AppPages.initialRoute,
      getPages: AppPages.routes,
    ),
  );
}
</pre>