• About WordPress
    • WordPress.org
    • Documentation
    • Support
    • Feedback
  • Log In
  • Register
  • Home
  • Courses
  • Past Paper
  • FYP
  • Interview Questions
  • University Events
  • Contact
  • Quiz & Assignment
Cuitutorial
  • Home
  • Courses
  • Past Paper
  • FYP
  • Interview Questions
  • University Events
  • Contact
  • Quiz & Assignment

Mobile Application Development

Home » Blog » List view Builder in Flutter

List view Builder in Flutter

  • Posted by saqib
  • Categories Mobile Application Development
  • Date December 20, 2022
  • Comments 0 comment

List view Builder in Flutter

  1. The first basic step is to import the required material design package. Let’s import it.

import ‘package:flutter/material.dart’;

2. Create Custom Data Class

In this step, I will create a Company Stocks class that has names and prices of the stocks. It is created only to map the items of the object with the List View Builder.

class CompanyStocks {

String name;

double price;

CompanyStocks({this.name,this.price});

}

3. Create a Stateful Widget

The next step is to create a Stateful Widget that will contain all the dummy data items mapped with the above class. All the logic or the implementation part is done inside the build() method. Copy, and paste the below lines of code.

class MyApp extends StatefulWidget {

  @override

  _MyAppState createState() {

    // TODO: implement createState

    return _MyAppState();

  }

}

class _MyAppState extends State {

  List stocksList = [

    CompanyStocks(name: “Facebook”, price: 339.1),

    CompanyStocks(name: “A10 NETWORKS INC.”, price: 10.34),

    CompanyStocks(name: “Intel Corp”, price: 56.96),

    CompanyStocks(name: “HP Inc”, price: 32.43),

    CompanyStocks(name: “Advanced Micro Devices Inc.”, price: 77.44),

    CompanyStocks(name: “Apple Inc”, price: 133.98),

    CompanyStocks(name: “Amazon.com, Inc.”, price: 3505.44),

    CompanyStocks(name: “Microsoft Corporation”, price: 265.51),

    CompanyStocks(name: “Facebook”, price: 339.1),

    CompanyStocks(name: “A10 NETWORKS INC.”, price: 10.34),

    CompanyStocks(name: “Intel Corp”, price: 56.96),

    CompanyStocks(name: “HP Inc”, price: 32.43),

    CompanyStocks(name: “Advanced Micro Devices Inc.”, price: 77.44),

    CompanyStocks(name: “Apple Inc”, price: 133.98),

    CompanyStocks(name: “Amazon.com, Inc.”, price: 3505.44),

    CompanyStocks(name: “Microsoft Corporation”, price: 265.51)

  ];

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text(“List View Builder”),

        ),

        body: ListView.builder(

          itemCount: stocksList.length,

          itemBuilder: (context, index) {

            return Card(

              child: Padding(

                padding: EdgeInsets.all(10),

                child: ListTile(

                  title: Text(

                    stocksList[index].name,

                    style: TextStyle(

                      fontSize: 20,

                    ),

                  ),

                  leading: CircleAvatar(

                    child: Text(

                      stocksList[index].name[0],

                      style:

                          TextStyle(fontSize: 15, fontWeight: FontWeight.bold),

                    ),

                  ),

                  trailing: Text(“\$ ${stocksList[index].price}”),

                ),

              ),

            );

          },

        ),

      ),

    );

  }

}

Explanation of the Code

In the above code, I have created a Stateful Widget MyApp and overridden the build() method. Inside the state class, I have created dummy data as the list items. It will be of the type Company Stocks that I have created in step 2.

After that, I called the ListView.builder() inside the build method. Inside the builder method, there will be a card and inside the card, there is ListTile that will have three things. It is the Name of the stock, the price of each stock, and the CircularAvtar with the first alphabet of the stock’s name.

Following is the output of the above code.

………..

  1. Create Model class with the name cataloge.dart and make class and item detail with description like id, name, descr etc
class CatalogModel {
  static final items = [
    Item(
        id: 1,
        name: "iPhone 12 Pro",
        desc: "Apple iPhone 12th generation",
        price: 999,
        color: "#33505a",
        image:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRISJ6msIu4AU9_M9ZnJVQVFmfuhfyJjEtbUm3ZK11_8IV9TV25-1uM5wHjiFNwKy99w0mR5Hk&usqp=CAc")
  ];
}

class Item {
  final int id;
  final String name;
  final String desc;
  final num price;
  final String color;
  final String image;

  Item({this.id, this.name, this.desc, this.price, this.color, this.image});
}
2. Then go to home in body section this is catalog app so here in this section we must have list

import 'package:flutter/material.dart';
import 'package:flutter_catalog/models/catalog.dart';
import 'package:flutter_catalog/widgets/drawer.dart';
import 'package:flutter_catalog/widgets/item_widget.dart';

class HomePage extends StatelessWidget {
  final int days = 30;
  final String name = "Codepur";
  @override
  Widget build(BuildContext context) {
    final dummyList = List.generate(20, (index) => CatalogModel.items[0]);
    return Scaffold(
      appBar: AppBar(
        title: Text("Catalog App"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView.builder(
          itemCount: dummyList.length,
          itemBuilder: (context, index) {
            return ItemWidget(
              item: dummyList[index],
            );
          }, 
        ),
      ),
      drawer: MyDrawer(),
    );
  }
}
the item widgets doesnt exist so cr eate under widgets folder with the name item_widgets.dart
and write the folowing code in this file
import 'package:flutter/material.dart';
import 'package:flutter_catalog/models/catalog.dart';

class ItemWidget extends StatelessWidget {
  final Item item;

  const ItemWidget({Key key, @required this.item})
      : assert(item != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        onTap: () {
          print("${item.name} pressed");
        },
        leading: Image.network(item.image),
        title: Text(item.name),
        subtitle: Text(item.desc),
        trailing: Text(
          "${item.price}",
          textScaleFactor: 1.5,
          style: TextStyle(
            color: Colors.deepPurple,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

  • Share:
author avatar
saqib

Previous post

Shortest Remaining Time Algorithm in Operating system
December 20, 2022

Next post

Json Mapping-Data Class Generator-ProgressIndicator
December 20, 2022

You may also like

Beautiful UI design in flutter
5 January, 2023

Beautiful UI design in flutter In project home page import velocity and put the previous lecture list with the following properties import ‘package:flutter/material.dart’; import ‘package:flutter/services.dart’; import ‘dart:convert’; import ‘package:flutter_catalog/models/catalog.dart’; import ‘package:flutter_catalog/widgets/drawer.dart’; import ‘package:flutter_catalog/widgets/item_widget.dart’; import ‘package:flutter_catalog/widgets/themes.dart’; import ‘package:velocity_x/velocity_x.dart’; class HomePage extends …

GridView GridTile in flutter
29 December, 2022

GridView GridTile in flutter A grid view is a graphical control element used to show items in the tabular form. In this section, we are going to learn how to render items in a grid view in the Flutter application GridView …

Json Mapping-Data Class Generator-ProgressIndicator
20 December, 2022

Json Mapping-Data Class Generator-Progress Indicator in Flutter if we have to get data in json formate than we first have to map the data in catalog.dart file like this import ‘dart:convert’; class CatalogModel { static List items; } class Item …

Leave A Reply Cancel reply

You must be logged in to post a comment.

admin@cuitutorial.com
Facebook-f Twitter Youtube Linkedin Instagram Stack-overflow Pinterest Github Quora Whatsapp
Courses
  • All Courses
  • Past Paper
  • Final year projects
  • Interview Questions
  • Contact
Important Pages
  • Privacy Policy
  • Terms of Service
  • Cookie Policy
Links
  • University Events
  • Team
Education & learning platform for All Computer science subjects
Final year projects
Past Paper
Interview questions
Programming, C/C++, Asp.net/MVC. Android, MySql, Jquery, Ajax, javascript, Php, Html5, Bootstrap4.
NTS, GAT, PPSC, FPSC

Copyright © 2021 | Cuitutorial