Блог

я новичок в flutter, у меня есть локальный файл json, как показано ниже, мне удалось отобразить его в моем пользовательском интерфейсе, а также отобразить панель фильтра / поиска, но теперь я пытаюсь создать функцию filter listview. Я попробовал несколько вещей, но у меня ничего не вышло. Как мне сравнить пользовательский ввод с данными в моем файле JSON? Мне было интересно, как заставить функцию поиска работать по «имени»?

 {
    "name": "Telekinesis",
    "description": "Rubick uses his telekinetic powers to lift the enemy into the air briefly and then hurls them back at the ground.",
    "logo_url": "http://static.wikia.nocookie.net/dota2_gamepedia/images/0/0e/Telekinesis_icon.png"
  },
  

 void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Header'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = new TextEditingController();

  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text(widget.title)),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                decoration: InputDecoration(
                    hintText: "Search Title",
                    border: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Theme.of(context).primaryColor))),
              ),
            ),
            Expanded(
              child: FutureBuilder(
                future: DefaultAssetBundle.of(context)
                    .loadString('components/abilities-list.json'),
                builder: (context, snapshot) {
                  var myData = jsonDecode(snapshot.data.toString());
                  return ListView.builder(
                    itemBuilder: (BuildContext context, index) {
                      return ListTile(
                          leading: CircleAvatar(
                              backgroundImage:
                                  NetworkImage(myData[index]['logo_url'])),
                          title: Text('Name: '   myData[index]['name']),
                          subtitle: Text(
                            'Description: '   myData[index]['description'],
                          ));
                    },
                    itemCount: myData == null ? 0 : myData.length,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
  

com/users/14288499/muhammad-medani создает класс данных, подобный

 class JSONData {
  String name;
  String description;
  String logoUrl;

  JSONData({this.name, this.description, this.logoUrl});

  JSONData.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    description = json['description'];
    logoUrl = json['logo_url'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['description'] = this.description;
    data['logo_url'] = this.logoUrl;
    return data;
  }
}
  

когда вы получите данные из будущего конструктора, передайте этот снимок.данные в метод FromJSON, чтобы вы получили его объекты, а затем также могли выполнять поиск.
создайте List<JSONData> data= []; подобный этому, а затем вы сможете получить к нему доступ в listview builder и выполнить поиск также следующим образом

 data.forEach((userDetail) {
      if (data.name.contains(text) || data.name.contains(text))
        _searchResult.add(userDetail);
    });