[ Flutter ] ExpansionTile로 숨김 / 드러내기 기능 구현해보기!

 안녕하세요 이번 포스팅에서는 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와 같은 맥락입니다.

---

읽어주셔서 감사합니다. 질문이 있다면 언제든 남겨주세요 :)