Home > OS >  how to search from list of Json data in flutter
how to search from list of Json data in flutter

Time:11-04

Hi all I am new to flutter. I have a json data stored in local storage . I am able to retrieve json data to mmaData. I am trying to create a filter(search) but searching data is not showing. kindly help me in this. I tried all way possible as per my knowledge by referring some website

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:io';
// import './datawid.dart';
import './mmamodel.dart';

class ShowData extends StatefulWidget {
  static const routeName = '/showData';
  @override
  State<ShowData> createState() => _ShowDataState();
}

class _ShowDataState extends State<ShowData> {
  List<mmamodel> mmaData = <mmamodel>[];
  List<mmamodel> searchedData = <mmamodel>[];
  TextEditingController controller = new TextEditingController();

  Future _loadfile() async {
    final prefs = await SharedPreferences.getInstance();
    final path = prefs.getString('path');
    // final response = await rootBundle.loadString(path);
    File file = File(path!);
    final contents = await file.readAsString();
    var list = json.decode(contents) as List<dynamic>;
    mmaData = list.map((e) => mmamodel.fromJson(e)).toList();
    // mmaData = mma;
    return mmaData;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MMALIST'),
      ),
      body: Column(
        children: [
          _searchBar(),
          FutureBuilder(
              future: _loadfile(),
              builder: (context, AsyncSnapshot snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                } else {
                  // mmaData = snapshot.data;
                  return Expanded(
                      child: searchedData.isEmpty
                          ? ListView.builder(
                              itemCount: mmaData.length,
                              itemBuilder: (context, index) {
                                if (mmaData.length > 0) {
                                  return Text(
                                      mmaData[index].product.toString());
                                } else {
                                  return const Center(
                                    child: CircularProgressIndicator(),
                                  );
                                }
                              },
                            )
                          : ListView.builder(
                              itemCount: searchedData.length,
                              itemBuilder: (context, index) {
                                return Text(
                                    searchedData[index].product.toString());
                              },
                            ));
                }
              }),
        ],
      ),
    );
  }

  _searchBar() {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: TextFormField(
          controller: controller,
          decoration: const InputDecoration(hintText: 'Search by product'),
          onChanged: onSearchTextChanged
          // (searchtext) {
          //   searchtext = searchtext.toLowerCase();
          // setState(() {
          //   mmaData = mmaData.where((u) {
          //     var prod = u.product!.toLowerCase();
          //     return prod.contains(searchtext);
          //   }).toList();
          // });
          // },
          ),
    );
  }

  onSearchTextChanged(String text) async {
    // if (text.isEmpty) {
    //   setState(() {
    //     //
    //   });
    //   return;
    // }
    mmaData.forEach((userDetail) {
      if (userDetail.product!.contains(text)) {
        searchedData.add(userDetail);
      }
    });
  }
}

I am trying to create searching data from a list of json data

CodePudding user response:

replace your onSearchTextChanged function with below

onSearchTextChanged(String text) async {
        searchedData.clear();
        searchedData.addAll(mmaData.map((userDetail) => userDetail.product.contains(text)).toList());
      }

this onSearchTextChanged function add data that contains textfrom mmaData.

  • Related