[flutter] ExpansionPanel 위젯의 키보드 이벤트 처리 방법
목차
소개
Flutter는 크로스 플랫폼 모바일 앱을 개발하기 위한 인기있는 프레임워크입니다. ExpansionPanel 위젯은 사용자에게 일련의 펼침 패널을 표시할 수 있는 강력한 UI 요소입니다. 하지만 ExpansionPanel 위젯은 키보드 이벤트를 처리하는 데 일부 문제가 있을 수 있습니다.
문제 상황
ExpansionPanel 위젯은 기본적으로 위아래로 스크롤 가능한 목록으로 구성되어 있습니다. 하지만 키보드가 나타날 때 ExpansionPanel이 키보드에 가려져서 사용자가 내용을 볼 수 없는 문제가 발생할 수 있습니다.
해결 방법
ExpansionPanel 위젯의 키보드 이벤트를 처리하기 위해 SingleChildScrollView를 사용하여 입력 항목이 키보드에 가려지지 않도록 해야 합니다. SingleChildScrollView는 자식 위젯을 스크롤 가능한 단일 위젯으로 래핑하는 데 사용됩니다.
예제 코드
import 'package:flutter/material.dart';
class MyExpansionPanel extends StatefulWidget {
@override
_MyExpansionPanelState createState() => _MyExpansionPanelState();
}
class _MyExpansionPanelState extends State<MyExpansionPanel> {
List<Item> _items = <Item>[
Item(headerValue: 'Header 1', expandedValue: 'Expanded Value 1'),
Item(headerValue: 'Header 2', expandedValue: 'Expanded Value 2'),
Item(headerValue: 'Header 3', expandedValue: 'Expanded Value 3'),
];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_items[index].isExpanded = !isExpanded;
});
},
children: _items.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
),
isExpanded: item.isExpanded,
);
}).toList(),
),
);
}
}
class Item {
Item({
required this.expandedValue,
required this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}