Блог

Я успешно создал stream builder в Flutter, и поток данных идеален. Теперь мне нужно добавить опцию поиска в Stream Builder для поиска конкретного продукта по названию продукта.

На самом деле, я создал панель поиска в разделе тела, но у меня нет ни малейшей идеи написать логику для реализации опции поиска. Было бы здорово, если бы кто-нибудь помог мне создать опцию поиска.

Вот код:

 class DashboardPage extends StatefulWidget {
  @override
  _DashboardPageState createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {

final _firestore = FirebaseFirestore.instance;

  void _logOut()  {
    final _auth = FirebaseAuth.instance;
    _auth.signOut().then((value){
      Navigator.pushReplacementNamed(context, '/login');
    });
  }


  Widget _searchBar(){
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: TextField(
        decoration: InputDecoration(
          hintText: "Search...",
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dashboard"),
        centerTitle: true,
        actions: [
          IconButton(icon: Icon(Icons.logout), onPressed: (){
            _logOut();
          },)
        ],
      ),
      
      body: Container(
        child: Center(
          child: SingleChildScrollView(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
              children:[
                _searchBar(),
                StreamBuilder<QuerySnapshot>(
                  stream: _firestore.collection("products").snapshots(),
                  builder: (context, snapshot){
                     if (!snapshot.hasData){
                       return Center(
                         child: CircularProgressIndicator(
                           backgroundColor: Theme.of(context).accentColor,
                         ),
                       );
                     }
                     final products = snapshot.data.docs;
                     List<ProductFeed> productFeeds = [];

                     for(var product in products){
                       final productName = product.data()['Product Name'];
                       final productCategory = product.data()['Product Category'];
                       final productDescription = product.data()['Product Description'];
                       final productFeed = ProductFeed(
                         productName: productName,
                         productCategory: productCategory,
                         productDescription: productDescription,
                       );
                      productFeeds.add(productFeed);

                     }
                     return Column(children: productFeeds);


                  })

              ],
            ),
          ),
        ),
      ),
    );
  }
}


class ProductFeed extends StatelessWidget {
  ProductFeed({this.productName, this.productCategory, this.productDescription});
  final String productName;
  final String productCategory;
  final String productDescription;


  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFFfae8df),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        child: GestureDetector(
          child: Card(
                      child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  color: Theme.of(context).accentColor,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 10.0, left: 10.0),
                    child: Text(
                      '$productName',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w800,
                          color: Colors.white),
                    ),
                  ),
                ),
                Container(
                  color: Theme.of(context).accentColor,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 5.0, left: 10.0, bottom: 10.0),                  
                    child: Text(
                      'Category: $productCategory',
                      style: TextStyle(
                          fontSize: 15,
                          fontWeight: FontWeight.w500,
                          color: Colors.white),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 10.0, left: 10.0),
                  child: Text(
                    '$productDescription',
                    style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w500,
                        color: Colors.grey.shade800),
                  ),
                ),
                
                SizedBox(
                  height: 20.0,
                ),
              ],
            ),
          ),
          onTap: (){
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SingleProductFeedPage(
                        productName: productName,
                       productCategory: productCategory,
                       productDescription: productDescription,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}