flutter problem: How to change color of ExpansionTile?


I want to change color when my "ExpansionTile" is open.
When I am opening my ExpansionTile then at this time I got white bg but I want light grey color after opening, looks like my first screenshot
This is my code.

and I also want increase my icon size how to possible is(up down arrow)?

import 'package:cwc/constants/constants.dart';
import 'package:flutter/material.dart';

import '../skeleton.dart';

class FAQPage extends StatefulWidget {
  State<StatefulWidget> createState() {
    return FAQPageState();

class FAQPageState extends State<FAQPage> {
  bool isExpand = false;
  var selected;

  void initState() {
    // TODO: implement initState
    isExpand = false;

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff6f7f9),
      appBar: AppBar(
          leading: InkWell(
              onTap: () {
              child: Icon(
                color: Colors.black,
                size: tSize24,
          centerTitle: true,
          backgroundColor: Colors.white,
          title: Text(
            style: TextStyle(color: Colors.black, fontSize: tSize24),
      body: isFAQLoading == true
          ? ButtonSkeleton()
          : ListView.builder(
              itemCount: faqListData.length,
              itemBuilder: (context, index) {
                return Column(
                    children: <Widget>[
                        decoration: BoxDecoration(
                            boxShadow: [
                                  color: Colors.grey.shade200,
                                  offset: Offset(1.0, 1.0),
                                  spreadRadius: 0.2)
                        child: Card(
                          elevation: 0,
                          shadowColor: Colors.grey,
                          margin: EdgeInsets.only(
                            bottom: 3,
                          child: ExpansionTile(
                              key: Key(index.toString()),
                              initiallyExpanded: index == selected,
                              iconColor: Colors.grey,
                              title: Text(
                                style: TextStyle(
                                    color: Color(0xFF444444),
                                    fontSize: tSize14,
                                    fontWeight: FontWeight.w500),
                              children: <Widget>[
                                    padding: EdgeInsets.only(top: 10.0,bottom: 10,left: 17,right: 17),
                                    child: Row(mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                          style: TextStyle(
                                            color: Color(0xFF444444),
                                            fontSize: 13,
                                          textAlign: TextAlign.start,
                              onExpansionChanged: ((newState) {
                                isExpand = newState;
                                if (newState)
                                  setState(() {
                                    Duration(seconds: 20000);
                                    selected = index;
                                    // isExpand=newState;
                                  setState(() {
                                    selected = -1;
                                    // isExpand=newState;

I want like this when ExpansionTile is open then my color should be light grey

enter image description here

But I got(white) like this at this time when i opening my ExpansionTile

enter image description here


Set the backgroundColor and/or the collapsedBackgroundColor to you liking like this:

          title: Text('ExpansionTile 1'),
          backgroundColor: Colors.red,
          collapsedBackgroundColor: Colors.blue,
          subtitle: Text('Trailing expansion arrow icon'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 1')),

The docs:

Answered By – Er1

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *