[24-02-28]TIL(Flutter Widget of the Week)

BJY·2024년 2월 28일
0

TIL

목록 보기
50/75

#1. SafeArea
기기들은 노치같은 것들이 있어 화면이 잘리는 경우가 많다.
이럴 경우에 SafeArea를 사용하면 손쉽게 해결이 된다.
앱을 화면에 맞춰서 해준다.
SafeArea로 감싸주자.
사용할 면적을 직접 정할수도 있다.

#2. Expanded
여러개 내용중에 하나만 골라서 넓게 하고싶다면?
Expanded를 사용하여 늘리자.
flex를 설정하여 공간 비율을 정할 수 있다.

#3. Wrap
Row, Column을 사용하면서 공간이 부족한 경우가 있다.
Wrap을 사용하면 공간부족을 해결가능하다.
direction을 사용하여 가로, 세로를 정할 수 있다.
wrap은 Button과 chip 사용시에 유용하다.

chip이란?
Material 기본제공 위젯으로 버튼형식에 텍스트와 함께 첨부하는 데이터 또는 아이콘.
라벨링을 하거나 숫자정보 등을 표시하기에 안성맞춤이다.

badge란?
카카오톡 앱같은 알림을 나타내기 위해 아이콘 위에 표시하는 이미지(?)

#4. AnimatedContainer
컨테이너에서 애니메이션 효과를 추가할 수 있음.
비명시적 애니메이터

#5. Opacity
투명도를 설정할 수 있다.

#6. FutureBuilder
FutureBuilder는 미래의 현황을 쉽게 결정하게 하고 정보를 불러올 때 그동안 무엇을 보여줄지 정함.

#7. FadeTransition
Fade in out을 할 수 있다.
애니메이션을 구현할 수도 있다.

#8. FloatingActionButton
우측 하단에 떠다니는 버튼을 말함.
보통 추가 + 버튼.
location을 설정할 수 있음.(중앙, 왼쪽, 오른쪽)

#9. PageView
페이지를 스와이프해서 나타낼 수 있다.

#10. Table
행과 열로 구성된 표 형태의 UI 요소를 나타내는 위젯.
데이터를 구조화하고 정렬된 방식으로 표시할 수 있음.

#11. SliverAppBar
앱이 스크롤 될 때마다 화려한 애니메이션 헤더를 만들 수 있음.

#12. SliverList & SLiverGrid
리스트뷰와 그리드뷰만 있다면 목록이나 항목 그리드를 개별적으로 스크롤 할 수 있다.
다른 복잡한 스크롤 효과를 사용하고 싶다면 SliverList 와 SliverGride를 사용하면 됨.

#13. FadeInImage
이미지를 다운로드 할 동안 다른 화면을 보여줌
시간도 설정가능 Ex)1second

#14. StreamBuilder
비동기 데이터 흐름을 처리하는 위젯.
데이터 스트림을 받아와서 스트림의 새로운 데이터를 받을 때 마다 화면을 업데이트함.
이를 통해 동적인 데이터를 가진 위젯을 구성할 수 있음.
주로 실시간 데이터베이스 업데이트, 사용자 인터페이스 입력 및 기타 비동기 이벤트를 처리할 때 사용됨.

https://www.youtube.com/watch?v=MkKEWHfy99Y&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=142&ab_channel=GoogleforDevelopers

profile
개발자입니다.

0개의 댓글