자주쓰며 기본이 되는 내용 정리 페이지
프로젝트의 시작은 lib/main.dart로 시작한다.
초기 build까지의 필수 공통사항은
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(),
);
}
build(){ } : 위젯 또는 중첩된 위젯 트리를 반환해야 한다.
MaterialApp() : 생성자 함수이며 위젯이다.
Widget
뷰를 그릴때 필요한 단위
- 우리가 사용하는건 생성자 함수이며 class에 기반해 개체를 생성한다. 그렇기에 위젯도 class다.
그래서 우리가 컴포넌트 분리로 직접 만드는것도 위젯이며 class인것이다.- 앱 자체도위젯이고 컴포넌트도 위젯이라 불릴 수 있고
눈에보이지 않는 padding이나 column, center 등과 같은 Flutter 앱을 빌드할 때 사용되는 요소.
- LayoutBuilder(builder: (context, constraints) {})
- builder콜백은 제약 조건이 변경될 때마다 호출 (ex. 앱의 창 크기 조절, 세로모드에서 가로모드로 회전 등), 반응형!
- constraints :
BoxConstraints(w=866.0, h=494.0)컨테이너에 대한 값을 가지고 있기 때문에constraints.maxWidth >= 600이런식으로 사용 가능
- scaffold() : AppBar, 기본 배너, 배경색을 제공 등 기본 구조를 위한 클랙스 API 제공하는 유용한 위젯
- safeArea() : child에 들어가는 위젯을 하드웨어 노치나 상태 표시줄로 가려지지 않도록 해줌
- NavigationRail() : 메뉴바를 쉽게 만들 수 있다.
- extended: boolean으로 메뉴의 label을 보여주었다 말았다를 정할 수 있다.
- selectedIndex: 현재 선택된 메뉴의 Index
- onDestinationSelected: 메뉴 클릭 시 처리할 콜백, 인자로 index를 준다.
- NavigationRailDestination() : 메뉴바의 메뉴 한개에 대한 요소라고 생각하면 될듯. icon과 label로 구성
- Expanded() : css의 Flex-grow 느낌으로 (페이지 전체 - 지정된 영역) 후 나머지 남는 영역을 꽉채워서 표현 가능
- Placeholder() : 영역 자리잡기 확인용으로 임시로 사용
- button : 잘 쓰는 버튼 3가지만 정리 해보면
- ElevatedButton() : 클릭시 버튼 내에 그림자같은 효과가 적용
class(위젯) 생성 시 참고
- key 설정 두가지 방법
class GradientContiner extends StatelessWidget{
// 풀어쓰기 : 생성자함수 뒤에 콜론(:)을 추가하고 그 후에 변수 초기화를 할 수 있다.
// super()키워드를 통해 상속받은 부모 클래스(StatelessWidget)에 접근할 수 있다.
// 부모의 key를 받아서 넣어준다.
const GradientContainer({key}): super(key: key);
// 간단하게 : 위와 동일한 내용을 다트에서 간단하게 사용할 수 있도록 도와준다.
const GradientConntainer({super.key})
...
}위젯 속성
- mainAxisSize : row/column 같이 레이아웃 위젯의 범위(?)
- gradirent : 그라데이션 컬러와 시작과 끝점을 정할 수 있다
gradient: LinearGradient( colors: [ Color.fromARGB(255, 48, 79, 255), Color.fromARGB(255, 34, 255, 233) ], begin: Alignment.topLeft, end: Alignment.bottomRight, ),
StatelessWidget
상태가 없는 위젯
- 레이아웃처럼 어떠한 공유 값(context state)에 의해서 변경되거나 하는 뷰가 아닌, 고정된 뷰일때 사용
StatefulWidget
상태가 있는 위젯
- setState() : ChangeNotifier의 notifyListeners()와 같은 역할을 한다. 상태를 변경하여 UI를 업데이트
ChangeNotifier
상태관리를 위해 사용하는 클래스
- notifyListeners() : ChangeNotifier 클래스의 메서드이며, 상태가 변경될 때 리스너들에게 변경 사항을 알리기 위해 사용(UI를 업데이트)
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
// ChangeNotifier를 상속받아 count 상태를 관리Dart에서는 변수나 메서드 이름 앞에 언더바(_)를 붙이는 것만으로도 해당 변수나 메서드가 프라이빗(private)으로 처리된다.
위의 예시로 보면 _count는 클래스 외부에서 직접 접근 불가하지만, getter나 메서드를 통해서 _count를 가져오거나 변경할 수 있다.
변수
- var : 초기 값 지정 이후에 수정될 수 있을 경우
- final : 초기 값 지정 이후에 값 수정 불가능, 런 타임에서 상수를 정의
- const : 초기 값 지정 이후에 값 수정 불가능, 컴파일 타임에서 상수를 정의(상수변수나, 상수 데이터를 넣을 때 사용 가능)
final과 const의 차이점이라고 하면, 언제 정의를 하느냐인데 그렇다면 어떨때 사용..? 최 적 화 !
- const의 경우 특정 화면이 리렌더링 된다고 했을 경우 항상 같은 내용을 표시 (리스트 추가 불가능)
- final의 경우 특정 화면이 리렌더링 된다고 했을 경우 현재의 내용을 표시 (리스트의 경우 추가 가능)
const로 지정된 위젯 안에서는 const변수를 사용할 수 있다.
이미 위젯이 고정일거라고 명시되어있기때문에.
공부하며 정리&기록하는 ._. 씅로그
Front-end