how can I search inside listView using flutter-CodePudding

import 'package:flutter/material.dart';
import '../app_data.dart';
import '../widgets/TopicItem.dart';

class TitleTopic extends StatefulWidget {

@override
State<TitleTopic> createState() => _TitleTopicState();
}

class _TitleTopicState extends State {

@override Widget build(BuildContext context) { return Scaffold(

   appBar: AppBar(
    backgroundColor: Color(0Xfff5d4037),
     automaticallyImplyLeading: false,
     title: Text('Learn English', style: TextStyle(color: Color(0xffffffff) , fontSize: 18 , fontFamily: 'Tajawal' , fontWeight: FontWeight.bold),),
   ),
 
    body: Container(
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/bg.png'),
            fit: BoxFit.cover
          )
        ),

      child: Column(
        
        children: [
          Container(
            color: Colors.white24,
            child: TextField ( 
              onChanged: (value) => search(),
              onSubmitted: print, 
              decoration: InputDecoration(  
                border: InputBorder.none,  
                hintText: 'search here ..'  ,
              ), 
              style: TextStyle(color: Colors.white , fontFamily: 'Tajawal'),
              textDirection: TextDirection.rtl, 
            ),
          ),

          Expanded(               
             child: ListView(
                  padding: EdgeInsets.all(8),
                  children:
                  Categories_data.map((categoryData) => TopicItems(id: categoryData.id, 
                   title:  categoryData.title,)
                ).toList(),
             )
        ],
      ),
    ),
);

} }

TopicItems it just widgte to display (title: categoryData.title ) inside card

I have data saved inside app_data.dart , I can bring it in my app using list as you show above

app_data.dart file contain :

const Categories_data = const [ Category( id: 'c1', title: 'hello world', ), Category( id: 'c2', title: 'say good morning', ), Category( id: 'c3', title: 'say good bye ', ), Category( id: 'c4', title: 'say hello', ),

I need a function search() when I type in textfield bring out the data from app_data.dart to listview

CodePudding user response：

I believe you are confusing searching for data in a List with the ListView widget. You cannot search a ListView. You can use the showSearch function to allow the user to search within your list of Strings: https://api.flutter.dev/flutter/material/showSearch.html

It is not the easiest to implement, but you should try it.

CodePudding user response：

All you have to do is on text change, simply search for the item in your Categories_data and provide it as filteredList. Kindly check below example.

class TitleTopicState extends State {
  List _filteredCategoriesData;

  @override
  Widget build(BuildContext context) {
    if(_filteredCategoriesData==null){
      _filteredCategoriesData = Categories_data;
    }
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0Xfff5d4037),
        automaticallyImplyLeading: false,
        title: Text(
          'Learn English',
          style: TextStyle(
              color: Color(0xffffffff),
              fontSize: 18,
              fontFamily: 'Tajawal',
              fontWeight: FontWeight.bold),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/bg.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          children: [
            Container(
              color: Colors.white24,
              child: TextField(
                onChanged: _onQuery,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Search here ..',
                ),
                style: TextStyle(color: Colors.white, fontFamily: 'Tajawal'),
                textDirection: TextDirection.rtl,
              ),
            ),
            Expanded(
              child: ListView(
                padding: EdgeInsets.all(8),
                children: _filteredCategoriesData.map((categoryData) => TopicItems(
                      id: categoryData.id,
                      title: categoryData.title,
                    )).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _onQuery(String keyword) async {
    if (keyword.trim().isEmpty) {
      return;
    }
    final filteredResults = Categories_data.where(
      (data) => (data.title.contains(keyowrd)),
    );
    setState(() => _filteredCategoriesData = filteredResults);
  }
}