Flutter ListView with Image and Checkbox

In this tutorial, you will learn how to implement basic single line ListView with Image and Checkbox.First, Create new Flutter Project in your IntelliJ Idea.

1.Adding Assets and Images in Flutter

Flutter apps can include both code and assets. An asset is a file that is bundled and deployed with your app and is accessible at runtime.

Specifying assets

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

The assets subsection of the flutter section specifies files that should be included with the app. Each asset is identified by an explicit path (relative to the pubspec.yaml file) where the asset file is located. The order in which the assets are declared does not matter.

Add assets image in flutter

The main asset is assumed to correspond to a resolution of 1.0. For example, consider the following asset layout for an image named person.png:

  • …/person.png
  • …/2.0x/person.png
  • …/3.0x/person.png

On devices with a device pixel ratio of 1.8, the asset …/2.0x/person.png would be chosen. For a device pixel ratio of 2.7, the asset …/3.0x/person.png would be chosen.

2.Create Presentation Class

We’ll create purchase application, which displays various products offered for and maintains a purchase list. Let’s start by defining our presentation class, Product:

3.Create List  Item

ListTiles are always a fixed height (which height depends on how isThreeLine, dense, and subtitle are configured); they do not grow in height based on their contents. If you are looking for a widget that allows for arbitrary layout in a row, consider Row.

The ShoppingListItem widget follows a common pattern for stateful widgets. It stores the values it receives in its constructor in member variables, which it then uses during its function.

4.Create Listview

The parent creates a new instance of ShoppingListItem when it rebuilds, that operation is cheap because the framework compares the newly built widgets with the previously built widgets and applies only the differences to the underlying render objects.

Let’s look at an example parent widget that stores mutable state:

The ShoppingList class extends StatefulWidget, which means this widget stores mutable state. When the ShoppingListwidget is first inserted into the tree, the framework calls the createState function to create a fresh instance of _ShoppingListState to associate with that location in the tree.

To access properties of the current ShoppingList, the _ShoppingListState can use its widget property. If the parent rebuilds and creates a new ShoppingList, the _ShoppingListState will also rebuild with the new widget value. If you wish to be notified when the widget property changes, you can override the didUpdateWidget function, which is passed oldWidget to let you compare the old widget with the current widget.

Flutter ListView With Checkbox

Download this project from GitHub


Leave a Reply

Your email address will not be published. Required fields are marked *