How to implement provider, specifically ChangeNotifierProvider implementation in my Note app

Question

I am learning provider and wanted to implement that in my simple note app. I went through the docs, saw youtube videos and Medium articles about provider implementation, I understood the concept(I think) but I am still a little confused on how to implement it in my project. I am stuck in this for the past 1 week, any references/suggestions will be very much helpful to me.

This is my main.dart code

import 'package:flutter/material.dart';
import 'package:note_taking_app/ui/main_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

This is where I am displaying the created notes

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:note_taking_app/constants/buttons_and_icons_misc(classes).dart';
import 'package:note_taking_app/constants/text_and_decorations(methods).dart';
import 'package:note_taking_app/db/model_notes.dart';
import 'package:note_taking_app/ui/adding_notes.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  List<Note> noteList = [];

  @override
  void initState() {
    super.initState();
    dbHelper.initDatabase();
    setNotesFromDB();
  }

  setNotesFromDB() async {
    print("Entered setNotes in main page");
    var fetchedNotes = await dbHelper.getNotesFromDB();
    setState(() {
      noteList = fetchedNotes;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: mainScreenAppBar,
      floatingActionButton: FAB(
        whatToDo: () {
          gotoAddingNotesPage(context);
        },
      ),
      body: SafeArea(
        child: ListView.builder(
          itemCount: noteList.length,
          itemBuilder: (context, index) {
            return TileCard(
              titleText: ('${noteList[index].title}'),
              dateText: ('${noteList[index].date}'),
              whatToDoOnPressed: (){
                openUserClickedNote();
                debugPrint('${noteList[index].id}');
              },
            );
          },
        ),
      ),
    );
  }
  gotoAddingNotesPage(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AddingNotes()),
    ).then((value) => setState(() {
          setNotesFromDB();
        }));
  }
  openUserClickedNote() async {
    var getNoteByID = await dbHelper.queryRows('$noteList[index].id');
  }
}

This is AddingNote class, I have added ChangeNotifier and notifyListeners here

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:note_taking_app/constants/buttons_and_icons_misc(classes).dart';
import 'package:note_taking_app/db/db_operations.dart';
import 'package:note_taking_app/db/model_notes.dart';

final bodyController = TextEditingController();
final headerController = TextEditingController();
final dbHelper = DatabaseHelper.instance;
String formattedDate = DateFormat.yMMMd('en_US').format(DateTime.now());

class AddingNotes extends StatefulWidget {
  @override
  _AddingNotesState createState() => _AddingNotesState();
}

class _AddingNotesState extends State<AddingNotes> with ChangeNotifier {
  @override
  void initState() {
    super.initState();
    bodyController.clear();
    headerController.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backwardsCompatibility: true,
        leading: LeadingIcon(
          callBack: () {
            Navigator.pop(context);
          },
        ),
        backgroundColor: Colors.white.withOpacity(0.4),
        actions: <Widget>[
          ActionsIconButton(
            icon: Icon(save, color: black),
            callBack: () async {
              String title = headerController.text;
              String body = bodyController.text;
              Note note = Note(20, title, body, formattedDate);

              var value = await dbHelper.insert(note);
              print("if 1 is return then insert success and 0 then not inserted : $value");
              notifyListeners();

              Navigator.pop(context);
            },
          )
        ],
      ),
      body: Container(
        color: Colors.white.withOpacity(0.4),
        child: Padding(
          padding: const EdgeInsets.all(13.0),
          child: Column(
            children: [
              HeaderBody(
                textEditingController: headerController,
              ),
              SizedBox(
                height: 32.0,
              ),
              Expanded(
                child: NotesBody(
                  textEditingController: bodyController,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is the Notes model class

import 'db_operations.dart';

class Note {
  int id;
  String title;
  String body;
  String date;

  Note(this.id, this.title, this.body, this.date);

  Note.fromMap(Map<String, dynamic> map) {
    id = map['id'];
    title = map['title'];
    body = map['body'];
    date = map['date'];
  }

  Map<String, dynamic> toMap() {
    return {
      DatabaseHelper.columnId: id,
      DatabaseHelper.columnTitle: title,
      DatabaseHelper.columnBody: body,
      DatabaseHelper.columnDate: date,
    };
  }

  @override
  String toString() {
    return '$title, $date';
  }
}

Have you looked into flutter_bloc? flutter_bloc having concise documents. Give it a try before you decide. — EngineSense, Sep 24 '21 at 07:06

score 0 · Answer 1 · answered Sep 24 '21 at 07:22

Example For Provider :

class NotesProvider extends ChangeNotifier {
  List<NotesData> _notesList = [];

  UnmodifiableListView<NotesData> get notes {
    return UnmodifiableListView(_notesList);
  }

  int get notesCount {
    return _notesList.length;
  }

  void addNotes({ResNotesModel data}) {
    _notesList.addAll(data.data);
    notifyListeners();
  }

  void updatePinNote({int id, int isPinned}) {
    _notesList[_notesList.indexWhere((element) => element.id == id)].isPinned =
        isPinned;
    notifyListeners();
  }

}

To access properties of provider you need to wrap material app using multiprovider.

return MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (context) => NotesProvider()),   
  ],
  child: MaterialApp(
    home: MainScreen(),
    debugShowCheckedModeBanner: false,
  ),
);

Then you can use in other screens using consumer

Consumer<NotesProvider>(
        builder: (context, notesData, child) => Text("data")
)

How to implement provider, specifically ChangeNotifierProvider implementation in my Note app

1 Answers1