简体   繁体   English

在 Cloud Firestore 的 flutter 应用程序上显示图标

[英]Display icons on a flutter app from cloud firestore

I am currently displaying my icons like this:我目前正在显示这样的图标:

Widget _buildPopupDialog(BuildContext context) {

  List<IconData> _iconsTable = [
    Icons.feedback,
    Icons.eco,
    Icons.support,
    Icons.call,
    Icons.nature_people,
    Icons.directions_bike,
  ];

  return new AlertDialog(
    content: SingleChildScrollView(
      child: new Container(
        child: GridView.count(
          children: new List.generate(6, (int index) {
            return new Positioned(
              child: new DailyButton(iconData: _iconsTable[index]),
            );
          }),
        ),
      ),
    ),

However, I am wanting to get the icon data from cloud firestore.但是,我想从 cloud firestore 获取图标数据。 I am very new to using both flutter and firebase so I am very unsure how I would be able to do this.我对同时使用 flutter 和 firebase 非常陌生,所以我非常不确定我将如何做到这一点。 So far, I have tried this but iconData: Icons.iconsData obviously doesnt work:到目前为止,我已经尝试过了,但是iconData: Icons.iconsData显然不起作用:

class MyApp3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage3(),
    );
  }
}

class MyHomePage3 extends StatefulWidget {
  @override
  _MyHomePageState3 createState() {
    return _MyHomePageState3();
  }
}

class _MyHomePageState3 extends State<MyHomePage3> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('icons').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();
        return _buildList(context, snapshot.data.docs);
      },
    );
  }

  Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return ListView(
      children: snapshot.map((data) => _buildListItem(context, data)).toList(),
    );
  }

  Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
    final record3 = Record3.fromSnapshot(data);

    var _iconsData = record3.name;

    return Padding(
      key: ValueKey(record3.name),
      child: Container(
        child: Card(
          child: new MoodButton(
              onTap: () => print("Mood"),
              iconData: Icons.iconsData,
              ),
          // trailing: Text(record3.votes.toString()),
          // onTap: () => record3.reference.update({'votes': record3.votes+1})
        ),
      ),
    );
  }
}

class Record3 {
  final String name;
  final int votes;
  final DocumentReference reference;

  Record3.fromMap(Map<String, dynamic> map, {this.reference})
      : assert(map['name'] != null),
        assert(map['votes'] != null),
        name = map['name'],
        votes = map['votes'];

  Record3.fromSnapshot(DocumentSnapshot snapshot)
      : this.fromMap(snapshot.data(), reference: snapshot.reference);

  @override
  String toString() => "Record<$name:$votes>";
}

Any help would be greatly appreciated!任何帮助将不胜感激!

If anyone is interested, I was able to figure it out:如果有人有兴趣,我能够弄清楚:

Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
    final record3 = Record3.fromSnapshot(data);

    int iconCode = record3.votes;

    return Padding(
      key: ValueKey(record3.name),
      child: Container(
        child: new Container(
          child: new ListView(
              scrollDirection: Axis.horizontal,
              children: new List.generate(1, (int index) {
                return new Positioned(
                  child: new MoodButton(
                    onTap: () => print("Mood"),
                    iconData: (IconData(iconCode, fontFamily: 'MaterialIcons')),
                  ),
                );
              })),
        ),
      ),
    );

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 由于使用了另一个 api,Flutter 应用程序无法连接到云 Firestore - Flutter app cannot connect to cloud firestore due to another api used SwiftUI:如何从 Cloud Firestore 获取 GeoPoint 并显示它? - SwiftUI: How to fetch GeoPoint from Cloud Firestore and display it? 如何在 flutter 中显示来自 Firestore 的特定文档详细信息 - How to display a specif document detail from firestore in flutter flutter cloud-firestore MissingPluginException 异常 - flutter cloud-firestore MissingPluginException Exception Flutter 带有“cloud_firestore”的 pod 安装错误 - Flutter pod install error with 'cloud_firestore' Flutter iOS Cloud_FireStore提供错误 - Flutter ios cloud_firestore giving errors 在使用 Swift 的 iOS 应用程序中使用 DispatchQueue 等待数据从 Cloud Firestore 返回时遇到问题 - Having trouble using DispatchQueue to wait for data to return from Cloud Firestore in iOS app using Swift 适用于iOS的具有Retina显示屏的本地化应用程序图标 - Localized App Icons with Retina Display for iOS Flutter 中的 Firebase cloud_firestore 版本问题 - iOs M1 - Firebase cloud_firestore version issue in Flutter - iOs M1 Flutter (iOS) - 在 GeneratedPluginRegistrant.m 中找不到模块“cloud_firestore” - Flutter (iOS) - Module 'cloud_firestore' not found in GeneratedPluginRegistrant.m
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM