如何使用颤振在firestore中读取地图中的特定项目

Question

我正在尝试阅读与技能相关的如下图所示的地图：

如下图所示：

这是给我带来用户数据的方法：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:haroonpf/enums/screen_state.dart';
import 'package:haroonpf/presentation/screens/home/models/skills.dart';
import 'package:haroonpf/presentation/screens/home/models/user_info.dart';
import 'package:haroonpf/utils/constants.dart';
import '../../base_view_model.dart';

class HomeViewModel extends BaseViewModel {
  UserInfoModel? userModel;
  UserInfoSkillsModel? userSkillsModel;


  void getUserData() async {
    await FirebaseFirestore.instance
        .collection('users')
        .doc(uId)
        .get()
        .then((value) {
      print("fbValues: " + value.data().toString());
      userModel = UserInfoModel.fromJson(value.data());
    }).catchError((error) {
      print(error.toString());
    });
    setState(ViewState.Idle);
  }
}

这是我的模型：

class UserInfoModel {
  String? image;
  String? name;
  String? country;
  String? city;
  String? position;
  UserSkills? userSkills;
  UserInfoModel(
      {this.image,
        this.name,
        this.country,
        this.position,
      this.userSkills});

  UserInfoModel.fromJson(dynamic json) {
    image = json['user_image'];
    name = json['name'];
    country = json['country'];
    city = json['city'];
    position = json['position'];
    userSkills = json['skills'] != null ? UserSkills.fromJson(json['skills']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['user_image'] = this.image;
    data['name'] = this.name;
    data['country'] = this.country;
    data['city'] = this.city;
    data['position'] = this.position;
    data['skills'] = this.userSkills;
    return data;
  }
}

class UserSkills {
  String? skillName;
  String? skillPerc;

  UserSkills({this.skillName, this.skillPerc});

  UserSkills.fromJson(dynamic json) {
    skillName = json['skill_name'];
    skillPerc = json['skill_perc'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['skill_name'] = this.skillName;
    data['skill_perc'] = this.skillPerc;
    return data;
  }
}

这是我的视图类：

import 'package:flutter/material.dart';
import 'package:haroonpf/presentation/screens/base_view_model.dart';
import 'package:haroonpf/presentation/screens/home/viewmodel/home_view_model.dart';
import 'package:haroonpf/utils/animation/animated_progress_indicator.dart';
import 'package:haroonpf/utils/constants.dart';

import '../../../../../base_screen.dart';

class Skills extends StatelessWidget {
  const Skills({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BaseScreen<HomeViewModel>(
      onModelReady: (homeViewModel) {
        homeViewModel.getUserData();
      },
      builder: (context, homeViewModel, _) {return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Divider(),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: defaultPadding),
            child: Text(
              "Framework out skills",
              style: Theme.of(context).textTheme.subtitle2,
            ),
          ),
          SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Row(
              children: [
                Expanded(
                  child: AnimatedCircularProgressIndicator(
                    percentage: double.parse(homeViewModel.userSkillsModel!.fwo_percentage!),
                    label: "Flutter",
                  ),
                ),
                SizedBox(width: defaultPadding),
                Expanded(
                  child: AnimatedCircularProgressIndicator(
                    percentage: 0.8,
                    label: "Android \nStudio",
                  ),
                ),
                SizedBox(width: defaultPadding),
                Expanded(
                  child: AnimatedCircularProgressIndicator(
                    percentage: 0.65,
                    label: "Fire\n-base",
                  ),
                ),
              ],
            ),
          ),
        ],
      );}
    );
  }
}

所以我需要阅读与每个部分相关的每个技能名称和百分比值..

Answer 1

我认为问题在于技能被表示为List<Map<String, dynamic>> 而不是Map<String, dynamic>。考虑到这一点，我对您的模型进行了轻微修改。

class UserInfoModel {
  String? image;
  String? name;
  String? country;
  String? city;
  String? position;
  List<UserSkills>? userSkills;
  UserInfoModel(
      {this.image, this.name, this.country, this.position, this.userSkills});

  UserInfoModel.fromJson(dynamic json) {
    image = json['user_image'];
    name = json['name'];
    country = json['country'];
    city = json['city'];
    position = json['position'];
    userSkills = [
      for (final skill in json['skills'] ?? []) UserSkills.fromJson(skill),
    ];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['user_image'] = this.image;
    data['name'] = this.name;
    data['country'] = this.country;
    data['city'] = this.city;
    data['position'] = this.position;
    data['skills'] = [for (final skill in this.userSkills ?? []) skill.toJson()];
    return data;
  }
}

class UserSkills {
  String? skillName;
  String? skillPerc;

  UserSkills({this.skillName, this.skillPerc});

  UserSkills.fromJson(dynamic json) {
    skillName = json['skill_name'];
    skillPerc = json['skill_perc'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['skill_name'] = this.skillName;
    data['skill_perc'] = this.skillPerc;
    return data;
  }
}

Answer 2

您可以创建一个自定义 listView，将 Firebase 返回给您的技能列表传递给您，然后每个项目将成为您要使用名称和百分比绘制的小部件