'Flutter'에 해당되는 글 7건

애니메이션 효과를 이용해서 유저가 다른 페이지로 왔다고 느끼게 해줄 수 있음.

사실은 또 다른 StatelessWidget을 렌더했을 뿐인데.

fullscreenDialog: true, 하면 아래에서

두 화면 사이에 애니메이션을 주는 컴포넌트.

tag를 id에 걸어주면, (unique한 걸로 걸어줘야 함)

thumb을 눌렀을 때, 다음화면으로 넘어가는 애니메이션이

thumb이 다시 만들어지는 것이 아니라,

하나의 thumb이 움직이면서 열린다.

webtoon_widget.dart 에서 사진(thumb)을 눌렀을 때,

detail_screen.dart가 열릴 때, 화면 전환 애니메이션을 Hero 가 한다.

사진(thumb)가 이어진다.

탭, 마우스 이동, 드래그, 줌 등을 감지할 수 있음.

화면 전환의 모든 애니메이션을 생성하는 녀석

사실 새로운 widget을 띄우고 있을 뿐.

webtoon property를 초기화할 때, 다른 property인 id에 대한 접근이 불가하다.

왜냐면 statelesswidget에 처음 하는건

class의 member들을 define하고 초기화하는 것 뿐

그래서 이렇게 어떤 property를 초기화할 때 다른 property로 접근할 수 없다.

그래서 이걸 하려면 약간 다르게 접근해야 한다.

우선, statelesswidget을 statefulwidget으로 바꾼다.

사용자가 thumb(사진)을 누르면 Navigator.push → MaterialPageRoute → DetailScreen에 title, thumb, id를 보낸다.

DetailScreen은 StatefulWidget이다.

data들(title, thumb, id)가 class _DetailScreenState extends State<DetailScreen> { 까지 전달되지 않았는데, 우린 데이터를 쓰고 싶다.

그럼 widget.title로 하면 된다.

여기서 widget은 DetailScreen이다.

이게 State의 build method가 State가 속한 StatefulWidget의 data를 받아오는 방법이다.

widget의 의미는 부모로 가라는 의미이다.

StatelessWidget은 그냥 title, thumb, id를 쓰면 되고,

StatefulWidget은 State의 build method에서 widget.title이라고 적어야 함.

initState()에서는 widget.id에 접근할 수 있다.

widget을 적어야하는 이유는 별개의 class에서 작업하고 있기 때문이다.

우리는 State를 extend하는 class에 있는데,

datasms StatefulWidget인 DetailScreen으로 전달 된다. (HomeScreen으로 받은 데이터)

State class에서 해당 데이터를 받기 위해 widget.id라고 적고 있다.

그럼 이제, webtoon이라는 Future를 안전하게 초기화할 수 있게 됐다.

초기화하고 싶은 property가 있지만

contructor에서는 불가능한 경우

대신 initState() function에서 초기화 하는 것 임.

initState 가 항상 build 보다 먼저 호출되는 것을 알고 있다.

모든 리스트를 한번에 로드하는 것이 아니라 필요한 개수만큼 로드한다.

인스타나 틱톡처럼 사용자가 보고 있는 것만 로드한다.

ListView.builder

ListView.separated : 리스트 아이템을 구분함. margin, padding 등을 쉽게 줄 수 있음.