Блог

Привет, я новичок в flutter, мне нужна помощь в получении данных API и отображении с флажком для выбора и отмены выбора. я использовал образец базы данных API, которая содержит информацию о 10 пользователях. Я хочу отобразить идентификатор пользователя, имя, имя пользователя, название компании и номер телефона в виде карточки или списка для каждого пользователя. Я также хочу установить один флажок на плитку карты/списка с функцией проверки / снятия флажка.

 import 'dart:convert';  import 'package:flutter/material.dart'; import 'package:flutter_application_http_get/example.dart'; import 'package:flutter_application_http_get/screen.dart'; import 'package:flutter_application_http_get/sunday_state.dart'; import 'package:http/http.dart' as http;  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,  ),  home: Sunday(),  );  } }  

Вот мой метод получения ApI

 class Sunday extends StatefulWidget {  const Sunday({Key? key}) : super(key: key);   @override  _SundayState createState() =gt; _SundayState(); }  class _SundayState extends Statelt;Sundaygt; {  var users = [];  Future getUserData() async {  var res =  await http.get(Uri.https("jsonplaceholder.typicode.com", "users"));  var jsonData = jsonDecode(res.body) as List;   setState(() {  users = jsonData;  });  }   @override  void initState() {  super.initState();  getUserData();  }   

вот мой метод сборки

 Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: Text("User Data"),  ),  body: Container(  child: Card(  margin: EdgeInsets.all(20.0),  child: ListView.builder(  itemCount: users.length,  itemBuilder: (context, i) {  final post = users[i];   return Card(  elevation: 5,  child: Padding(  padding: const EdgeInsets.all(12.0),  child: ListView(shrinkWrap: true, children: [  // singlecheckbox(notification),  ...notification.map(singlecheckbox).toList(),  Text("${post['id']}"),  Text("${post['name']}"),    ])  

вот мой виджет для переключения флажка

 final notification = [SundayCheckBoxState()]; void togglegroupcheckbox(bool? value) {  if (value == null) return;  setState(() {  // notification.value = value;  notification.forEach((element) =gt; element.value = value);  });  }   Widget singlecheckbox(SundayCheckBoxState checkbox) {  return CheckboxListTile(  controlAffinity: ListTileControlAffinity.leading,  activeColor: Colors.green,  value: checkbox.value,  // title: Text('${users.last['name']}'),  onChanged: togglegroupcheckbox,     );  

Есть много вариантов, один из них-использовать a ListTile и добавлять a CheckBox в начало (или конец) каждой строки. Вы также должны отслеживать состояние каждого флажка, например, в вашем users списке.

Попробуйте определить свой ListView.builder так:

 ListView.builder(  itemCount: users.length,  itemBuilder: (context, i) {  final post = users[i];   return Card(  elevation: 5,  child: Padding(  padding: const EdgeInsets.all(12.0),  child: ListView(shrinkWrap: true, children: [  // singlecheckbox(notification),  //...notification.map(singlecheckbox).toList(),  ListTile(  isThreeLine: true,  leading: Checkbox(  value: post["checked"] ?? false,  onChanged: (bool? value) {  setState(() {  post["checked"] = value;  });  },  ),  title: Text(  "${post['name']}n${post['company']['name']}"),  subtitle: Text("${post['email']}"),  trailing: Text("${post['username']}"))  ])));  })