flutter-tutorial

Flutter ListView

In flutter, a listview is a widget that displays objects in a linear order. List view, for example, is used to present a list of restaurants in apps like zomato and swiggy. We can display numerous objects on the same screen because it is a scrollable widget. The children will be put one after another from top to bottom if the scroll direction is vertical. Each kid should horizontally fill the listview. The children will be ordered from left to right when the scroll direction is horizontal. In most cases, ListTiles will be used as children for a listview, although any widget can be used instead.

Flutter has a ListView widget that allows us to add a list view to our application.

Example of a Flutter ListView

Let’s look at an example where a ListView with three children is displayed. As children, we’ll utilise ListTile inside the card widget. Replace the code in the main.dart file with the following code in a new flutter project.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter App Learning',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Learn Code Zone"),
        ),
        body: ListView(
          children: [
            Card(
                child: ListTile(
              title: Text("List Item 1"),
            )),
            Card(
              child: ListTile(
                title: Text("List Item 2"),
              ),
            ),
            Card(
                child: ListTile(
              title: Text("List Item 3"),
            )),
          ],
          shrinkWrap: true,
        ));
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.