Flutter General dialog box - set state not working

610

So you want to change the color of icon on clicking it inside dialogBox, but unfortunately you are using stateless widget Scaffold in return of showGeneralDialog builder so one thing that can possibly help is to make a separate StateFull Widget RatingDialogBox and use that in the builder.

Also instead of InkWell you can use IconButton

Share:
610
Laurent Thomas
Author by

Laurent Thomas

After many years without developing, I have decided to learn Dart.

Updated on December 25, 2022

Comments

  • Laurent Thomas
    Laurent Thomas over 1 year

    I have an issue with my General Dialog Box. I would like to display a star. Then I would like to change it state when the star is taped and replace the icon by a yellow Star. But is does not work. The Dialog Box is not refreshed so the icon is not changing. Please, can you look at the source code below and point me into the right direction please? Many thanks.

    
    import 'package:flutter/material.dart';
    import 'package:flutter/cupertino.dart';
    
    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:cloud_firestore/cloud_firestore.dart';
    
    import 'package:date_time_picker/date_time_picker.dart';
    
    
    
    import 'package:gtd_official_sharped_focused/snackbar.dart';
    
    String _isImportantInboxTask ;
    String _isUrgentInboxTask ;
    
    String inboxTaskDisplayed;
    
    
    String isImportant = "false" ;
    String isUrgent = "false" ;
    String myProjectName ;
    
    var taskSelectedID;
    
    //---------------
    //String _initialValue;
    
    
    //_-----------------
    
    var documentID;
    
    var textController = TextEditingController();
    var popUpTextController = TextEditingController();
    
    
    class Inbox extends StatefulWidget {
      Inbox({Key key}) : super(key: key);
      @override
      _InboxState createState() => _InboxState();
    }
    
    class _InboxState extends State<Inbox> {
      GlobalKey<FormState> _captureFormKey = GlobalKey<FormState>();
    
      bool isOn = true;
    
      
      @override
      Widget build(BuildContext context) {
        void showAddNote() {
          TextEditingController _noteField = new TextEditingController();
          showDialog(
              context: context,
              builder: (BuildContext context) {
                return CustomAlertDialog(
                  content: Container(
                    width: MediaQuery.of(context).size.width / 1.3,
                    height: MediaQuery.of(context).size.height / 4,
                    child: Column(
                      children: [
                        TextField(
                          controller: _noteField,
                          maxLines: 4,
                          decoration: InputDecoration(
                            border: const OutlineInputBorder(
                              borderSide:
                              const BorderSide(color: Colors.black, width: 1.0),
                            ),
                          ),
                        ),
                        SizedBox(height: 10),
    
                        Material(
                          elevation: 5.0,
                          borderRadius: BorderRadius.circular(25.0),
                          color: Colors.white,
                          child: MaterialButton(
                            minWidth: MediaQuery.of(context).size.width / 1.5,
                            onPressed: () {
                              Navigator.of(context).pop();
                              CollectionReference users = FirebaseFirestore.instance
                                  .collection('Users')
                                  .doc(FirebaseAuth.instance.currentUser.uid)
                                  .collection('allTasks');
                              users
                                  .add({'task_Name': _noteField.text,'task_Status': 'Inbox' })
                                  .then((value) => print("User Document Added"))
                                  .catchError((error) =>
                                  print("Failed to add user: $error"));
                            },
                            padding: EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 15.0),
                            child: Text(
                              'Add Note',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 20.0,
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              });
        }
    
        return Scaffold(
          appBar: new AppBar(
            title: new Text('Inbox Page'),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.add_circle_outline,
                  color: Colors.white,
                ),
                onPressed: () {
                  showAddNote();
                  // do something
                },
              ),
            ],
          ),
    
          drawer: MyMenu(),
          backgroundColor: Colors.white,
          body: Column(
            //mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: MediaQuery.of(context).size.height / 1.4,
                width: MediaQuery.of(context).size.width,
                child: StreamBuilder(
                    stream: FirebaseFirestore.instance
                        .collection('Users')
                        .doc(FirebaseAuth.instance.currentUser.uid)
                        .collection('allTasks')
                        .where('task_Status', isEqualTo: 'Inbox')
                        .snapshots(),
                    builder: (BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (!snapshot.hasData) {
                        return Center(
                          child: CircularProgressIndicator(),
                        );
                      }
    
                      return ListView(
                        children: snapshot.data.docs.map((document) {
                          return Wrap(
                              children: [Card(
                                child: SwipeActionCell(
                                  key: ObjectKey(document.data()['task_Name']),
                                  actions: <SwipeAction>[
                                    SwipeAction(
                                        title: "delete",
                                        onTap: (CompletionHandler handler) {
                                          CollectionReference users = FirebaseFirestore
                                              .instance
                                              .collection('Users')
                                              .doc(
                                              FirebaseAuth.instance.currentUser.uid)
                                              .collection('allTasks');
                                          users
                                              .doc(document.id)
                                              .delete()
                                              .then((value) => print("Note Deleted"))
                                              .catchError((error) => print(
                                              "Failed to delete Task: $error"));
                                        },
                                        color: Colors.red),
                                  ],
    
                                  child: Padding(
                                    padding: const EdgeInsets.all(0.0),
                                    child: ListTile(
                                      leading: ConstrainedBox(
                                        constraints: BoxConstraints(
                                          minWidth: leadingIconMinSize,
                                          minHeight: leadingIconMinSize,
                                          maxWidth: leadingIconMaxSize,
                                          maxHeight: leadingIconMaxSize,
                                        ),
                                        child: Image.asset('assets/icons/inbox.png'),
                                      ),
    
                                      title: GestureDetector(
                                        child: Text(
                                          //'task_Name' correspond au nom du champ dans la table
                                          document.data()['task_Name'],
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
    
                                        // Pour editer task
                                        onDoubleTap: (){
                                          taskSelectedID =  FirebaseFirestore
                                              .instance
                                              .collection('Users')
                                              .doc(
                                              FirebaseAuth.instance.currentUser.uid)
                                              .collection('allTasks')
                                              .doc(document.id);
    
                                          //Dialog
    
                                          return  showGeneralDialog(
                                              context: context,
                                              barrierDismissible: true,
                                              barrierLabel: MaterialLocalizations.of(context)
                                                  .modalBarrierDismissLabel,
                                              barrierColor: Colors.black45,
                                              transitionDuration: const Duration(milliseconds: 20),
                                              pageBuilder: (BuildContext buildContext,
                                                  Animation animation,
                                                  Animation secondaryAnimation) {
                                                return Scaffold(
                                                  appBar: AppBar(
                                                    title: Text ('Edit Task'),
                                                    leading: InkWell(
                                                        child: Icon(Icons.close),
                                                        onTap:(){Navigator.of(context).pop();}
                                                    ),
                                                    actions: [Padding(
                                                      padding: const EdgeInsets.fromLTRB(0, 0,16.0,0),
                                                      child: InkWell(
                                                          child: Icon(Icons.save),
                                                          onTap: () {
                                                            final loFormInbox = _captureFormKey
                                                                .currentState;
                                                            if (loFormInbox.validate()) {
                                                              loFormInbox.save();
                                                              
                                                              CollectionReference users = FirebaseFirestore
                                                                  .instance
                                                                  .collection(
                                                                  'Users')
                                                                  .doc(FirebaseAuth
                                                                  .instance
                                                                  .currentUser.uid)
                                                                  .collection(
                                                                  'allTasks');
                                                              users
                                                                  .add({
                                                                'task_Name': _valueTaskNameSaved,
    
                                                              })
                                                                  .then((value) =>
                                                                  print(
                                                                      "Task Created"))
                                                                  .catchError((
                                                                  error) =>
                                                                  print(
                                                                      "Failed to add task: $error"));
                                                              
    
                                                              showSimpleFlushbar(
                                                                  context,
                                                                  'Task Saved',
                                                                  _valueTaskNameSaved,
                                                                  Icons
                                                                      .mode_comment);
                                                              loFormInbox.reset();
                                                              isImportant = 'false';
                                                              isUrgent = 'false';
                                                            }
                                                          }
                                                      ),
                                                    )],
                                                  ),
                                                  body: Center(
                                                    child: Container(
                                                      width: MediaQuery.of(context).size.width - 10,
                                                      height: MediaQuery.of(context).size.height -  80,
                                                      padding: EdgeInsets.all(20),
                                                      color: Colors.white,
                                                      child: Column(
                                                        children: [
    
                                                          Theme(
                                                              data: ThemeData(
                                                                  inputDecorationTheme: InputDecorationTheme(
                                                                    border: InputBorder.none,
                                                                  )
                                                              ),
                                                              child: Padding(
                                                                padding: const EdgeInsets.fromLTRB(8.0, 0.0, 15.0, 1.0),
                                                                child: TextFormField(
    
                                                                  initialValue: document.data()['task_Name'],
                                                                  decoration: InputDecoration(hintText: "Task Name"),
                                                                  maxLength: 70,
                                                                  maxLines: 2,
                                                                  onChanged: (valProjectName) => setState(() => _valueTaskNameChanged = valProjectName),
                                                                  validator: (valProjectName) {
                                                                    setState(() => _valueTaskNameToValidate = valProjectName);
                                                                    return valProjectName.isEmpty? "Task name cannot be empty" : null;
                                                                  },
                                                                  onSaved: (valProjectName) => setState(() => _valueTaskNameSaved = valProjectName),
                                                                ),
                                                              )),
    
                                                          //Test Energy et Time / Important /urgent
                                                          Material(
                                                              child:
                                                              Container(
                                                                // color: Colors.red,
                                                                alignment: Alignment.center,
                                                                child: Row(
                                                                  mainAxisAlignment: MainAxisAlignment.center,
                                                                  children:[
                                                                    
                                                                    //Important
                                                                    FlatButton(
                                                                      child:
                                                                      InkWell(
                                                                        child: Container(
                                                                          //   color: Colors.white,
                                                                            child: Column(
                                                                              mainAxisAlignment: MainAxisAlignment.center,
                                                                              children: [
                                                                                isImportant =="true" ? Icon(Icons.star,color: Colors.orange,) :
                                                                                Icon(Icons.star_border, color: Colors.grey,),
                                                                                // Icon(Icons.battery_charging_full),
                                                                                Text('Important'),
                                                                              ],
                                                                            )
                                                                        ),
                                                                        onTap: () {
                                                                          setState(() {
                                                                            if (isImportant=='true'){
                                                                              isImportant = 'false';}
                                                                            else
                                                                            {isImportant= 'true';
                                                                            }
                                                                          });
                                                                        },
                                                                      ),
                                                                    ),
    
    
                                                          RaisedButton(
                                                            onPressed: () {
                                                              Navigator.of(context).pop();
                                                            },
                                                            child: Text(
                                                              "Close",
                                                              style: TextStyle(color: Colors.white),
                                                            ),
                                                            color: const Color(0xFF1BC0C5),
                                                          )
    
                                                          //++++++++++++++++
                                                        ],
                                                      ),
                                                    ),
                                                  ),
                                                );
                                              });
    
                                        },
    
                                      ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                              ]
                          );
                        }).toList(),
                      );
                    }),
              ),
            ],
          ),
          bottomNavigationBar:  MyBottomAppBar(),  //PersistentBottomNavBar(),
        );
      }
    
    
    }
    
      @override
      Widget build(BuildContext context){
        return _widget();
      }
    }
    
    
    
    

    Thanks to your solution, I am able to do what I was willing to do. But now, I have an other issue. In the version 1 of my code, I am using this code

    Theme(
                                                              data: ThemeData(
                                                                  inputDecorationTheme: InputDecorationTheme(
                                                                    border: InputBorder.none,
                                                                  )
                                                              ),
                                                              child: Padding(
                                                                padding: const EdgeInsets.fromLTRB(8.0, 0.0, 15.0, 1.0),
                                                                child: TextFormField(
    
                                                                  initialValue: document.data()['task_Name'],
                                                                  decoration: InputDecoration(hintText: "Task Name"),
                                                                  maxLength: 70,
                                                                  maxLines: 2,
                                                                  onChanged: (valProjectName) => setState(() => _valueTaskNameChanged = valProjectName),
                                                                  validator: (valProjectName) {
                                                                    setState(() => _valueTaskNameToValidate = valProjectName);
                                                                    return valProjectName.isEmpty? "Task name cannot be empty" : null;
                                                                  },
                                                                  onSaved: (valProjectName) => setState(() => _valueTaskNameSaved = valProjectName),
                                                                ),
                                                              )),
    

    This part was working well. But after the modifications, I am getting an error. The error is about document.

    Undefined name 'document'. Try correcting the name to one that is defined, or defining the name.

    Please, can you help me with this so I can finalize this page. Thank you

  • Laurent Thomas
    Laurent Thomas over 3 years
    Thank you. Unfortunately it is not what I am looking for. I would like to be able when I click on an icon to be able to change the color of the icon, all this in a Dialog Box.
  • Akshit Ostwal
    Akshit Ostwal over 3 years
    alright I think I got your problem now, let me write a separate answer for that
  • Laurent Thomas
    Laurent Thomas over 3 years
    Thank you. I will try to do it. As I am new with Flutter it might not be perfect, but I will try and come back to you then.
  • Laurent Thomas
    Laurent Thomas over 3 years
    Hello, I have tried, but it seems that my knowledge about flutter is not good enough to make it works. I have created a class but the dialog is not displayed.
  • Laurent Thomas
    Laurent Thomas over 3 years
    It works perfectly. Many thanks. in the meantime, I have now a new issue with Firebase that I am using with this view. I will come back with the question later as I want to make it as clear as possible.