简体   繁体   中英

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. I am very new to using both flutter and firebase so I am very unsure how I would be able to do this. So far, I have tried this but iconData: Icons.iconsData obviously doesnt work:

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')),
                  ),
                );
              })),
        ),
      ),
    );

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM