我想在 flutter 中创建用户配置文件列表？

Question

I am new to the flutter and for practice purposes, I am creating a blood donation app, in my app, I have added a registration form for donor registration, now when a recipient comes for blood needs, they fill out the form for specific blood group accordingly recipient could see a list of donors with profile, name, city, and country. Now I need help in creating this page that shows all the registered donors on the list.

Answer 1

Firstly you need to make the data model where you can add specific data. Make form where user fills the data and afterwards put that data into model. Add those models into list and then map into listView.

Model:

class BloodDonor {
 final String profile;
 final String name;
 final String city;
 final String country;

 BloodDonor({
   required this.city,
   required this.country,
   required this.name,
   required this.profile,
 });
}

Screen:

class GetDonorDetailScreen extends StatefulWidget {
  @override
  State<GetDonorDetailScreen> createState() => _GetDonorDetailScreenState();
}

class _GetDonorDetailScreenState extends State<GetDonorDetailScreen> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  BloodDonor bloodDonor = BloodDonor();

  List<BloodDonor> donors = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Form(
          key: formKey,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter profile',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.profile = value!;
                  },
                ),
                SizedBox(height: 10),
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter Name',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.name = value!;
                  },
                ),
                SizedBox(height: 10),
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter City',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.city = value!;
                  },
                ),
                SizedBox(height: 10),
                TextFormField(
                  decoration: InputDecoration(
                    hintText: 'Enter Country',
                  ),
                  validator: (valueEntered) {
                    return valueEntered!.isEmpty ? "Please fill here" : null;
                  },
                  onSaved: (value) {
                    bloodDonor.country = value!;
                  },
                ),
                SizedBox(height: 10),
                Center(
                  child: ElevatedButton(
                    child: Text("Add"),
                    onPressed: () {
                      if (formKey.currentState!.validate()) {
                        formKey.currentState!.save();
                        setState(() {
                          donors.add(bloodDonor);
                          bloodDonor = BloodDonor();
                          formKey.currentState?.reset();
                        });
                      }
                    },
                  ),
                ),
                SizedBox(height: 10),
                Expanded(
                  child: ListView(
                    children: [
                      for (final donor in donors)
                        ListTile(
                          title: Text(donor.name),
                          subtitle: Text(
                              "${donor.city}, ${donor.country} - ${donor.profile}"),
                        ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}