CheckboxTile painted below parent container

Happens on all devices (web, & ios), including dartpad.

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(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          child: Container(
            color: Colors.yellow,
            padding: EdgeInsets.all(5),
            child: ListView.builder(
              shrinkWrap: true,
              padding: EdgeInsets.zero,
              itemCount: 10,
              itemBuilder: (BuildContext context, int i) {
                print(i);
                return CheckboxListTile(
                    title: Text("hello $i"),
                    tileColor: Colors.blueGrey,
                    value: false,
                    shape: RoundedRectangleBorder(
                        side: BorderSide(width: 0.5, color: Colors.blue),
                        borderRadius: BorderRadius.circular(30)),
                    onChanged: (val) {});
              },
            ),
          ),
        ),
        Container(height: 600),
      ],
    );
  }
}

The checkbox tile is painted outside of the parent container if either a border is provided via shape or if a tileColor is provided

This is impacting production for us, is there a recommended fix until this issue is fixed?

Here is a workaround:

              itemBuilder: (BuildContext context, int i) {
                print(i);
                return Material(
                  child: CheckboxListTile(
                      title: Text("hello $i"),
                      tileColor: Colors.blueGrey,
                      value: false,
                      shape: RoundedRectangleBorder(
                          side: BorderSide(width: 0.5, color: Colors.blue),
                          borderRadius: BorderRadius.circular(30)),
                      onChanged: (val) {}),
                );
              },

@chunhtai

We have received a lot of similar issues, and I think it’s time to update our documentation.
#85256
#83124
#73315
#59963
#84201

CC @chunhtai @HansMuller

@xu-baolin

Hi @xu-baolin,
Does Flutter team have plans to release a fix, or are there only workarounds for this issue?

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

`CheckboxTile` painted below parent container #85256

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CheckboxTile painted below parent container #85256

Description

Activity

steeling commented on Jun 24, 2021

xu-baolin commented on Jun 25, 2021

xu-baolin commented on Jun 25, 2021

deavy commented on Aug 18, 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

`CheckboxTile` painted below parent container #85256