Im trying to add a search function to my notes app but my gridview doesnt seem to work. I have revised my code different times for the Gridview but same result. NoteReaderScreen(noteData: note.data()) is always red. any help is accepted thanks

home_screen.dart:

import 'package:BetterNotes/screens/note_editor.dart';
import 'package:BetterNotes/screens/note_reader.dart';
import 'package:BetterNotes/screens/settings.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../style/app_style.dart';

class HomeScreen extends StatefulWidget {
  final Color backgroundColor;
  const HomeScreen({Key? key, required this.backgroundColor}) : super(key: key);

  @override
  _HomeScreenState createState() =>
      _HomeScreenState(backgroundColor: AppStyle.mainColor);
}

class _HomeScreenState extends State<HomeScreen> {
  final Color backgroundColor;
  final TextEditingController _searchController = TextEditingController();

  _HomeScreenState({required this.backgroundColor});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppStyle.mainColor,
      appBar: AppBar(
        elevation: 0,
        title: const Text('Better Notes'),
        centerTitle: true,
        backgroundColor: AppStyle.mainColor,
        actions: [
          IconButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => SettingsScreen()));
              },
              icon: const Icon(Icons.settings))
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  "Your recent Notes",
                  style: GoogleFonts.roboto(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 22),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: TextField(
                    controller: _searchController,
                    style: const TextStyle(color: Colors.white),
                    decoration: InputDecoration(
                      prefixIcon: const Icon(
                        Icons.search,
                        color: Colors.white,
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(
              height: 20,
            ),
            Expanded(
              child: StreamBuilder<QuerySnapshot>(
                // Set the stream to either all documents from the 'notes' collection,
                // or a filtered subset of the documents based on the user's search query.
                stream: _searchController.text.isEmpty
                    ? FirebaseFirestore.instance.collection('notes').snapshots()
                    : FirebaseFirestore.instance
                        .collection('notes')
                        .where('note_title', isEqualTo: _searchController.text)
                        .snapshots(),
                builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    // Show a loading indicator while the stream is waiting for data.
                    return const Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                  if (snapshot.hasData) {
                    // Get the list of documents from the snapshot.
                    final List<DocumentSnapshot> notes = snapshot.data!.docs;
                    // Filter the list of documents based on the search query.
                    final List<DocumentSnapshot> matchingNotes = notes
                        .where((note) => note['note_title']
                            .toString()
                            .toLowerCase()
                            .contains(_searchController.text.toLowerCase()))
                        .toList();
                    // Map the list of documents to a list of NotesCard widgets.
                    // Pass the data from each document to the NotesCard widgets as arguments.
                    return GridView.count(
                      crossAxisCount: 2,
                      children: matchingNotes
                          .map((note) => NotesCard(
                                noteData: note.data(),
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) => NoteReaderScreen(
                                        noteData: note.data(),
                                      ),
                                    ),
                                  );
                                },
                              ))
                          .toList(),
                    );
                  }
                  return const Center(
                    child: Text("No notes found"),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const NoteEditorScreen()));
        },
        label: const Text("Add"),
        icon: const Icon(
          Icons.add,
          color: Colors.white,
        ),
        backgroundColor: Colors.purple,
      ),
    );
  }
}

Tried changing it different times but same result

CodePudding user response：

You are not setting state when textfield change. You can change that widget with this.

     Expanded(
                      child: TextField(
    onChanged: (value){setState(() {});},
controller: _searchController,
                        style: const TextStyle(color: Colors.white),
                        decoration: InputDecoration(
                          prefixIcon: const Icon(
                            Icons.search,
                            color: Colors.white,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),