Vos propres fonctions

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 6 sur 34.

Lorsque deux boutons font la même chose, tu peux écrire le code une seule fois et lui donner un nom. C’est une fonction :

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

sayHello est son nom, le code entre les accolades décrit ce qu’elle fait, et void signifie qu’elle ne renvoie rien. Écris-la seule, en dehors de class MyApp, par exemple juste après main.

Pour l’exécuter, écris son nom avec des parenthèses : sayHello();. Pour la transmettre à un bouton, écris son nom sans parenthèses :

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

Sans parenthèses, tu transmets la fonction elle-même au bouton, qui l’exécute à chaque appui. Avec des parenthèses, onPressed: sayHello(), Dart l’exécuterait immédiatement et transmettrait son résultat au bouton, c’est-à-dire rien ; le code ne compile donc pas.

Défi

Facile

Les deux boutons doivent afficher Hello!. Écris une fonction sayHello qui affiche Hello!, puis associe-la au bouton Say hello et au bouton flottant avec la main qui fait coucou.

Essayez vous-même

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