Boutons textuels et à contour

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

Flutter propose trois boutons qui fonctionnent de la même manière, avec onPressed: et child:. Ils diffèrent par leur apparence plus ou moins marquée :

ElevatedButton : rempli de couleur. Utilise-le pour l’action principale, comme Enregistrer.
OutlinedButton : une bordure et aucun remplissage. Un deuxième choix, comme Aperçu.
TextButton : uniquement le texte. Le plus discret, pour des actions comme Annuler.

OutlinedButton(onPressed: () {}, child: Text('Preview'))
TextButton(onPressed: () {}, child: Text('Cancel'))

Un écran avec un bouton bien visible et d’autres plus discrets autour indique aux utilisateurs sur quoi appuyer en premier. Pour changer le type d’un bouton, change uniquement son nom.

Défi

Facile

Les trois boutons sont des ElevatedButton. Gardez Save tel quel, faites de Preview un OutlinedButton et de Cancel un TextButton.

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: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Save')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Preview')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Cancel')),
            ],
          ),
        ),
      ),
    );
  }
}