Discussion :

[Arsene12]

Bonjour,

j'ai crée ci-dessous une série de bouton de couleur verte. Je voudrais que lorsque je clique sur un bouton, celui-ci prenne la couleur rouge et que tous les autres prennent la couleur jaune. Pourriez-vous m'aider à faire cela, svp ?

Merci d'avance,
Arsène

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 
  @override
  Widget build(BuildContext context) {
    bool pressed = false;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            for (int i = 0; i < 4; i++)
              RaisedButton(
                color: Colors.green,
                textColor: Colors.black,
                child: Text("- - - -", style: TextStyle(fontSize: 30)),
                onPressed: () => {
                },
              ),
          ],
        ),
      ),
    );
  }
}

[NoSmoking]

Bonjour,
il y a sûrement plein de façons de faire, je t'en propose deux qui ne sont pas forcément des modèles de code, je ne suis pas très aguerri en Dart et de plus j'ai laissé tomber devant mon non besoin/utilité.

En tenant à jour un état pour chaque boutons :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class Boutons {
  String textOFF;
  String textON;
  bool isPressed;
 
  Boutons(this.textOFF, this.textON, this.isPressed);
}
 
class _MyHomePageState extends State<MyHomePage> {
  // définition couleurs
  var pressedBackColor = Colors.red;
  var defaultBackColor = Colors.lightGreen;
 
  List<Boutons> boutons = [
    Boutons('Bouton #1', 'Clicked #1', false),
    Boutons('Bouton #2', 'Clicked #2', false),
    Boutons('Bouton #3', 'Clicked #3', false),
    Boutons('Bouton #4', 'Clicked #4', false),
  ];
 
  void onPressed(Boutons obj) {
    // change couleur de fond par défaut
    defaultBackColor = Colors.yellow;
    setState(() {
      for (Boutons el in boutons) {
        el.isPressed = (el == obj);
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: _createButton(context, boutons),
      )),
    );
  }
 
  List<Widget> _createButton(BuildContext context, List<Boutons> boutons) {
    return boutons.map((Boutons btn) {
      var tColor = btn.isPressed ? Colors.white : Colors.black;
      var bColor = btn.isPressed ? pressedBackColor : defaultBackColor;
      var text = btn.isPressed ? btn.textON : btn.textOFF;
      return RaisedButton(
        textColor: tColor,
        color: bColor,
        child: Text(text, style: TextStyle(fontSize: 21)),
        onPressed: () => onPressed(btn),
      );
    }).toList();
  }
}

En passant par l'ID du bouton appuyé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
class Boutons {
  String text;
  String id;
 
  Boutons(this.text, this.id);
}
 
class _MyHomePageState extends State<MyHomePage> {
  static var btnPressed;
 
  void onPressed(String btnId) {
    setState(() {
      btnPressed = btnId;
    });
  }
 
  List<Boutons> boutons = [
    Boutons('Bouton #1', 'btn-1'),
    Boutons('Bouton #2', 'btn-2'),
    Boutons('Bouton #3', 'btn-3'),
    Boutons('Bouton #4', 'btn-4'),
  ];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: _createButton(context, boutons),
      )),
    );
  }
 
  List<Widget> _createButton(BuildContext context, List<Boutons> boutons) {
    return boutons.map((Boutons btn) {
      // couleur par défaut
      var defaultBackColor = Colors.yellow;
      var defaultTextColor = Colors.black;
      // au départ aucun button pressed
      if (btnPressed == null) {
        defaultBackColor = Colors.green;
      }
      // couleur du button pressed
      if (btnPressed == btn.id) {
        defaultBackColor = Colors.red;
        defaultTextColor = Colors.white;
      }
      // création button
      return RaisedButton(
        color: defaultBackColor,
        textColor: defaultTextColor,
        child: Text(btn.text, style: TextStyle(fontSize: 21)),
        onPressed: () => onPressed(btn.id),
      );
    }).toList();
  }
}

D'autres méthodes de gestion des couleurs/textes sont envisageables mais tu as déjà là une base de travail.

Je ne peux que te conseiller de regarder sur la toile, il doit bien exister de multiples exemples de mise en oeuvre de Dart.

[Arsene12]

Merci beaucoup NoSmoking.
Je vais bien étudier ces exemples.
Ces solutions me conviennent parfaitement pour l'instant.