Search code examples
flutterdartsetstatefloating-action-button

Flutter / Dart - Problem with SetState called from a Floating Action Button


I am having trouble with calling SetState when pressing a FAB. Nothing changes on the screen...

Here's the code :

    bool _editMode = false;

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.orange[100],
        appBar: AppBar(
          backgroundColor: Colors.white,
          automaticallyImplyLeading: false,
          title: Center(
            child: Text(
              'Liste de vocabulaire n°${userData.selectedCarnetList + 1}'
                  .toUpperCase(),
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.blue[800],
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
          ),
          actions: [
            GestureDetector(
              child: Container(
                padding: EdgeInsets.all(16.0),
                child: listsProvider.dicoLanguage == Language.french
                    ? Image.asset(
                        'icons/french_flag.png',
                        height: 45.0,
                        width: 45.0,
                      )
                    : Image.asset(
                        'icons/english_flag.png',
                        height: 45.0,
                        width: 45.0,
                      ),
              ),
              onTap: () => listsProvider.dicoLanguage == Language.french
                  ? listsProvider.setDicoLanguage(Language.english)
                  : listsProvider.setDicoLanguage(Language.french),
            ),
          ],
          bottom: TabBar(
              indicatorWeight: 10,
              indicatorColor: Colors.green[800],
              tabs: [
                Tab(
                  child: Text(
                    'Ordre alphabétique',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red[800]),
                  ),
                ),
                Tab(
                  child: Text(
                    'Catégorie grammaticale',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red[800]),
                  ),
                ),
                Tab(
                  child: Text(
                    'Niveau',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red[800]),
                  ),
                ),
              ]),
        ),
        body: TabBarView(
          children: [
             ListView(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: CarnetListCard(
                          index: index,
                          taille:
                              userData.userInfo.carnetVoc[index].wordId.length,
                          titre: userData.userInfo
                              .carnetVoc[userData.selectedCarnetList].titre
                              .toUpperCase(),
                          dateCreation:
                              userData.userInfo.carnetVoc[index].creation,
                          dateModification:
                              userData.userInfo.carnetVoc[index].modification,
                          mots: ListView.builder(
                            itemCount: userData
                                .userInfo.carnetVoc[index].wordId.length,
                            itemBuilder: (context, index2) {
                              return ListTile(
                                contentPadding: EdgeInsets.all(0),
                                title: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.red[800],
                                    borderRadius: BorderRadius.circular(10.0),
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.all(12.0),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceAround,
                                      children: [
                                        Expanded(
                                          child: Text(
                                            listsProvider.dicoLanguage ==
                                                    Language.english
                                                ? wordBank[userData
                                                        .userInfo
                                                        .carnetVoc[index]
                                                        .wordId[index2]]
                                                    .main
                                                : wordBank[userData
                                                        .userInfo
                                                        .carnetVoc[index]
                                                        .wordId[index2]]
                                                    .mainFr,
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 13.0,
                                            ),
                                          ),
                                        ),
                                        Expanded(
                                          child: Text(
                                            listsProvider.dicoLanguage ==
                                                    Language.english
                                                ? wordBank[userData
                                                        .userInfo
                                                        .carnetVoc[index]
                                                        .wordId[index2]]
                                                    .mainFr
                                                : wordBank[userData
                                                        .userInfo
                                                        .carnetVoc[index]
                                                        .wordId[index2]]
                                                    .main,
                                            style: TextStyle(
                                                color: Colors.orange[100],
                                                fontSize: 13.0),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                onTap: () => Navigator.push(context,
                                    MaterialPageRoute(builder: (context) {
                                  return DisplayThematicList(
                                    subTheme: listsProvider
                                        .themeBank[index].subTheme[index2],
                                    langue: listsProvider.dicoLanguage,
                                    image: listsProvider.themeBank[index].thema,
                                  );
                                })),
                              );
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
            ListView(),
            ListView(),
          ],
        ),
        floatingActionButton: _editMode == false
            ? Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
                    child: FloatingActionButton(
                      heroTag: 'Back',
                      backgroundColor: Colors.red[800],
                      child: Icon(Icons.arrow_back),
                      onPressed: () => Navigator.pushReplacementNamed(
                          context, CarnetScreen.id),
                    ),
                  ),
                  FloatingActionButton.extended(
                      heroTag: 'Edit',
                      backgroundColor: Colors.blue[800],
                      icon: Icon(Icons.edit),
                      label: Text('Modifier'),
                      onPressed: () {
                        setState(() {
                          _editMode = true;
                          print(_editMode);
                        });
                      })
                ],
              )
            : Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
                    child: FloatingActionButton(
                      heroTag: 'Close',
                      backgroundColor: Colors.red[800],
                      child: Icon(Icons.close),
                      onPressed: () => Navigator.pushReplacementNamed(
                          context, CarnetScreen.id),
                    ),
                  ),
                  FloatingActionButton.extended(
                      heroTag: 'Valider',
                      backgroundColor: Colors.green[800],
                      icon: Icon(Icons.library_add_check_rounded),
                      label: Text('Valider'),
                      onPressed: () {
                        setState(() {
                          _editMode = false;
                          print(_editMode);
                        });
                      }),
                ],
              ),
      ),
    );
  }
}

When tapping FAB ('EDIT'), I set (_editMode) to TRUE, and it should rebuild with new buttons showing... but for some reason nothing happens...

Is there anything in a FAB which separates the action from the State of the Screen ? or could it be due to the TAB BAR ?

Any idea why ?


Solution

  • Put your variable bool _editMode = false; above build method

    bool _editMode = false;
    
      @override
      Widget build(BuildContext context) {