Flutter でAccordionを追加する方法

今回は、Flutterで展開・折りたたみ可能なAccordionを追加する方法を共有します。

方法 – 1

ExpansionTile()を使用する

            ExpansionTile(
              title: const Text("If you could live anywhere, where would it be? "),
              children: [
                Container(
                  color: Colors.black12,
                  padding:const EdgeInsets.all(20),
                  width: double.infinity,
                  child:  const Text("Answers for Question One"),
                )
              ],
            ),

ExpansionTileを使うと、Flutterで展開可能なAccordionや折りたたみ可能なAccordionを作ることができます。また、以下のように背景色を変更することができます。

            Card(
                color: Colors.blue[100],
                child:ExpansionTile(
                  title: const Text("What is your biggest fear?"),

                  children: [
                    Container(
                      color: Colors.black12,
                      padding:const EdgeInsets.all(20),
                      width: double.infinity,
                      child:  const Text("Answers for Question Two"),
                    )
                  ],
                )
            ),

方法 – 2

ExpansionPanelListとExpansionPanelを使用する

ExapnasionPanelの拡張状態リストを設定

List<bool> expanded = [false, true];

例の為、ExpansionPanelListの中にパネル2を作成し、最後のExapnasionPanelを展開するようにしたいので、trueに設定していきます。

ExpansionPanelList(
                expansionCallback: (panelIndex, isExpanded) {
                  setState(() {
                    expanded[panelIndex] = !isExpanded;
                  });
                },
                animationDuration: const Duration(seconds: 2),
                children:[
                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return const Padding(
                            padding: EdgeInsets.all(15),
                            child:Text("What motivates you to work hard?")
                        );
                      },
                      body: Container(
                        padding: const EdgeInsets.all(20),
                        color: Colors.redAccent[100],
                        width: double.infinity,
                        child: const Text("Answers for Question Three"),
                      ),
                      isExpanded: expanded[0]
                  ),

                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return const Padding(
                            padding: EdgeInsets.all(15),
                            child:Text("What did you want to be when you were small?")
                        );
                      },
                      body: Container(
                        padding: const EdgeInsets.all(20),
                        color: Colors.blueAccent[100],
                        width: double.infinity,
                        child: const Text("Answers for Question Four"),
                      ),
                      isExpanded: expanded[1]
                  )
                ]
            )

ということで、今回はこれで終わります。

金曜担当 – Ami