How To Create Listview With Icon And Text Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 03-11-2020

f you have done any Android or iOS development before, you are going to love how easy it is to make ListViews in Flutter. In this article we will use simple examples to look at all of the common use cases for making them. Consider this page a reference. Bookmark it and come back here to copy-and-paste the code snippets as starters in your own projects.

How To Create Listview With Icon And Text Using Flutter App

Text And Icon In Listview
Complete Code For Text And Icon In Listview In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _listViewData = [
    "BajarangiSoft.com",
    "Flutter",
    "Android",
    "iOS",
    "Dart",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[800],
        title: Text('Text and icon in ListView'),
      ),
      body: ListView(
        padding: EdgeInsets.all(8.0),
        children: _listViewData
            .map((data) => ListTile(
          leading: Icon(Icons.person,color: Colors.blue[800],),
          title: Text(data),
          subtitle: Text("a subtitle here"),
        ))
            .toList(),
      ),
    );
  }
}

 

Related Post