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

CodePudding user response：

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

CodePudding user response：

///you can set background colour and ExpansionTile has trailing property you can use it for the icon you can use material icons also and increase your icon size accordingly in icon widget 

    import 'package:flutter/material.dart';
    
    class X extends StatefulWidget {
      const X({Key? key}) : super(key: key);
    
      @override
      _XState createState() => _XState();
    }
    
    class _XState extends State<X> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: ExpansionTile(
            backgroundColor: Colors.grey[100],
            initiallyExpanded: true,
            trailing: Icon(Icons.keyboard_arrow_down_sharp),
            iconColor: Colors.grey,
            subtitle: Text(
              "subtitle",
              style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.normal
              ),
            ),
            title: Text(
              "Simple expansion tile",
              style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold
              ),
            ),
            children: [
    
              ListTile(
                title: Text(
                  'body',
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.normal
                  ),
                ),
              )
            ],
          ),
        );
      }
    }