class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  List<EmptyModel> myList = [
    EmptyModel(title: 'test 1', body: 'The Only All-In-One Text Messaging Service'),
    EmptyModel(title: 'test 2', body: 'Check out improved performance and new features for desktop developers'),
    EmptyModel(title: 'test 3', body: 'Flutter is an open source framework by Google for building beautiful,'),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
        ...myList.map((e) => ExpandableNotifier(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Card(
              clipBehavior: Clip.antiAlias,
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 100,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.orange,
                        shape: BoxShape.rectangle,
                      ),
                    ),
                  ),
                  ScrollOnExpand(
                    scrollOnExpand: true,
                    scrollOnCollapse: false,
                    child: ExpandablePanel(
                      theme: const ExpandableThemeData(
                        headerAlignment: ExpandablePanelHeaderAlignment.center,
                        tapBodyToCollapse: true,
                      ),
                      header: Padding(
                          padding: EdgeInsets.all(10),
                          child: Text(
                            e.title,
                            style: Theme.of(context).textTheme.bodyText2,
                          )),
                      collapsed: Text(
                        'Click Here',
                        softWrap: false,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                      expanded: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                              padding: EdgeInsets.only(bottom: 10),
                              child: Text(
                                e.body,
                                softWrap: true,
                                overflow: TextOverflow.fade,
                              )),
                        ],
                      ),
                      builder: (_, collapsed, expanded) {
                        return Padding(
                          padding: EdgeInsets.only(left: 10, right: 10, bottom: 10),
                          child: Expandable(
                            collapsed: collapsed,
                            expanded: expanded,
                            theme: const ExpandableThemeData(crossFadePoint: 0),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        )).toList(),

            buildCenter(),

          ],
        ),
      )
    );
  }

  Center buildCenter() {
    return Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ExpansionPanelList.radio(
              children: myList.map((e) => ExpansionPanelRadio(
                  value: e.title,
                  headerBuilder: (_,index)=> ListTile(
                    title: Text(e.title,style: const TextStyle(fontSize: 20,color: Colors.black),),
                  ),
                  body: ListTile(
                    title: Text(e.body,style: const TextStyle(fontSize: 15,color: Colors.black),),
                  )
              )).toList(),
            ),
          ),
        );
  }
}