شرح كيفية عمل ExpansionPanelList في Flutter

احيانا عند تطوير تطبيق خاص بك تحتاج الى اضافة الى قائمه منسدله في التطبيق ولكن القائمه تكون عباره عن عنوان خاص بها وعند النقر عليها يتم عرضها بشكل كامل كما هو موضح بالصورة الخاصه بالمقال وعند النقر عليها مره اخرى يتم اخفاء جزء منها ويبقى العنوان فقط ولهذا سوف نساعدكم في تنفيذ هذه العمليه عن طريق اشكال مختلفه سواء باستخدام مكتبة او بدون استخدام اي مكتبات تماما وذلك ما سوف نشاهده في الشرح التالي للاضافة وكيفية تنفيذها بسهوله .

غالبًا ما تكون لغة Dart من Google هي الجانب الأكثر إثارة للخلاف وتميزًا في النظام الأساسي ، حيث تمثل عيبًا كبيرًا وفائدة ملحوظة لتطوير Flutter. Dart هي لغة أنشأتها Google لأول مرة في عام 2011 للاستخدام الداخلي. لكن اللغة لم تكتسب أي شكل من أشكال الشعبية لدى عامة الناس حتى ظهور Flutter. إنها الآن لغة تتوسع ببطء وبطء. اكتشف العديد من المطورين الذين يتعلمون Dart أنها تمثل تحديًا أقل جوهرية مما توقعوا. إنها تقنية سهلة التبديل من برمجة الويب أو JavaScript لأنها تم تطويرها بشكل أساسي خصيصًا للتطوير متعدد المنصات وتم تأسيسها على مبادئ وتقنيات اللغات ذات الصلة. فوائد كبيرة تأتي مع دعم جوجل.

add package

dependencies:
expandable: ^5.0.1

How to use Expansion Panel List in Flutter

في المثال الاول قمنا بعمل 3 عناصر باستخدام المكتبة الموجوده بالاعلى وكما نلاحظ انه يمكنك تخصيص ال list سواء اظهار النص مع القطعه او اخفاء النص بمجرد ظهور القصة كما هو موضح , وايضا في المثال التالي قمنا بعمل 3 عناصر مختلفه ولكن بدون اي مكتبات وعند عرض اي نص منهم يتم اخفاء باقي العناصر كما هو موضح في الصورة الخاصه بالمقال والامر بسيط جدا يمكنك استخدامها وتجربتها في تطبيقك بكل سهوله .

ui.dart

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(),
            ),
          ),
        );
  }
}