List tile color is covered by DecorationBox - Flutter

Sugan Pandurengan 0
Viewed 39

The color of ListTile is converted to the color of DecoratedBox.

DecoratedBox(
                position: DecorationPosition.background,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  color: Colors.black,
                ),
                child: Column(
                  children: [
                    Builder(builder: (context) {
                      return Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: screenWidth * 0.03,
                          vertical: screenHeight * 0.02,
                        ),
                        child: SizedBox(
                          height: 50,
                          child: ListTile(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(5),
                            ),
                            textColor: AppColors.white,
                            tileColor: AppColors.green,
                            title: Text("Title"),
                            // style: ListTileStyle.drawer,
                          ),
                        ),
                      );
                    })
                  ],
                ),
              ),

Result:

Output withcolor in DecoratedBox

Once the Decorated box color is removed.

 DecoratedBox(
                position: DecorationPosition.background,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  // color: Colors.black,
                ),
                child: Column(
                  children: [
                    Builder(builder: (context) {
                      return Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: screenWidth * 0.03,
                          vertical: screenHeight * 0.02,
                        ),
                        child: SizedBox(
                          height: 50,
                          child: ListTile(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(5),
                            ),
                            textColor: AppColors.white,
                            tileColor: AppColors.green,
                            title: Text("Title"),
                            // style: ListTileStyle.drawer,
                          ),
                        ),
                      );
                    })
                  ],
                ),
              ),

Result:

Output without color in DecoratedBox

The actual color in the ListTile 'green' is visible.

Why the Decorated box color is applied for Listtile?

Any one help me.

I need to solve by without adding extra widget.

flutter-web flutter-layout dart flutter
2 Answers

try to add tileColor to your ListTile, you haven't defined it hence it is inheriting from parent and if parent have not defined it either it takes selectedTileColor: AppColors.green(that's my guess)

sonic0

I was following this issue, you can wrap the ListTile with another Material widget.

Builder(builder: (context) {
  return Material(
    child: SizedBox(
Yeasin Sheikh0
Related