ListTile with tileColor behaves strange in sliver with animation

When ListTile with specified tileColor is used inside slivers, it behaves strange during an animation apply.

Steps to Reproduce

Use the following code example and tap on Toggle button to hide and then show the list tile.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _show = true;
  
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(title: Text('Tile example')),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: AnimatedSwitcher(
              duration: Duration(milliseconds: 300),
              transitionBuilder: (Widget child, Animation<double> animation) =>
                SizeTransition(
                  sizeFactor: animation,
                  axisAlignment: 1,
                  child: child,
                ),
              child: _show ? ListTile(
                tileColor: Colors.yellow,
                title: Text('Titlte'),
              ) : SizedBox.shrink(),
            ),
          ),
          SliverToBoxAdapter(
            child: ElevatedButton(
              child: Text('toggle'),
              onPressed: () {
                setState(() {
                  _show = !_show;
                });
              },
            ),
          ),
        ],
      ),
      
    );
  }
}

Expected results: ListTile should remain color after it opened

Actual results: Color is missing

First noticed Flutter 2.2

Logs


[✓] Flutter (Channel stable, 2.2.0, on macOS 11.3 20E232 darwin-x64, locale ru-UA)
    • Flutter version 2.2.0 at /Users/tatsu/flutter
    • Framework revision b22742018b (7 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

Reproducible.

Relation issues, #73315 #59963

@TatsuUkraine

@TatsuUkraine Hi, here is a workaround:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _show = true;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text('Tile example')),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: AnimatedSwitcher(
              duration: Duration(milliseconds: 300),
              transitionBuilder: (Widget child, Animation<double> animation) =>
                  SizeTransition(
                    sizeFactor: animation,
                    axisAlignment: 1,
                    child: child,
                  ),
              child: _show ? Material(
                child: ListTile(
                  tileColor: Colors.yellow,
                  title: Text('Titlte'),
                ),
              ) : SizedBox.shrink(),
            ),
          ),
          SliverToBoxAdapter(
            child: ElevatedButton(
              child: Text('toggle'),
              onPressed: () {
                setState(() {
                  _show = !_show;
                });
              },
            ),
          ),
        ],
      ),

    );
  }
}

Thanks, it may solve the problem. Will let you know when I try it. Another workaround that I'm using now is a ColoredBox around the ListTile. Could you explain how Material widget solves the problem?

This is fixed by #105760

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

ListTile with tileColor behaves strange in sliver with animation #83124

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ListTile with tileColor behaves strange in sliver with animation #83124

Description

Steps to Reproduce

Activity

AbhishekDoshi26 commented on May 23, 2021

xu-baolin commented on May 24, 2021

xu-baolin commented on Jun 16, 2021

TatsuUkraine commented on Jun 20, 2021

TahaTesser commented on Jul 13, 2022

github-actions commented on Jul 27, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions