ykw93 / flutter_planets Goto Github PK

• 플러터에서 각각의 화면을 Route라고 부르며 화면을 이동하기 위해서는 Navigator를 사용한다.
  (안드로이드가 화면 이동 시 액티비티들이 액티비티 스택에 쌓이는 것처럼 플러터도 Navigator 스택에 Route가 쌓이게 되고 push, pop을 통해 화면을 조작한다.)

• Container와 같이 별도의 제스쳐 기능을 제공하지 않는 위젯에 제스쳐 기능을 추가하고자 할 때 InkWell, GestureDetector 위젯을 Wrapping 하여 onTab, onDoubleTap, onLongPress 등 다양한 기능을 사용
  (InkWell을 사용하면 안드로이드에 있는 ripple effect 효과를 줄 수 있음)

-Hero 위젯은 화면 사이의 쉬운 애니메이션을 제공 (https://www.youtube.com/watch?v=Be9UH1kXFDw)

BoxFit에 대해

• BoxFit.contain : 가로세로 비율 변화 없음 (원본)
• BoxFit.fill : 지정한 영역을 꽉 채움. (비율 변경됨)
• BoxFit.fitWidth : 너비에 맞게 확대 또는 축소. 수평으로 크기가 지정되기 때문에 위아래 여백 발생 가능.
• BoxFit.fitHeight : 높이에 맞게 확대 또는 축소. 수직으로 크기가 지정되기 때문에 수평으로 여백 발생 가능.
• BoxFit.cover : 지정한 영역을 꽉 채움. (비율 유지)
• BoxFit.none : 원본으로부터 해당 영역 크기만큼 가운데를 출력. (기본 옵션, 원본 크기 유지)

Flutter Named Constructor 에 대해

class Player {
  String name;
  String color;

// basic Contructor
  Player({this.name, this.color});

// Named Constructor ex) 클래스명.name
// 콜론을 통해 각각 데이터를 직접 초기화
  Player.fromPlayer(Player another) : // 첫번째 사용법
        color = another.color,
        name = another.name;

  Player.fromPlayer(Player another) { // 두번째 사용법
    color = another.color;
    name = another.name;
  }
}

ListView 속성

• itemExtent: listview 안에 있는 아이템 행의 크기가 같다면 itemExtent 지정을 통해 높은 성능을 낼 수 있다.
  ex) itemExtent : 행의 높이 지정
  ListView 사용 시 주의점
• Column 안에 listview를 사용 시 ListView 높이를 측정할 수 없어 에러가 발생한다.
  해결방법은 ListView를 감싸고 있는 위젯에 지정된 높이를 주는 방법이 있지만 이건 디바이스 마다 높이가 다른 문제점이 있다 제일 쉬운 방법은 ListView를 Expanded 위젯으로 감싸서 해결!
• Expanded 위젯은 내부 위젯 크기를 계산 후 남은 공간을 모두 확보하므로 ListView에 적절한 크기를 부여 할 수 있다.

Sliver..

• Sliver에 대한 위젯은 CustomScrollView 내부에 배치해야 한다.

Sliver 종류

• SliverAppBar: used to create a collapsable material AppBar.
• SliverList: a linear list of items.
• SliverFixedExtentList: similar to the previous one, but for items with fixed height.
  (리스트 아이템의 크기가 같다면 사용)
• SliverToBoxAdapter: a sliver with a single child with a defined size.
• SliverPadding: a simple sliver that contains antoher Sliver and allows us to apply a padding.

참고

• https://sergiandreplace.com/planets-flutter-creating-a-list-of-planets/