Eigene Funktionen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 6 von 34.

Wenn zwei Schaltflächen dasselbe tun, kannst du den Code einmal schreiben und ihm einen Namen geben. Das ist eine Funktion:

void sayHello() {
  print('Hello!');
}

sayHello ist ihr Name, der Code innerhalb der geschweiften Klammern beschreibt, was sie tut, und void bedeutet, dass sie nichts zurückgibt. Schreibe sie für sich allein, außerhalb von class MyApp, zum Beispiel direkt unter main.

Um sie auszuführen, schreibe ihren Namen mit Klammern: sayHello();. Um sie einer Schaltfläche zu übergeben, schreibe den Namen ohne Klammern:

ElevatedButton(onPressed: sayHello, child: Text('Hi'))

Ohne Klammern übergibst du der Schaltfläche die Funktion selbst, und die Schaltfläche führt sie bei jedem Tippen aus. Mit Klammern, also onPressed: sayHello(), würde Dart sie sofort ausführen und der Schaltfläche ihr Ergebnis übergeben, also nichts. Deshalb wird der Code nicht kompiliert.

Aufgabe

Einfach

Beide Schaltflächen sollten Hello! ausgeben. Schreibe eine Funktion sayHello, die Hello! ausgibt, und weise sie der Schaltfläche Say hello sowie der schwebenden Schaltfläche mit der winkenden Hand zu.

Probier es selbst

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Hello!');
            },
            child: Text('Say hello'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.waving_hand),
        ),
      ),
    );
  }
}