How to set ListView Background Color in Flutter

ListView is one of the most used widgets in Flutter. It helps to list a finite or infinite set of items quickly. In this blog post, let’s check how to change the background color of ListView in Flutter.

The ListView widget doesn’t have a property to change the background color. Hence, we may wrap ListView with a Container widget to change the color. The color property of the Container helps to set the color.

See the code snippet given below.

Container(
            color: Colors.grey,
            child: ListView.builder(
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 150,
                    color: Colors.yellow,
                    margin: const EdgeInsets.all(8),
                    child: Center(child: Text(data[index])),
                  );
                })

Here, the background color is grey, and the background color of each ListView item is yellow.

See the following output.

flutter listview background color

Following is the complete code for reference.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final data = [
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine",
    "ten"
  ];
  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            'Flutter ListView Background Color',
          ),
        ),
        body: Container(
            color: Colors.grey,
            child: ListView.builder(
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 150,
                    color: Colors.yellow,
                    margin: const EdgeInsets.all(8),
                    child: Center(child: Text(data[index])),
                  );
                })));
  }
}

That’s how you set the ListView background color in Flutter.

Leave a Comment