[TIL] 20241016_ Dart 객체 & 뷰와 레이아웃 그리기

ds-k.dev·2024년 10월 16일
0

TIL

목록 보기
2/26

객체

class [클래스명] {
		생성자()
    맴버변수//특성

    메서드(){
			//기능 
    }
}

각각의 객체는 고유한 속성과 기능을 가지고 있다.
자동차로 만들어보자


class Car {
  final String name;
  int age;
  final String brand;
  
  Car({
    required this.name,
     required this.age,
    required this.brand
  });
    
  void run() {
    print("${this.name}야 달려라 부릉부릉");
  }
  
  void addAge() {
    age++;
  }
  

인스턴스를 생성할때는 다른 언어처럼 new 키워드 없이도 가능하다.

void main() {
  var car = Car(name: "니로",age : 7, brand: "기아");
    
  print('제 차는 ${car.name}이고, ${car.brand}차이며, ${car.age}년식입니다.'); 	     // 제 차는 니로이고, 기아차이며, 7년식입니다.
  car.run(); // 니로야 달려라 부릉부릉
}

위젯

위젯을 만드는 방법 3가지

1. 플러터 기본 내장 위젯

. 공식문서

2. pub.dev

  • 펍데브

3. 직접 custom

  • 직접 만들어서 pub.dev에 공유 가능

StatefulWidget, StatelessWidget

StatelessWidget

  • immutable한 것이 특징 : 변화하는 상태를 다룰 필요가 없다.
  • 불변한 클래스기 때문에 예측 가능하기가 좋다.

StatefulWidget

  • 모양이나 동작을 변경할 수 있는 위젯
  • 데이터 변경이나 사용자 상호 작용이 있는 위젯

위젯의 라이프사이클

  • 위젯이 생성부터 삭제 및 종료되는 단계의 과정에서 발생되는 여러가지 이벤트들의 호출 순서

StatelessWidget의 라이프 사이클

Constructor -> Build() 끝!

StatefulWidget의 라이프 사이클

Constructor -> createState -> initState() -> didChangeDependencies
-> diduptateWidget()
-> setState()
Build()

자주 사용되는 뷰 위젯

1. PageView

  • 세로 스크롤 옵션(tiktok처럼)
  • 컨트롤러를 이용한 이동(controller 옵션을 이용하여)
  • pageSnapping(인스타그램처럼)
  • onPageChange - 페이지가 전환이 될때의 옵션을 정할 수 있다.

2. ListView

  • 당근마켓 같은 페이지
  • scrollDirection - 방향 전환
  • reverse - 반대로
  • controller - 스크롤 위치 변화 등
  • physics - 스크롤이 바운딩 될때, 최상단 혹은 최하단 등으로 갈때의 옵션 설정 가능
  • ios에서 BouncingScrollPhysics 하면 위에서 보옹 하는 것 같은 효과
  • cacheExtent - 특정 영역까지 미리 캐시하는 것, 다른 스크롤에 다녀와서도 캐시된 이미지 등을 사용할 수 있다. 퍼포먼스에 영향 최소단위 또는 안쓰는 것을 권장

3. GridView

  • 사진첩
  • SliverGridDelegateWithFixedCrossAxisCount - 사진첩처럼 격자를 손쉽게 만들수 있다.(crossAxisCount, maainAxisSpacing, crosAxisSpacing 등의 옵션이 있다.)
  • SliverGridDelegateWithMaxCrossAxisExtent - 화면 비율에 따른 대응이 필요한 경우, 확장 및 축소가 된다.
  • scrollDirection
  • reverse
  • controller

4. TapBar

  • 탭으로 좌우 전환하는 것
  • TapBar (상단), TapBarView (하단 뷰) 두개로 구성되어있다.
  • TabController는 late로 변수 선언 후 반드시 initState를 이용해 초기화해주어야 함
  • vsync : this / class에 with TickerProviderStateMixin(애니메이션 할때, 화면 싱크를 만들때 꼭 필요)

0개의 댓글