Flutter-Widgets: Unterschied zwischen den Versionen

Aus Info-Theke
Zur Navigation springen Zur Suche springen
Zeile 8: Zeile 8:
<pre>
<pre>
List<Widget> = [
List<Widget> = [
   Col( children = [
   Col(  
    Row( children: [
    crossAxisAlignment: CrossAxisAlignment.start,
      Expanded(
    children = [
        child: const Text('Be surprised!'),
      Row( children: [
      ),
        Expanded(
      const SizedBox(width: 16),
          child: const Text('Be surprised!'),
      ElevatedButton(
        ),
        child: Text('Click it'),
        const SizedBox(width: 16),
        onPressed: () => sayHello(),
        ElevatedButton(
      ),
          child: Text('Click it'),
      ]),
          onPressed: () => sayHello(),
    const SizedBox(height: 16),
        ),
    Row( children: [
        ]),
      const Expanded (flex: 7,  
      const SizedBox(height: 16),
        child: Text('You need help?'),
      Row( children: [
        const Expanded (flex: 7,  
          child: Text('You need help?'),
       ),
       ),
      const SizedBox(height: padding),
        const SizedBox(height: padding),
      const Expanded (flex: 2,
        const Expanded (flex: 2,
        child: ElevatedButton(
          child: ElevatedButton(
          child: Text('Help me'),
            child: Text('Help me'),
          onPressed: () => help(),
            onPressed: () => help(),
          ),  
         ),
         ),
      ),
       ]),
       ]),
  ]),
    ]),
];
];
</pre>
</pre>

Version vom 25. September 2022, 08:22 Uhr

Links

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(
        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();
    }
}

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,
    ),
  );
}