앱에서 접혀진 메뉴를 구현하려면 ExpansionPanel 위젯을 사용할 수 있습니다. ExpansionPanel은 확장 가능한 패널을 생성하고 패널 헤더를 터치할 때 패널이 펼쳐질 수 있도록 합니다. 이제 Flutter에서 ExpansionPanel을 사용해 접혀진 메뉴 UI를 구현하는 방법을 알아보겠습니다.
ExpansionPanel 위젯
ExpansionPanel 위젯은 다음과 같은 속성을 갖습니다:
headerBuilder: 패널 헤더를 생성하기 위한 빌더 메서드로서, 패널의 헤더를 커스텀 위젯으로 만들 수 있습니다.body: 패널이 펼쳐질 때 표시되는 내용을 위한 위젯입니다.isExpanded: 패널이 확장되었는지 여부를 나타내는 boolean 값입니다.
ExpansionPanelList 위젯
ExpansionPanelList 위젯은 여러 개의 ExpansionPanel 위젯을 가지고 있는 위젯입니다. ExpansionPanelList는 ExpansionPanel 위젯들의 리스트로 이루어지며, 확장 가능한 메뉴를 표시하기 위해 사용됩니다.
ExpansionPanelList 위젯에는 ExpansionPanel 위젯을 포함한 리스트를 전달하는 children 속성이 있습니다.
접혀진 메뉴 UI 구현 예제
다음은 ExpansionPanelList를 사용하여 접혀진 메뉴 UI를 구현하는 예제 코드입니다:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Expansion Panel Example',
home: Scaffold(
appBar: AppBar(
title: Text('Expansion Panel Example'),
),
body: MyPanel(),
),
);
}
}
class Item {
Item({
required this.expandedValue,
required this.headerValue,
required this.isExpanded,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Panel $index',
expandedValue: 'This is item number $index',
isExpanded: false,
);
});
}
class MyPanel extends StatefulWidget {
@override
_MyPanelState createState() => _MyPanelState();
}
class _MyPanelState extends State<MyPanel> {
late List<Item> _data;
@override
void initState() {
super.initState();
_data = generateItems(5);
}
@override
Widget build(BuildContext context) {
return ListView(
children: _data.map<Widget>((Item item) {
return Container(
child: ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: EdgeInsets.all(0),
expansionCallback: (int index, bool isExpanded) {
setState(() {
item.isExpanded = !isExpanded;
});
},
children: [
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
tileColor: Colors.grey[200],
);
},
body: ListTile(
title: Text(item.expandedValue),
),
isExpanded: item.isExpanded,
),
],
),
);
}).toList(),
);
}
}
위 예제 코드에서는 MyPanel 클래스를 사용하여 ExpansionPanelList 위젯을 정의하고, Item 클래스를 사용하여 각 패널의 데이터를 관리합니다. generateItems 메서드는 Item 객체들을 생성하여 리스트로 반환합니다. ExpansionPanelList의 children 속성에는 ExpansionPanel이 포함되며, 패널의 헤더와 몸체를 생성하기 위한 빌더 메서드를 구현합니다.
이제 접혀진 메뉴 UI를 사용하는 위젯을 생성하고, 앱에서 해당 위젯을 표시하기 위해 Scaffold로 감싸줍니다.
이제 flutter run 명령어를 실행하여 앱을 실행하면 ExpansionPanel을 사용한 접혀진 메뉴 UI를 볼 수 있습니다.
접혀진 메뉴 UI를 구현하는 방법과 사용하는 예제에 대해 알아보았습니다. 이제 여러분은 Flutter에서 ExpansionPanel을 사용하여 접혀진 메뉴를 구현할 수 있습니다.