Hi I'm trying to figure this out for so long and still not sure how to display items based on selected/passed category...
- 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...