[단어장 앱 개발 일지] 26일째 : 플러터 단어 가려지는 UI 높이 맞추기 Stack과 TextPainter, 디자인 진행 사항

by



Today’s 해결할 문제

toggle 스위치를 켰을 때, meaning이 가려지는 과정에서 점이나 공백이 있으면 조금 작게 지워져서 오돌토돌하게 지워진다… 맙소사 🙄

오돌토돌쓰

전 포스트

[단어장 앱 개발 일지] 25일째 : Flutter 로컬 데이터 관리

1. UI 수정

​

1. Meaning의 오돌토돌한 부분을 지우려고 시도

  • Listile 함수 안 텍스트 상위 함수에 container를 넣으려고 했으나 container를 인식하지 못하는 문제 발생

​

​

2. Stack이라는 함수 따로 만들고 그 위에 덮어 씌우기로 결정

  • 원하는 대로는 구현되나, 텍스트 길이 인식 못 해서 width가 통째로 가려짐

3. TextPainter를 이용해서 텍스트 길이 측정

TextPainter tp = TextPainter(
                        text: span,
                        textDirection: TextDirection.ltr,
                      );

                      tp.layout(maxWidth: constraints.maxWidth);

4. 잘 작동되나 height가 너무 좁아서 오돌토돌쓰 좀 보일 때도 있음

그래서 좀 늘려줌

5. 너무 두꺼워서 적절하게 줄여줌

return Stack(
                        children: [
                          RichText(
                            text: span,
                          ),
                          if (_isToggled)
                            Container(
                              width: tp.size.width,
                              height: tp.size.height + 2,
                              color: Colors.purple[100],
                            ),
                        ],
                      );

최종 결과물

2. 디자인 진행사항

우리 승민 써니가 많이 고생해 줌. 덕분에 UI나 기능은 어느 정도 정리된 듯.

개발하면서 더 자세히 봐야 할 듯

할 일

  • 기능 추가
    • 단어장 보기 설정
    • 단어 편집 설정
    • 넘버링
    • 자동 추가 기능 구현
  • 다자인
  • 아이폰에 앱 저장하는 방법 알아보기

https://blog.naver.com/dmsgktn0523/223458352713

#앱개발 #플러터 #안드로이드스튜디오

Leave a Comment