반응형
안녕하세요 이번 포스팅에서는 Flutter의 ExpansionTile로 우리가 평소 여러 앱에서 보던 정보 숨기기 / 드러내기 기능을 구현해보도록 하겠습니다.
ExpansionTile
우선 코드부터 보시겠습니다.
ExpansionTile(
title: new Text('기본 정보',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: screenWidth*(16 /360),
color: Colors.black
),
),
initiallyExpanded: true,
backgroundColor: Colors.white,
children: <Widget>[
Divider(height: 3,color: OptionDivideLineColor,),
Container(
height: screenHeight*0.05,
width: screenWidth,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: screenWidth*0.0444444),
child: Row(
children: [
SizedBox(
width: screenWidth*0.24444,
child: Text('기존 월세',
style: TextStyle(
color: hexToColor("#888888"),
fontSize: screenWidth*OptionFontSize,
),),
),
Text('234만원',
style: TextStyle(
color: Colors.black,
fontSize:screenWidth*OptionFontSize,
),),
],
),
),
),
Divider(height: 3,color: OptionDivideLineColor,),
Container(
height: screenHeight*0.05,
width: screenWidth,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: screenWidth*0.0444444),
child: Row(
children: [
SizedBox(
width: screenWidth*0.24444,
child: Text('기존 보증금',
style: TextStyle(
color: hexToColor("#888888"),
fontSize: screenWidth*OptionFontSize,
),),
),
Text('234만원',
style: TextStyle(
color: Colors.black,
fontSize:screenWidth*OptionFontSize,
),),
],
),
),
),
Divider(height: 3,color: OptionDivideLineColor,),
Container(
height: screenHeight*0.05,
width: screenWidth,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: screenWidth*0.0444444),
child: Row(
children: [
SizedBox(
width: screenWidth*0.24444,
child: Text('평균 공과금',
style: TextStyle(
color: hexToColor("#888888"),
fontSize: screenWidth*OptionFontSize,
),),
),
Text('234만원',
style: TextStyle(
color: Colors.black,
fontSize:screenWidth*OptionFontSize,
),),
],
),
),
),
]
),
코드를 실행한 결과입니다.
Option
이제 여러 옵션에 대해 알아보겠습니다.
- backgroundColor : ExpansionTile의 기본 색깔을 결정합니다.
- children [] : 펼쳤을 때 보이는 부분입니다. Container 등 자유롭게 넣으시면 됩니다. 일반적으로는 ListView는 많이 넣습니다.
- title : ExpansionTile의 제목입니다.
- initiallyExpanded : true로 설정 시 처음 들어왔을 때, 펼쳐져있습니다.
- onExpansionChanged : 펼쳐지거나 접혀지는 이벤트가 발생 시 실행할 액션을 담습니다. onTap이나 onPressed와 같은 맥락입니다.
읽어주셔서 감사합니다. 질문이 있다면 언제든 남겨주세요 :)
반응형
'개발 > Flutter' 카테고리의 다른 글
[ Flutter ] Google Map 현재 위치로 이동하는 버튼 만들기 (0) | 2021.02.26 |
---|---|
[ Flutter ] TextField의 prefixIcon 사이즈 내맘대로 조절하기 (0) | 2021.02.25 |
[ Flutter ] File Image 렌더링하기 (0) | 2021.01.06 |
[ Flutter ] 갤러리 혹은 카메라에서 사진 가져오기 (0) | 2021.01.06 |
[Flutter] 앱 개발 입문자가 Flutter를 선택한 4가지 이유 (0) | 2020.09.27 |