Flutter List View In Widget With Vertical With Example

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

ListTile in Flutter with Example in Android .You can create a ListWidget and make use of ListTile as its children. A list tile contains one to three lines of text optionally flanked by icons or other widgets, such as checkboxes.The icons (or other widgets) for the tile are defined with the leading and trailing parameters. The first line of text is not optional and is specified with title. The value of subtitle, which is optional, will occupy the space allocated for an additional line of text, or two lines if isThreeLine is true. We will look at these properties in detail below.

ListTile Widget in flutter

Following is an Android UI screenshot when you run this application on an Android device.
Creating a Simple Scaffold widget and using the Column  WIdget as its body. ListTile can be very helpful for this purpose in particular.you can Also add Padding.To create the control for the Long Press on the ListTile widget, the onLongPress callback is used. It gets fired whenever the user clicks long on the ListTile.
It can create a simple looking card like a list of items without the need for specifying the boundary etc.


You can add This ListTile Code:

ListTile(
  title: Text('Title 1'),
  subtitle: Text("Welcome To BjarangiSoft"),
  leading: Icon(Icons.home, color: Colors.black),
  trailing: Icon(Icons.chevron_right, color: Colors.black),
  isThreeLine: true,
  onLongPress: (){
    print("Long Press on the listTile");
  },
),

Complete Code For ListTile Widget:
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('ListTile Widget'),
        backgroundColor: Colors.black,
      ),
      body:
      Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text('Title 1'),
                subtitle: Text("Welcome To BjarangiSoft"),
                leading: Icon(Icons.home, color: Colors.black),
                trailing: Icon(Icons.chevron_right, color: Colors.black),
                isThreeLine: true,
                onLongPress: (){
                  print("Long Press on the listTile");
                },
              ),
              ListTile(
                title: Text('Title 2'),
                subtitle: Text("Welcome To BjarangiSoft"),
                leading: Icon(Icons.home , color: Colors.black),
                trailing: Icon(Icons.chevron_right, color: Colors.black),
                isThreeLine: true,
                onLongPress: (){
                  print("Long Press on the listTile");
                },
              ),
              ListTile(
                title: Text('Title 3'),
                subtitle: Text("Welcome To BjarangiSoft"),
                leading: Icon(Icons.home, color: Colors.black),
                trailing: Icon(Icons.chevron_right, color: Colors.black),
                onLongPress: (){
                  print("Long Press on the listTile");
                },
              ),
            ],
          )
      ),
    );
  }
}

Related Post