Transform.translate(offset: Offset(0, 50), child: Text("ㅁㄴㅇ")),플러터 위젯 기존위치 상관없이 위치 바꾸기
IgnorePointer
보이게는 하고 누르는건 부모꺼처럼 적용되게 (무시됨)
main까지 페이지 날리면서 이동
Navigator.pushNamedAndRemoveUntil(context, "/record", ModalRoute.withName('/main'));InteractiveViewer(
clipBehavior: Clip.none,
확대하면 자기 영역 밖으로 나갈수있게
double screenHeight = MediaQuery.of(context).size.height;
double statusBarHeight = MediaQuery.of(context).padding.top; // 상태바 높이
double appBarHeight = kToolbarHeight; // AppBar의 기본 높이
double bottomNavigationBarHeight = kBottomNavigationBarHeight; // 바텀네비게이션바 기본 높이
https://ninetynine-2026.tistory.com/818
아이콘
위젯
Widget
https://docs.flutter.dev/reference/widgets
SafeArea
폰 최상단 상태표시줄이나 최하단이나 등등 못쓰는 부분 자동으로 제외시키기
상태표시줄에만 할떄도 있음
SizedBox 간격 벌리기
Align 위치정하기
Column 세로배치
SingleChildScrollView로 Column 감싸면 스크롤 가능해짐(정확히 높이를 알아야함)
ListView 화면길이보다 더길면 스크롤
Row 가로배치
Row 크기 최대한 좁게 (자식크기만큼만) 잡히게 하려면
mainAxisSize: MainAxisSize.min,
Wrap 공간 부족하면 밑으로 내려가서 나옴
warp 아니니까 주의
가로배치 스크롤
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(...)Container
자식이 없으면 최대한 크게 잡히고
자식이 있으면 자식 크기에 맞게 조정됨
무조건 부모 제약조건에 따라서 자식 따라감
부모의 Constrain
constraints: BoxConstraints(
minWidth: double.infinity,
maxWidth: double.infinity,,
minHeight: double.infinity,
maxHeight: double.infinity,
)
때문에 자식 크기 변경이 안되면
자식을 다른 걸로 감싸자 (Align이 좋음 배치하는 위치도 정할 수 있고)
Expanded 남은공간차지
자식 크기 지정한건 무시하고 남은공간 차지함
flexible 에서 flex 한명에게만 준거랑 똑같음
컬럼이나 로우의 자식을 Flexible 로 감싸고
flex 속성으로 각 자식별 비율 설정가능
Spacer
MainAxisAlignment.spaceEvenly 이런거 사이의 공간을 직접 하나하나 설정한다고 생각하면 됨
버튼 기본패딩 없애기
style: ElevatedButton.styleFrom(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: Size.zero,
위젯 겹치기
Stack + Positioned
// Text 밑줄
TextStyle(decoration: TextDecoration.lineThrough, decorationThickness: 3)텍스트 한줄에 다른색깔,크기 RichText
RichText(
text: TextSpan(
children: [
TextSpan(text: "review", style: TextStyle(color: Colors.black)),
TextSpan(text: "(26)", style: TextStyle(color: Colors.blue)),
],
),
)Image.asset
Image.network
BoxFit.cover : 비율 맞춰서 꽉채움. 가장자리쪽 잘릴 수 있음
fill : 잘리는 부분은 없지만 왜곡시키면서 꽉채움
contain : 꽉 안채우고 비율대로만 채우고 나머지는 안채움
ClipRRect 사각형 보더를 둥글게
ClipRect 사각형 내부를 잘라내는데 사용
AspectRatio 지정한 비율로 이미지
CircularProgressIndicator 로딩중 뻉글뺑글 도는거
버튼
InkWell 로 감싸면 다 버튼 됨
button검색 https://docs.flutter.dev/reference/widgets
ElevatedButton
OutlinedButton
// 버튼 패딩 0으로 줘도 높이 최소값 있는거 없애려면
const ButtonStyle(
minimumSize: MaterialStatePropertyAll(Size.zero),
padding: MaterialStatePropertyAll(EdgeInsets.symmetric(vertical: 5, horizontal: 10)))아이콘 버튼 https://api.flutter.dev/flutter/material/IconButton-class.html
드롭다운 버튼 https://api.flutter.dev/flutter/material/DropdownButton-class.html
0:00:00 - Intro
0:00:07 - AppBar
0:02:14 - Backdrop Filter
0:05:24 - Snackbar
0:07:24 - Badge
0:09:12 - Expanded
0:10:58 - Flexible
0:13:06 - Opacity
0:13:55 - Spread Operator
0:16:42 - FittedBox
0:18:16 - Test Shadow
0:19:39 - Text Overflow
0:21:04 - Scaffold
0:22:42 - Font Awesome Icon
0:23:46 - If null operator
0:25:04 - Date Format
0:27:46 - Shimmer
0:30:27 - Decorated box transition
0:32:22 - Wrap
0:32:52 - Safe area
0:33:26 - Animated crossfade
0:34:57 - Animated container
0:35:44 - Animated positioned
0:36:43 - Slide transition
0:38:32 - Ink well
0:39:06 - Ignore pointer
0:39:45 - Hero 페이지 이동할떄 똑같은 사진 있으면 연결되게 애니메이션 효과
0:42:23- Positioned transition
0:44:30 - Interactive viewer
Backdrop Filter
이미지 블러처리
stack으로 겹쳐서
FittedBox
자식 크기 무시하고 부모 사이즈에 맞춰줄때
유용함
https://blog.terry1213.com/flutter/flutter-adjusting-the-content-size-according-to-the-space/
Opacity
투명도
배경
Text
Shadow 배경에 묻혀서 잘 안보일때
overflow ellipsis 길이제한 넘어가면 ...으로
maxlines
textScaleFactor (1.0) 사용자가 기기의 설정으로 폰트의 크기 바꿔도, 기본 폰트 크기로 표시
전체적용 https://deku.posstree.com/ko/flutter/widget/textScaleFactor/
패키지
Font Awesome Icon
아이콘 많음
https://fontawesome.com/icons
intl
메시지 번역, 복수형 및 성별, 날짜 숫자 형식 지정 및 구문 분석, 양방향 텍스트를 포함한 국제화 및 현지화 기능을 제공합니다.
https://velog.io/@tmdgks2222/Flutter-intl
Shimmer
특정상황(로딩중이나)에서 빛나는 효과
https://www.youtube.com/watch?v=a8rnH7EFcPA&ab_channel=TheFlutterWay
border 둥글게 할때 보더라디우스로 일일히 안하고
shape: CircleBorder()
shape: StadiumBorder()
https://www.youtube.com/watch?v=M9J-JJOuyE0&ab_channel=FlutterMapp
Visibillity
조건에 따라 없는거처럼 작용하게
(투명하게 하거나 하는거랑 달리 공간도 차지하지 않음)
Tooltip
이미지같은거 누르면 힌트줄때
InteractiveViewer
이미지나 위젯 화면에 다 안들어갈때 줌인줌아웃
https://youtu.be/zrn7V3bMJvg
https://www.youtube.com/watch?v=5vDq5DXXxss&ab_channel=FlutterMapp
Scaffold
extendBodyBehindAppBar : true
바디가 앱바에 겹쳐서 나오게 가능 (앱바 투명으로 하고 배경사진 보이게 하기 좋음)
SafeArea
상태표시줄 침범 안하게
OverflowBox
부모크기 무시하고 크기늘어남
resizeToAvoidBottomInset
키보드 오버플로우 해결
리스트뷰
ListView 또는 SingleChildScrollView 안에 또 다른 vertical Listview가 있을 때 스크롤 막기
Expanded로 감싸기
physics: const NeverScrollableScrollPhysics(), // 1번 방법
primary: false // 2번 방법
shrinkWrap: true
필요한 공간만큼만 차지하게
physics : AlwaysScrollableScrollPhysics
스크롤 없어도 화면 위로 당겨서 새로고침 가능하게 하려면
드롭다운
DropdownButton, PopupMenuButton
https://mike123789-dev.tistory.com/entry/%ED%94%8C%EB%9F%AC%ED%84%B0-20-%EB%B2%84%ED%8A%BC-2-ToggleButtons-DropdownButton-PopupMenuButton
https://www.youtube.com/watch?v=L3NJkkOC4Ko&t=431s&ab_channel=HeyFlutter%E2%80%A4com
페이징
검색
정렬
Form에 key
final _formKey = GlobalKey<FormState>();주고나서 빌드될때마다 화면 최상단으로 스크롤되면
폼키 선언 클래스에서
바텀시트
showModalBottomSheet
위쪽 둥글게
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
)height 높이제한 제한보다 길게 하려면
isScrollControlled: true,키보드 오버플로우 막으려면
// builder: (BuildContext context) {
return Container{
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
SingleChildScrollView로 Container의 child인 Column 감싸기