ListTile tileColor溢出ListView

Question

. Answers to this question are eligible for a +50 reputation bounty. sergmister wants to to this question.

I have a ListView with ListTiles which set the tileColor property. All of the text and icons in the ListTile is clipped while the tileColor is visible beyond the ListView. How can I clip the entire ListTile so that nothing is visible beyond the ListView? I have tried wrapping ListView in various containers and the ListTile in a Container with no luck.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(title: 'Reminders'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List _reminders = <String>[];

  void _addReminder(String text) {
    setState(() {
      _reminders.add(text);
    });
  }

  Widget _buildRow(String text, int i) {
    return ListTile(
      title: Text('[enter image description here][1]Reminder'),
      trailing: IconButton(
          onPressed: () {
            setState(() {
              _reminders.removeAt(i);
            });
          },
          icon: Icon(Icons.delete)),
      subtitle: Text(text),
      tileColor: Colors.lightBlue,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    );
  }

  void _showMenu() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 400,
            child: ListView.builder(
              padding: EdgeInsets.all(8),
              itemBuilder: (context, i) => _buildRow(_reminders[i], i),
              itemCount: _reminders.length,
            ),
          ),
          Container(
            height: 100,
            width: double.infinity,
            child: Text('hello'),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addReminder('hello there');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Answer 1

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(title: 'Reminders'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // ignore: prefer_final_fields
  List _reminders = <String>[];

  void _addReminder(String text) {
    setState(() {
      _reminders.add(text);
    });
  }

  Widget _buildRow(String text, int i) {
    return ListTile(
      title: const Text('Reminder'),
      trailing: IconButton(
          onPressed: () {
            setState(() {
              _reminders.removeAt(i);
            });
          },
          icon: const Icon(Icons.delete)),
      subtitle: Text(text),
      tileColor: Colors.lightBlue,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    );
  }

  void _showMenu() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
      ),
      body: ListView.separated(
              padding: const EdgeInsets.all(8),
              itemBuilder: (context, i) => _buildRow(_reminders[i], i),
              itemCount: _reminders.length, separatorBuilder: (BuildContext context, int index) {
              return const SizedBox(height:10);},
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addReminder('hello there');
        },
        child: const Icon(Icons.add),
      ),
    );
  }

}

Answer 2

Here is my code with solution

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(title: 'Reminders'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List _reminders = <String>[];

  void _addReminder(String text) {
    setState(() {
      _reminders.add(text);
    });
  }

  Widget _buildRow(String text, int i) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 5),
      child: ListTile(
        title: Text('[enter image description here][1]Reminder'),
        trailing: IconButton(
            onPressed: () {
              setState(() {
                _reminders.removeAt(i);
              });
            },
            icon: Icon(Icons.delete)),
        subtitle: Text(text),
        tileColor: Colors.lightBlue,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
    );
  }

  void _showMenu() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))
        ],
      ),
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              padding: EdgeInsets.all(8),
              itemBuilder: (context, i) => _buildRow(_reminders[i], i),
              itemCount: _reminders.length,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.white,
              width: double.infinity,
              child: Text('hello'),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addReminder('hello there');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

here is ss

Answer 3

To solve your problem, wrap the Tile in a Material. Here is a tested solution. The explanation is below the code.

The short version:

  Widget _buildRow(String text, int i) {
    return Material(
        child: ListTile(
          title: Text('[enter image description here][$i]Reminder'),
          trailing: IconButton(
            onPressed: () {
              setState(() {
                _reminders.removeAt(i);
              });
            },
            icon: const Icon(Icons.delete)),
        subtitle: Text(text),
        tileColor: Colors.lightBlue,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    ));
  }

The complete, working example:

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

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

  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.teal,
        ),
        home: const MyHomePage(title: 'Reminders'),
      );
    }
  }

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

    final String title;

    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    final List _reminders = <String>[];

    void _addReminder(String text) {
      setState(() {
        _reminders.add(text);
      });
    }

    Widget _buildRow(String text, int i) {
      return Material(child: ListTile(
        title: Text('[enter image description here][$i]Reminder'),
        trailing: IconButton(
            onPressed: () {
              setState(() {
                _reminders.removeAt(i);
              });
            },
            icon: const Icon(Icons.delete)),
        subtitle: Text(text),
        tileColor: Colors.lightBlue,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ));
    }

    void _showMenu() {}

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 400,
              child: ClipRect(
                child: ListView.builder(
                  shrinkWrap: true,
                  padding: const EdgeInsets.all(8),
                  itemBuilder: (context, i) =>              _buildRow(_reminders[i], i),
                  itemCount: _reminders.length,
                ),
              )
            ),
            Container(
              color: Colors.white,
              width: double.infinity,
              child: Text('hello'),
            )
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _addReminder('hello there');
          },
          child: const Icon(Icons.add),
        ),
      );
    }
  }
```

This might be considered a bug, but it is expected behavior. The tile colors are painted by the first Material widget ancestor of the ListTile (I believe this allows it to optimize out expensive clipping). See the ListTile documentation for more information.