Providers in flutter

Question

I am building a note app with details of title and description whereby my input comes from a textfield from an alertDialog popup. Unfortunately, the screen is blank.

This is my UserNotes

class UserNotes{
  String? title;
  String? descriptioin;


  UserNotes({required this.title,required this.descriptioin});

}

This is my provider

import 'package:notes_update/models/UserMethods.dart';
import 'package:notes_update/models/UserNotes.dart';
import 'package:flutter/foundation.dart';
import 'package:provider/provider.dart';
class ProviderData extends ChangeNotifier{
  List<UserNotes>_users=[];

  List<UserNotes> get newusers=>_users;

  IncomingData(){
    _users=GettingNotes().addDetails();
    notifyListeners();
  }
}

This class returns a list of userNotes

import 'UserNotes.dart';

class GettingNotes{
String? newtitle;
String? description;
List<UserNotes> addDetails(){
  List<UserNotes>details=[];
  if(details.isEmpty){
    details.add(UserNotes(title:newtitle!,descriptioin:description! ));
  }

  return details;
}}

This is my UI

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:notes_update/models/UserMethods.dart';
import 'package:notes_update/models/UserNotes.dart';
import 'package:provider/provider.dart';

import '../Provider/Provder.dart';

class Notes extends StatefulWidget {
  createState() => _Notes();
}

class _Notes extends State<Notes> {
  var title;
  var description;
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Consumer<ProviderData>(builder:
              (BuildContext context, ProviderData value, Widget? child) {
            return ListView.builder(
                itemCount: value.newusers.length,
                itemBuilder: ((context, index) {
                  return ListTile(
                    title: Text(value.newusers[index].title!),
                    leading: Text(value.newusers[index].descriptioin!),
                  );
                }));
          }),
          Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              FloatingActionButton(
                backgroundColor: Colors.black54,
                child: Center(
                    child: Icon(
                  Icons.add,
                  size: 40,
                )),
                onPressed: () => showDialog(
                    context: context,
                    builder: (BuildContext context) => AlertDialog(
                            title: Text('NOTES INFO'),
                            content: Column(
                              children: [
                                TextFormField(
                                  decoration: InputDecoration(
                                      hintText: 'Enter notes title',
                                      border: OutlineInputBorder()),
                                  onChanged: (value) {
                                    setState(() {
                                      description = value;
                                    });
                                  },
                                ),
                                SizedBox(height:50),
                                TextFormField(
                                  decoration: InputDecoration(
                                      hintText: 'Enter notes description',
                                      border: OutlineInputBorder()),
                                  onChanged: (value) {
                                    setState(() {
                                      description = value;
                                    });
                                  },
                                ),
                              ],
                            ),
                            actions: <Widget>[
                              TextButton(
                                onPressed: () {
                                  setState(() {
                                    GettingNotes().newtitle = title;
                                    GettingNotes().description = description;
                                  });
                                  Navigator.pop(context);
                                },
                                child: Text('Save Data'),
                              ),
                              TextButton(
                                  onPressed: () {}, child: Text('Cancel'))
                            ])),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

If there is any code mistake, let me know.

I passed on the value of my TextForm using setState to change the current value of my title and description and I expected a list based on my title and description.

score 1 · Answer 1 · answered Mar 06 '23 at 21:24

Two mistakes:

In both the TextFormField you are setting description value and title value is never set.
In onPressed you are creating new instance of UserNotes class instead of GettingNotes class, and adding it to the list of notes in ProviderData class.

And create a addNote function, where in you add the note to the list.

Updated Provider Code:

  void addNote({
    required String title,
    required String description,
  }) {
    _users.add(UserNotes(title: title, descriptioin: description));
    notifyListeners();
  }
}

Updated UI code:

                onPressed: () => showDialog(
                  context: context,
                  builder: (BuildContext context) => AlertDialog(
                    title: Text('NOTES INFO'),
                    content: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        TextFormField(
                          decoration: InputDecoration(
                            hintText: 'Enter notes title',
                            border: OutlineInputBorder(),
                          ),
                          onChanged: (value) {
                            setState(() {
                              title = value; //  set title here
                            });
                          },
                        ),
                        SizedBox(height: 20),
                        TextFormField(
                          decoration: InputDecoration(
                            hintText: 'Enter notes description',
                            border: OutlineInputBorder(),
                          ),
                          onChanged: (value) {
                            setState(() {
                              description = value;
                            });
                          },
                        ),
                      ],
                    ),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () {
                          if (title != null && description != null) {
                            Provider.of<ProviderData>(context, listen: false) // call it this way
                                .newusers
                                .add(UserNotes(
                                  title: title,
                                  description: description,
                                ));  //       
                            Navigator.pop(context);
                          }
                        },
                        child: Text('Save Data'),
                      ),
                      TextButton(
                        onPressed: () => Navigator.pop(context),
                        child: Text('Cancel'),
                      ),
                    ],

Thank you very much.But please i would like you to kindly clarify my thought if the value in my onchanged parameter is the current state of what the user will type in the textfTield?Thank you — Emmanuel Armoo, Mar 06 '23 at 21:49
Yes in the onchanged, you get the current state i.e latest updated value which the user has typed. — krishnaacharyaa, Mar 06 '23 at 21:52
Thanks for the clarification.But please if the value represent the current state of the input which has been assigned to the title why should i set title again? — Emmanuel Armoo, Mar 06 '23 at 22:01
because it is there just in the parameter of `onChanged` if you want it to be used elsewhere you need to assign to some variable, so you are assigning — krishnaacharyaa, Mar 06 '23 at 22:03
Thanks.So please do you mean i.e String title='Church Service' before the onchanged? — Emmanuel Armoo, Mar 06 '23 at 22:25

Providers in flutter

1 Answers1