Flutter Cards - How to Loop a card widgets in Flutter

flutter card widget
flutter card with image and text
flutter card layout
flutter card carousel
flutter card full width
flutter card rounded corners
flutter card ontap
flutter card height

Main.dart

I want to loop the cards in the flutter.Since in Angular 2 just *ngFor works fine now in same way how can i loop it.I don't found and docs on flutter web. you will find the output in the screen shot Please help me to know how to loop cards or any other widgets

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home:new MyCard()
    );
  }
}
class MyCard extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget allcards;
      return new Scaffold(
            appBar: new AppBar(
              title: new Text('My First App'),
              backgroundColor:new Color(0xFF673AB7),
            ),
            body: new Container(
              child: new Column(
                children: <Widget>[
                  new Card(
                    child: new Column(
                      children: <Widget>[
                        new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Row(
                            children: <Widget>[
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.thumb_up),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.comment),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
                             )

                            ],
                          )
                        )
                      ],
                    ),
                  )
                ],
              ),

            )

        );

    }
}`

This is my dart file screen shot

Just like Angular2 having an iteratable to loop over is what makes any loop works.

So I did some refactoring in your code and added a the list, changed Column with a ListView and here is the result:

  class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home:new MyCard()
    );
  }
}
class MyCard extends StatelessWidget{
  List cards = new List.generate(20, (i)=>new CustomCard());
  @override
  Widget build(BuildContext context) {
      return new Scaffold(
            appBar: new AppBar(
              title: new Text('My First App'),
              backgroundColor:new Color(0xFF673AB7),
            ),
            body: new Container(
              child: new ListView(
                children: cards,
              )

            )

        );

    }
}

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
              return  new Card(
                    child: new Column(
                      children: <Widget>[
                        new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Row(
                            children: <Widget>[
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.thumb_up),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.comment),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
                             )

                            ],
                          )
                        )
                      ],
                    ),
                  );
  }
}

Flutter simple app - ahmed radwan, I have to build a simple app to learn flutter and publish it in the Store. “Flutter simple 4- Swipe card with change title bar and contain of the Cards. 5- menu item @override. Widget build(BuildContext context) { method to build drawer add list inside drawer iterate over list by map to build card with data Main.dart. I want to loop the cards in the flutter.Since in Angular 2 just *ngFor works fine now in same way how can i loop it.I don't found and docs on flutter web. you will find the output in the screen shot Please help me to know how to loop cards or any other widgets

In case if any one gets error with above solution please add .toList() to

List cards = new List.generate(20, (i)=>new CustomCard()).toList();

Card class - material library - Dart API, is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc. This tutorial is about how to create Card widget in Flutter and how to customize it. Dart provides a ready-to-use Material Card class. Below are some examples of how to use the widget along with the properties you can use to customize the visual of the widget. Creating a Card. Creating a Card is very easy.

In order to avoid this error:

This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final:

Just put

final

At this line:

List cards = new List.generate(20, (i)=>new CustomCard());

Staying this:

final List cards = new List.generate(20, (i)=>new CustomCard());

How to Build a Flutter™ Card List In Less Than 10 Minutes, Build a basic card list using Flutter even if you are new to mobile development, in less In our FlutterIn5Series, we build widgets in 5 simple steps. But our aim is to build a list of cards and parameterize the code we built. In Positioned widget we can define the distance from the top. For each Card I will increase the distance by 10. Then we can see the nice stack of cards. Check the video If you need more clarification.

Flutter - Listview with Card, I will show the way of make beautiful card based listview with flutter. In previous video we make Duration: 6:46 Posted: Feb 3, 2019 Screenshot : Description : ListView use widgets 1) ListView using card 2) CardView set border 3) flex 4) GestureDetector 5) Expanded ListView Using Card In

37 Flutter: Using Cards - Flutter - Flutter Tutorials Handbook, 37 Flutter: Using Cards. main.dart //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets. body: new <Widget>[. new Card(. To create a local project with this code sample, run: flutter create --sample=material.Card.2 mysample This sample shows creation of a Card widget that can be tapped. When tapped this Card 's InkWell displays an "ink splash" that fills the entire card.

Flutter ListView Loop Demo – Eltsona, Look at this Feedback Loop in detail. Flutter ListView Loop Demo Widget getRow(int i) { return GestureDetector( child: Card( // 1 shape: RoundedRectangleBorder( Cards allow for a nice rounded border effect. Why should I use card widget for cards over the container widget. flutter dart. Flutter Cards - How to Loop a card widgets in Flutter. 71. Flutter: Expanded vs

Comments
  • Was throwing error while generating list. But after adding .toList(), its working fine. Don't why we need to add .toList( ). :/
  • Can you explain how did you add .toList() ?
  • Add .toList() to List cards = new List.generate(20, (i)=>new CustomCard()).toList();