Votre premier bouton

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

Jusqu’à présent, tes applications ne faisaient qu’afficher des choses. Cette section leur apprend à réagir, en commençant par un bouton.

ElevatedButton(
  onPressed: () {},
  child: Text('Start'),
)

child: correspond à ce que le bouton affiche, généralement un Text. onPressed: correspond à ce qui se passe quand quelqu’un appuie dessus.

() {} est une fonction sans nom : un petit morceau de code que le bouton conserve et exécute à chaque appui. Le code se place entre les accolades. Celle-ci est vide, donc un appui ne fait encore rien, mais le bouton est prêt à être utilisé.

Avec onPressed: null, le bouton est grisé et ne peut pas être utilisé. null signifie « aucune valeur » : aucun code à exécuter.

Défi

Facile

L’application affiche le mot Start. Transforme-le en un ElevatedButton sur lequel on peut appuyer, avec Start comme enfant. Une fonction vide suffit pour onPressed.

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: Text('Start'),
        ),
      ),
    );
  }
}