Discussion :

[cedman77]

Bonjour à tous,

Je me forme sur flutter, et dans le cadre d'un projet personnel, j'ai créé une classe qui contient des IconButtons permettant de naviguer entre différentes pages. Mon bloquant est le suivant, j'aimerai distinguer l'icône qui a été cliqué avec une autre couleur par exemple. Mais après de multiples essais et recherches, je ne comprends pas pourquoi le code ne fonctionne pas, alors que sur les tutoriels consultés c'est fonctionnel. Si quelqu'un a une piste serait super, mon code est le suivant:

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
62
63
64
65
66
67
68
69
70
71
72
 
import 'package:flutter/material.dart';
import '../pages/exercices_page.dart';
import '../pages/home_page.dart';
 
class IconNavigationBar extends StatefulWidget {
 
  const IconNavigationBar({super.key,});
 
  @override
  State<StatefulWidget> createState() => IconNavigationBarState();
}
 
class IconNavigationBarState extends State<IconNavigationBar>{
  bool iconStyle1 = false;
  bool iconStyle2 = false;
  bool iconStyle3 = false;
 
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () {
                setState(() {
                  iconStyle1 = !iconStyle1;
                });
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => const HomePage()));
              },
              icon: Icon(
                Icons.home,
                color: iconStyle1 ? Colors.indigo : Colors.black,
                size: 30,
              ),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  iconStyle2 = !iconStyle2;
                });
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => ExercisePage()));
              },
              icon: Icon(
                Icons.list,
                color: iconStyle2 ? Colors.indigo : Colors.black,
                size: 30,
              ),
            ),
            IconButton(
              onPressed: () {
                setState(() {
                  iconStyle3 = !iconStyle3;
                });
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => const HomePage()));
              },
              icon: Icon(
                Icons.assessment,
                color: iconStyle3 ? Colors.indigo : Colors.black,
                size: 30,
              ),
            )
          ],
        ),
      ],
    );
  }
 
}

C'est utilisé par exemple dans ma HomePage() comme ceci:

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
 
import 'package:app_haltero/widgets/my_app_bar.dart';
import 'package:flutter/material.dart';
import '../constants.dart';
import '../widgets/icon_navigation_bar.dart';
 
class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });
 
  @override
  HomePageState createState() => HomePageState();
}
 
class HomePageState extends State<HomePage>{
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(title: "Mon application haltero"),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            IconNavigationBar(),
            Image.asset("assets/images/logoHome.jpg"),
            const Padding(
              padding: EdgeInsets.all(20),
              child: Text("Lorem ipsum dolor sit amet, consectetur "
                  "adipiscing elit, sed do eiusmod tempor incididunt "
                  "ut labore et dolore magna aliqua. Ut enim ad minim "
                  "veniam, quis nostrud exercitation ullamco laboris "
                  "nisi ut aliquip ex ea commodo consequat. Duis aute "
                  "irure dolor in reprehenderit in voluptate velit esse "
                  "cillum dolore eu fugiat nulla pariatur. Excepteur "
                  "sint occaecat cupidatat non proident, sunt in culpa "
                  "qui officia deserunt mollit anim id est laborum",
                style: TextStyle(
                    fontSize: 20
                ),
                textAlign: TextAlign.justify,
              ),
            ),
          ],
        ),
      ),
    );
  }
 
}

[Marceldev]

Vas voir la chaîne de graven sur youtube ça peut aider