How To Change Listview Background Color Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

Programmatically set the background color of a list view item , You can use the BackColor property to change the color displayed behind the item text. This property can be used if you want to use different background and Change listview selected item background color in android.Apply another color on only list view clicked row using android:listSelector="" attribute on XML.

How To Change Listview Background Color Using Flutter App

Change ListView Background Color
Complete Code For Change ListView Background Color In Flutter
main.dart

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 {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _listViewData = [
    "Lorem Ipsum is simply dummy text",
    "Lorem Ipsum is simply dummy text another.",
    "Lorem Ipsum is simply dummy text more.",
    "Lorem Ipsum is simply dummy text more.",
    "Lorem Ipsum is simply dummy text more.",
    "Lorem Ipsum is simply dummy text more.",
    "Lorem Ipsum is simply dummy text more.",
    "Lorem Ipsum is simply dummy text more.",
    "Lorem Ipsum is simply dummy text more.",
  ];

  int _selectedIndex = 0;

  _onSelected(int index) {
    setState(() => _selectedIndex = index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightGreen,
        title: Text('Change ListView Bg Color',style: TextStyle(color: Colors.white),),
      ),
      body: Padding(
        padding: const EdgeInsets.all(0.0),
        child: ListView.builder(
          itemCount: _listViewData.length,
          itemBuilder: (context, index) => Container(
            color: _selectedIndex != null && _selectedIndex == index
                ? Colors.lightGreen
                : Colors.white,
            child: ListTile(
              title: Text(_listViewData[index],style: TextStyle(fontSize: 12),),
              onTap: () => _onSelected(index),
            ),
          ),
        ),
      ),
    );
  }
}

Related Post