I am trying to change the selected category after the user taps. Appreciate any solution the would help and/or improve my code. If you have any questions or clarification please let me know.
Category Provider:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
class Category with ChangeNotifier {
  final String id;
  final String title;
  final bool isActive;
  Category({
    @required this.id,
    @required this.title,
    @required this.isActive,
  });
}
class Categories with ChangeNotifier {
  List<Category> _items = [
    Category(
      id: 'c1',
      title: 'Standard',
      isActive: true,
    ),
    Category(
      id: 'c2',
      title: 'French Lesson',
      isActive: false,
    ),
    Category(
      id: 'c3',
      title: 'Spanish Lesson',
      isActive: false,
    ),
  ];
  List<Category> get items {
    return [..._items];
  }
}
Note Screen: As of now the default is the first category. But how should I change the default if the user selected different category in category screen?
...
class NoteWriteScreen extends StatefulWidget {
  static
  const routeName = '/note-write';
  @override
  _NoteWriteScreenState createState() => _NoteWriteScreenState();
}
class _NoteWriteScreenState extends State <NoteWriteScreen> {
  Category selectedCategory;
  final _answerFocusNode = FocusNode();
  final _form = GlobalKey < FormState > ();
  var _editedNote = NoteItem(
    id: null,
    category: null,
    question: '',
    answer: '',
  );
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final categoriesData = Provider.of<Categories>(context, listen: false);
      final categoriesDataItems = categoriesData.items;
      setState(() {
        selectedCategory = categoriesDataItems.first;
      });
    });
    super.initState();
  }
  void selectCat(BuildContext context) {
    Navigator.of(context).pushNamed(
      CategoriesScreen.routeName,
      arguments: selectedCategory
    );
  }
  @override
  Widget build(BuildContext context) {
    final categoriesData = Provider.of<Categories>(context);
    final categories = categoriesData.items.first;
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text("New Note"),
          actions: < Widget > [
            IconButton(
              icon: const Icon(
                Icons.check), onPressed: () {
                // _saveNote();
                // ...
              },
            ),
          ],
      ),
...
Category Screen:
code
...
class CategoriesScreen extends StatefulWidget {
    static
    const routeName = '/categories';
    @override
    _CategoriesScreenState createState() => _CategoriesScreenState();
}
class _CategoriesScreenState extends State < CategoriesScreen > {
    toggleCategory(String catId) {
        print(catId);
        // print(catId);
    }
    @override
    Widget build(BuildContext context) {
        final categoriesData = Provider.of < Categories > (context);
        final categories = categoriesData.items.toList();
        final routeArgs = ModalRoute.of(context).settings.arguments as Category;
        // String categoryID = routeArgs.id;
        return Scaffold(appBar: AppBar(title: Text('Category'), ), body: ListView.builder(itemCount: categories.length, itemBuilder: (ctx, i) => CategoryItem(categories[i].id, categories[i].title, routeArgs.id == categories[i].id ? true : false, toggleCategory), ), );
    }
}
Category Item Screen: This is where on tap of user happens as will as the layout of a category.
...
class CategoryItem extends StatelessWidget {
  final String id;
  final String title;
  final bool isSelected;
  final Function toggleCategory;
  CategoryItem(this.id, this.title, this.isSelected, this.toggleCategory);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      // onTap: toggleCategory(id),
      onTap: () => (id),
      child: Card(
        margin: EdgeInsets.all(10),
        child: Container(
          decoration: isSelected ? BoxDecoration(
            color: Color(0xffffffff),
            border: Border.all(
              color: Color(0xff201b3b),
              width: 2,
            ),
          ) : null ,
          
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(title),
              )
            ],
          ),
        ),
      ),
    );
  }
}
For now I'm still trying to learn on local data but in the future I might integrate this in firebase... Appreciate any help on this. Thank you!
User contributions licensed under CC BY-SA 3.0