CODEWITHSUNDEEP
flutterlistviewdartcount
Alv
Alv

Reputation: 65

Flutter: count the number of items created through ListView.builder and display them

I'm still quite new to Flutter. I have a page that has items created through ListView.builder, and I need to display the number of items inside that page for the user to see. Here's what i want to achieve:

enter image description here

The Listview uses data from a class that i've created.

class Product {
 int id;
 String title;
 String image;
 String description;

 Product({this.id, this.title, this.image, this.description});
}

List <Product> products= [
 Product(
  id: 1,
  title: 'Item 1',
  image: 'assets/images/item1.png',
  description: 'some text'
 ),
 Product(
  id: 2,
  title: 'Item 2',
  image: 'assets/images/item2.png',
  description: 'some text'
 ),
 Product(
  id: 3,
  title: 'Item 3',
  image: 'assets/images/item3.png',
  description: 'some text'
 ),
 Product(
  id: 4,
  title: 'Item 4',
  image: 'assets/images/item4.png',
  description: 'some text'
 ),
];

I want to mention the number of items that the listview has created and display them inside the column widget according to the image above.

class WishList extends StatefulWidget {
  @override
  _WishListState createState() => _WishListState();
}

class _WishListState extends State<WishList> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Column(
        children: <Widget> [
          Container(
            child: Column(
              children: [
                Text('My Wishlist',),
                SizedBox(height: 20),
                Text('You have (num_of_items) Items'),

How do i do that? any help would be greatly appreciated.

Upvotes: 2

Views: 11784

Answers (2)

Jitesh Mohite
Jitesh Mohite

Reputation: 34180

Pass productList to Column and it will iterate the list to show each product.

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Product> products = [
    Product(
        id: 1,
        title: 'Item 1',
        image: 'assets/images/item1.png',
        description: 'some text'),
    Product(
        id: 2,
        title: 'Item 2',
        image: 'assets/images/item2.png',
        description: 'some text'),
    Product(
        id: 3,
        title: 'Item 3',
        image: 'assets/images/item3.png',
        description: 'some text'),
    Product(
        id: 4,
        title: 'Item 4',
        image: 'assets/images/item4.png',
        description: 'some text'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[200],
        body: Container(
          child: Column(children: [
            Text(
              'My Wishlist',
            ),
            SizedBox(height: 20),
            Text('You have ${products.length} Items'),
            ...products.map((product) {
              return Text(product.title);
            }).toList(),
          ]),
        ));
  }
}

class Product {
  int id;
  String title;
  String image;
  String description;

  Product({this.id, this.title, this.image, this.description});
}

Output:

enter image description here

Upvotes: 1

Ravi Singh Lodhi
Ravi Singh Lodhi

Reputation: 2793

You will pass a list of Products to the ListView.builder, say products. So, the total number of items will be -

products.length

Your code will be -

class WishList extends StatefulWidget {
  @override
  _WishListState createState() => _WishListState();
}

class _WishListState extends State<WishList> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Column(
        children: <Widget> [
          Container(
            child: Column(
              children: [
                Text('My Wishlist',),
                SizedBox(height: 20),
                Text('You have ${products.length} Items'), // <--------------

Upvotes: 1

Related Questions