CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
Jananath Banuka
Jananath Banuka

Reputation: 633

How to iterate a widget in Flutter using dart

I need to iterate the an Icon in flutter depending on the length of a value I get from firestore

Below I have commented the component (Icon) I need to iterate horizontally.


    class _GetReviewsState extends State<GetReviews> {
      String _id;
      final db = Firestore.instance;
      final _formkey = GlobalKey<FormState>();
      String _review;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("All Reviews"),
            centerTitle: true,
          ),
          body: 
                ...

                    subtitle: RichText(
                        text: TextSpan(
                            text: "",
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.grey,
                            ),
                            children: [
                          WidgetSpan(
                            child: new IconTheme(
                              data: new IconThemeData(color: Colors.orange),
                              child: new Icon(Icons.star, size: 14,), // I want to iterate this "star icon" for reviews.ratings.length times
                            ),
                          ),
                        ]
                        )
                        ),


                    onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (_) =>
                                ViewParticularReview(getreview: reviews))),
                  );
                },
              );
            },
          ),
        );
      }
    }

Here is the current UI screenshot:

But as you can see, only one star Icon is shown, I want to repeat the stars based on the value I get from the firestore

So I want something like

for( var i = 0 ; i < reviews.ratings; i++ ) { 
      // print the icon horizontally
} 
``


here the `reviews.ratings` gives an `int` value from `firestore`

Can someone please help me?

[![enter image description here][1]][1]


  [1]: https://i.sstatic.net/9jp5L.png

Upvotes: 0

Views: 124

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80904

You can use a collection for to iterate and add multiple icons:

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    for( var i = 0 ; i < 10; i++ )
     new IconTheme(
          data: new IconThemeData(color: Colors.orange),
          child: new Icon(Icons.star, size: 20,), // I want to iterate this "star icon" for reviews.ratings.length times
                   ),
                ],
             ),

Check the following for an example:

https://dartpad.dartlang.org/8e922854c88b6602c17d0e7e2c51b27d

Upvotes: 1

Related Questions