How to use where in manipulating the list from a provider in flutter?

Question

Hi I'm trying to figure this out for so long and still not sure how to display items based on selected/passed category...

1. I need to display items that are under the selected category only

Category Note Screen:

I tried to print and doesn't show anything not sure how and what to use. Currently all notes are being displayed even if I have a category ID used to filter them.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/notes.dart';
import '../providers/categories.dart';
import '../widgets/category_note_item.dart';
class CategoryNotesScreen extends StatelessWidget {
  static const routeName = '/category-notes';

  @override
  Widget build(BuildContext context) {
    Category routeArgs = ModalRoute.of(context).settings.arguments;
    final catId = routeArgs.id;
    final catTitle = routeArgs.title;
    var notesData = Provider.of<Notes>(context);
    print(notesData.items.where((item) => item.category.contains(catId)));
    return Scaffold(
      appBar: AppBar(
        title: Text(catTitle),
      ),
      body: ListView.builder(
        itemCount: notesData.items.length,
        itemBuilder: (ctx, i) => CategoryNoteItem(notesData.items[i]),
      ),
    );
  }
}

Category Note Item Widget:

import 'package:flutter/material.dart';

import '../providers/notes.dart' as nte;

class CategoryNoteItem extends StatelessWidget {
  final nte.NoteItem note;
  CategoryNoteItem(this.note);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text('${note.question}'),
            subtitle: Text('${note.answer}'),
            // trailing: ,
          )
        ],
      ),
    );
  }
}

Categories Provider:

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class Category with ChangeNotifier {
  final String id;
  final String title;

  Category({
    @required this.id,
    @required this.title,
  });
}
class Categories with ChangeNotifier {
  List<Category> _items = [
    Category(
      id: 'c1',
      title: 'Default',
    ),
    Category(
      id: 'c2',
      title: 'French Lesson',
    ),
    Category(
      id: 'c3',
      title: 'Spanish Lesson',
    ),
  ];
  List<Category> get items {
    return [..._items];
  }}

Notes Provider:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class NoteItem with ChangeNotifier {
  final String id;
  final String category;
  final String question;
  final String answer;

  NoteItem({
    @required this.id,
    @required this.category,
    @required this.question,
    @required this.answer,
  });

}
class Notes with ChangeNotifier {
  List<NoteItem> _items = [
    NoteItem(
      id: 'n1',
      category: 'c1',
      question: 'q1',
      answer: 'a1',
    ),
    NoteItem(
      id: 'n2',
      category: 'c1',
      question: 'q2',
      answer: 'a2',
    ),
    NoteItem(
      id: 'n3',
      category: 'c2',
      question: 'q3',
      answer: 'a3',
    ),
    NoteItem(
      id: 'n4',
      category: 'c1',
      question: 'q4',
      answer: 'a4',
    ),
  ];
  
  List<NoteItem> get items {
    return [..._items];
  }
}

Sorry I'm very new to flutter and still learning...

Solution

After some trial and error I found out that I can use this to filter the list from the provider:

notesData.items.where((item) => item.category.contains(catId)).toList();

And added this in itembuilder:

itemBuilder: (ctx, i) =>  CategoryNoteItem(
              notes[i].id,
              notes[i].category,
              notes[i].question,
              notes[i].answer,
            ),

I'm able to display only the items on selected category.

Comments

[Mukul]

Shouldn't it be, var notesData = item.category; instead of the Provider.of<Notes>(context); Just Checking though!