Flutter Provider Issue - Changes are not reflecting - flutter

Question

Can anyone please let me know why this code is not working? I have one data model file, One file for page where i have a search text and listview to display the names and main file. If i enter something on the search bar, names should be filtered. Please check the code and let me know what i have done wrong.
import 'package:flutter/widgets.dart';
import 'package:flutter/cupertino.dart';
import './class.dart';`enter code here`
class NameList with ChangeNotifier {
List<NameDetails> names = [
NameDetails('2', 'Mahesh'),
NameDetails('1', 'Ganesh'),
NameDetails('3', 'Suresh'),
NameDetails('4', 'Girish'),
];
List<NameDetails> get getNames {
return names;
}
void filterNames(String fil) {
List<NameDetails> names1;
names1 = names.where((n) => n.name.contains(fil));
names=names1;
notifyListeners();
}
}
import 'package:flutter/material.dart';
import 'package:practice/class.dart';
import 'package:provider/provider.dart';
import './data.dart';
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
NameList namesList;
String filterValue;
#override
Widget build(BuildContext context) {
final namesList = Provider.of<NameList>(context);
List<NameDetails> names = namesList.names;
return Scaffold(
appBar: AppBar(
title: TextField(
onChanged: (text) {
namesList.filterNames(text);
},
),
),
body: Column(
children: <Widget>[
Container(
height: 200,
child: Container(
height: 200,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Card(
child: Text('${names[index].name}'),
);
},
itemCount: names.length,
),
),
),
],
));
}
}
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './mainScreen.dart';
import './data.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => NameList(),
child: MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainScreen(),
));
}
}

Answer 1

You can copy paste run full code below
Step 1: You can put filter function in getNames and use List<NameDetails> names = namesList.getNames;
Step 2: filterNames function only update _searchString and do notifyListeners()
code snippet
class NameList with ChangeNotifier {
List<NameDetails> names = ...
String _searchString = "";
UnmodifiableListView<NameDetails> get getNames => _searchString.isEmpty
? UnmodifiableListView(names)
: UnmodifiableListView(
names.where((n) => n.name.contains(_searchString)));
void filterNames(String fil) {
_searchString = fil;
print(_searchString);
notifyListeners();
}
}
...
Widget build(BuildContext context) {
final namesList = Provider.of<NameList>(context);
List<NameDetails> names = namesList.getNames;
working demo
full code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:collection';
class NameDetails {
String id;
String name;
NameDetails(this.id, this.name);
}
class NameList with ChangeNotifier {
List<NameDetails> names = [
NameDetails('2', 'Mahesh'),
NameDetails('1', 'Ganesh'),
NameDetails('3', 'Suresh'),
NameDetails('4', 'Girish'),
];
String _searchString = "";
UnmodifiableListView<NameDetails> get getNames => _searchString.isEmpty
? UnmodifiableListView(names)
: UnmodifiableListView(
names.where((n) => n.name.contains(_searchString)));
void filterNames(String fil) {
_searchString = fil;
print(_searchString);
notifyListeners();
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => NameList(),
child: MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainScreen(),
));
}
}
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
NameList namesList;
String filterValue;
#override
Widget build(BuildContext context) {
final namesList = Provider.of<NameList>(context);
List<NameDetails> names = namesList.getNames;
return Scaffold(
appBar: AppBar(
title: TextField(
onChanged: (text) {
namesList.filterNames(text);
},
),
),
body: Column(
children: <Widget>[
Container(
height: 200,
child: Container(
height: 200,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Card(
child: Text('${names[index].name}'),
);
},
itemCount: names.length,
),
),
),
],
));
}
}