flutter problem: How to change color of ExpansionTile?

Question

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 {
  @override
  State<StatefulWidget> createState() {
    return FAQPageState();
  }
}

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

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    isExpand = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff6f7f9),
      appBar: AppBar(
          leading: InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(
                Icons.arrow_back,
                color: Colors.black,
                size: tSize24,
              )),
          centerTitle: true,
          backgroundColor: Colors.white,
          title: Text(
            "FAQs",
            style: TextStyle(color: Colors.black, fontSize: tSize24),
          )),
      body: isFAQLoading == true
          ? ButtonSkeleton()
          : ListView.builder(
              itemCount: faqListData.length,
              itemBuilder: (context, index) {
                return Column(
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                            boxShadow: [
                              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()),
                              //attention
                              initiallyExpanded: index == selected,
                              iconColor: Colors.grey,
                              title: Text(
                                '${faqListData[index]['question']}',
                                style: TextStyle(
                                    color: Color(0xFF444444),
                                    fontSize: tSize14,
                                    fontWeight: FontWeight.w500),
                              ),
                              children: <Widget>[
                                Padding(
                                    padding: EdgeInsets.only(top: 10.0,bottom: 10,left: 17,right: 17),
                                    child: Row(mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                        Text(
                                          "${faqListData[index]['answer']}",
                                          style: TextStyle(
                                            color: Color(0xFF444444),
                                            fontSize: 13,
                                          ),
                                          textAlign: TextAlign.start,
                                        ),
                                      ],
                                    ))
                              ],
                              onExpansionChanged: ((newState) {
                                isExpand = newState;
                                print(newState);
                                if (newState)
                                  setState(() {
                                    Duration(seconds: 20000);
                                    selected = index;
                                    // isExpand=newState;
                                  });
                                else
                                  setState(() {
                                    selected = -1;
                                    // isExpand=newState;
                                  });
                                print(selected);
                              })),
                        ),
                      ),
                    ]);
              }),
    );
  }
}

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

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

Solution

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

ExpansionTile(
          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: https://api.flutter.dev/flutter/material/ExpansionTile-class.html

Comments

[Deepak]

What if I want to increase the size of the icon?

[Er1]

@Deepak set the trailing parameter like this trailing: Icon( tileIsExpanded ? Icons.arrow_drop_down_circle : Icons.arrow_drop_down, size: 60, ),