728x90
반응형
```text
Theme만드는 방법 -- *
[제작]
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(
backgroundColor: const Color(0xFFE7626C),
),
textTheme: const TextTheme(
displayLarge: TextStyle(
color: Color(0xFF232B55),
),
),
cardColor: const Color(0xFFF4EDDB);
),
);
[적용] Theme.of(context).
Text('something',
style: TextStyle(
color: Theme.of(context).cardColor,
),
),
Text('Pomodors',
style: TextStyle(
color: Theme.of(context).textTheme.displayLarge!.color,
),
),
```
```text
모든 것은 위젯으로 이루어져 있다 -- *
- StatelessWidget : 단순, build메서드만을 사용해서 UI만 그려주는 위젯
- SfatefulWidget : 데이터와 UI를 최신화, 상태를 가지고 있는 위젯
State에게 데이터가 변경되었다고 말해주어야 한다. <state>를 사용할 경우
setState : build메서드를 다시 실행시켜준다. 꼭 setState안에서 실행할 필요없다.
setState(() {}) 호출 자체가 build를 다시 하기 때문에 위젯 UI가 다시 그려지기 때문이다.
(Widget Lifecycle)!
initState : 부모 요소에 의존하는 데이터를 초기화하는 경우 사용함
한 번만 호출되며, build보다 먼저 호출되어야 함
dispose : 위젯이 화면에 나타나지 않으면 호출되는 오버라이드 함수이다.
- Scaffold : 구조를 잡아주는 위젯, screen을 위한 기본적인 레이아웃과 설정을 제공함
backgroundColor
Colors // 시스템 색상
Color(0xFF181818) // 커스텀 새상
Color.fromARGB(255, 18, 18, 18)
Color.fromRGBO(18,18, 18, 1) // 투명도를 함께
- AppBar : 상단의 앱바
elevation : 음영 효과
centerTitle : 글자 정렬
- Column, Row : 수직, 수평 방향의 위젯
mainAxisAlignment : 수평인 경우 좌우 정렬(방향 기준)
crossAxisAlignment : 수직인 경우 좌우 정렬(방향 기준)
- Padding : 내부 여백을 주는 위젯
EdgeInsets : 여백 크기 지정
.all : 전체
.only : 한 가지 방향
.symmetric : 수직(vertical:20), 수평(horizontal:30)
- SizedBox : 크기를 갖고 있는 박스 위젯
- Text : 글을 넣을 수 있는 위젯
style :
TextStyle
color : 글자 색상
.withOpacity : 불투명 주기 (default:1)
fontSize : 글자 크기
fontWeight : 글자 굵기
FontWeight.w600
- Container : div같은 child를 가지고 있는 단순 box 위젯
decoration: 꾸며주기
BoxDecoration : 박스로 꾸밈
color : 박스 색상
borderRadius : 박스 주위 라운딩
BorderRadius.circular~
boxShadow : shadow 그림자 넣기
BoxShadow(
blurRadius:5 - 그림자가 얼마나 멀리까지 갈지~?
offset: Offset(0, 0) - 그림자 위치
color :
)
clipBehavior : Container외의 영역을 없앨 수 있음, #엣지
Clip.hardEdge : 외부 영역을 잘라냄
- Center
- Transform : 위젯의 크기를 설정해주는...?, 부모 위젯에 영향을 주지 않음 ***
.scale : 크기
child : 위젯 넣기 - 근데 위젯만 넣으면 에러발생, scale을 꼭 넣어주어야 함
scale : 배수, 5를 넣으면 5배수
.translate : 위젯을 움직임, 위젯으로 덥고 싶거나 움직이고 싶은 경우 움직인다.
offset : 위젯을 x, y축 방향으로 움직이게 함
Offset()
- SingleChildScrollView : 스크롤할 수 있게 해주는 위젯
- IconButton : 아이콘을 클릭할 수 있는 위젯
Icon(Icons.something)
onPressed
- ElevatedButton :
- Flexible : 픽셀을 딱 지정해주는 것이 아니라, UI를 비율에 기반해서 더 유연하게 만들 수 있게 해준다.
flex : 1, 2, .. 비율을 지정해줌 (default:1)
-* Expanded : 꽉 채워주는 위젯mak
- FutureBuilder : builder는 UI를 그려주는 함수이다. 즉 Future데이터를 기다렸다가 그려주는 역할
future : Future값을 기다림
builder : (context, snapshot) {}
snapshot : future가 데이터를 받았는지 아니면 오류가 났는지 알 수 있음
.hasData
if (snapshot.hasData) {
return const Text('There is data!');
} else {
return const Text('Loading...');
- CircularProgressIndicator : 프로그레스바
- ListView : 목록을 보여줄 때 Column, Row를 사용하기 보다 ListView를 사용하는 것이 유용하다.
if (snapshot.hasData) {
return ListView(
children: [
for (var webtoon in snapshot.data!)
Text(webtoon.title)
],
);
}
// requiredㅏ라메터를 충족시키라~
- ListView.builder : RecyclerView같은 ListView이다
scrollDirection : 방향
Axis.horizontal
itemCoumt : 아이템 개수
itemBuilder: (context, index) { : 사용자에게 보이는 부분만 build해서 메모리를 아낄 수 있음
var webtoon = snapshot.data![index];
},
- ListView.separated : builder와 동일하지만 separaterBuilder라는 인자를 더 가진다.
separatorBuilder로 만들어진 위젯은 아이템 사이에 만들어진다. 보통 SizedBox를 넣어서 글자 사이를 띄어준다.
padding: EdgeInsets.
- ScrollConfiguration : 마우스로 ListView 스크롤이 가능하게 해주는 위젯
behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {PointerDeviceKind.mouse})
또는.
main.dart에서 MaterialApp(
scrollBehavior: const MaterialScrollBehavior().copyWith(dragDevices: {PointerDeviceKind.mouse}),
- Image : 이미지 위젯 - 이미지가 로드가 안되는 경우 index.html에 >> engineInitializer.initializeEngine({renderer:"html"}) << 추가
Image.network
- GestureDetector : 이벤트 발생하기 위한 위젯
- Navigator : 다른 위젯을 띄어주는 것(화면 이동), StatefulWidget만 띄어줌
.route를 푸시한다.
.push(context, MaterialPageRoute());
MaterialPageRoute는 StatelessWidget을 route로 감싼다
새롭게 보여질 위젯은 새롭게 Scaffold로 구조해주어야 한다.
[다음 페이지를 다른 영역에서 불러오고 싶은 경우]
fullscreenDialog..? true로 주면 되는것 같은데 뭔가 별로이다~
- Hero : 애니메이션 포스터인 것 같은 느낌
- 해당되는 위젯을 Hero로 감싼 뒤 동일한 tag명을 주면 됨
```
```text
const는 compile하기 이전에 알고 있는 데이터이다.
이전에 알고 있는 데이터이기 때문에 커스터 마이징한 Widget같은 경우에는
내부에 const를 사용해서 UI를 정의할 수 없다.
const를 사용하게 되면 에러가 발생한다.
다시, const는 이미 정해진 값들인 경우에 사용하는 것
const는 opacity값을 알기 힘듦 그래서 opacity를 사용하게 되는
UI에서는 const를 사용하면 에러가 발생하게 됨
border Radius도 마찬가지.. 뭔가 일정 값을 매겨주는 곳에 사용하면 안될 것 같다.
위젯 내부에서 함수에 ()괄호를 붙이지 않는 것은
()괄호는 지금 실행을 의미하기 때문이다.
```
```text
Row
수평 -> Main
수직 -> Cross
Column
수평 -> Cross
수직 -> Main
```
```text
Timer + import 'dart:async';
Timer.periodic(Duration(seconds:1), (timer) {})
```
```text
supser.key라는 것은 부모 뷰에게 해당 위젯의 key를 보내는 것?이다
위젯은 ID식별자 역할을 하기 때문에 key를 가지고 있다.
위젯은 본인을 식별할 key를 가지고 있고, ID처럼 쓰인다는 것 --> Flutter는 위젯을 식별하기 위해 ID를 사용함
```
```text
[외부 라이브러리]
pub.dev -> Dart,Flutter
[라이브러리 추가 방법]
pubspec.yaml
```
디바이스 크기 : MediaQuery.of(context).size. width or height
728x90
반응형
'dev > flutter' 카테고리의 다른 글
[Flutter] Timer만들기 (0) | 2023.12.08 |
---|---|
[Flutter] ElevatedButton 배경 색상 넣기 (0) | 2023.12.08 |
[Flutter] 5. 기능 추가 (0) | 2023.11.23 |
[Flutter] 4. 위젯 수정 (0) | 2023.11.23 |
[Flutter] 3. 버튼 만들기 (0) | 2023.11.23 |