Flutter でAccordionを追加する方法
- 2022年10月01日
- 技術情報
今回は、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
asahi at 2022年10月01日 10:00:00