😃 What I Learned

import 관련

기본적으로 import 방법은 package:프로젝트명/(lib가 루트일때 폴터 루트)/(import 할 파일명) 으로 import하면 된다.

그런데 프로젝트를 진행하다보면 import 줄이 많아지는데, 나중에 혼선을 일으킬 여지가 있음. 그래서 Single Import 패턴으로 폴더 구조를 바꾸어 진행하면 한번에 import를 진행 할 수 있다.

https://velog.io/@ximya_hf/manangesseveralimportinflutterbysinlgeimport

각자의 폴더에 index.dart를 만들어 폴더 안의 패키지들을 묶어서 export한다면, 다른 파일에서 index를 import해 사용하면 편하게 관리 할 수 있다.

$ dart run single_import_generator -target=lib/presentation/common dir

누군가 고맙게 패키지를 만들어 두어서 해당 커맨드를 실행하면 알아서 정리 해 준다.

PageView

여러 페이지를 만들 수 있는 위젯. 어떻게 넘길지(가로로 넘길지, 세로로 넘길지..) 애니메이션을 지정 가능하다. 정적으로 페이지를 만들 수 있지만, 동적으로도 여러 페이지를 생성 할 수 있다.

class HomeScreen extends StatelessWidget {

  const HomeScreen({super.key});

  

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        body: PageView(

            children: [1, 2, 3, 4, 5]

                .map(

                  (e) => Image.asset('assets/image_$e.jpeg', fit: BoxFit.cover),

                )

                .toList()));

  }

}

이같이 PageView로 각각 다른 Image asset을 캐러셀 형태로 dp할 수 있다.

Stateful Widget

동적으로 데이터를 받아서 랜더링하는 위젯을 지칭합니다. 동적으로 바뀌는 데이터를 적용하기 위해서 2개의 객체가 필요한데,

class DynamicScreen extends StatefulWidget {

  const DynamicScreen({super.key});

  

  @override

  State<DynamicScreen> createState() => _DynamicScreenState();

}

  

class _DynamicScreenState extends State<DynamicScreen> {

  final PageController pageController = PageController();

  

  @override

  void initState() {

    super.initState();

  

    Timer.periodic(Duration(seconds: 3), (timer) {

      int? currentPage = pageController.page?.toInt();

      if (currentPage == null) return;

      if (currentPage == 4) {

        currentPage = 0;

      } else {

        currentPage++;

      }

  

      pageController.animateToPage(currentPage,

          duration: Duration(milliseconds: 500), curve: Curves.ease);

    });

  }

  

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        body: PageView(

            controller: pageController,

            children: [1, 2, 3, 4, 5]

                .map(

                  (e) => Image.asset('assets/image_$e.jpeg', fit: BoxFit.cover),

                )

                .toList()));

  }

}

실제로 랜더링 되어야하는 위젯과, 바뀌는 상태를 캐치하는 State가 필요하다. State를 통해서 위젯의 비동기 데이터 처리, 애니메이션, 데이터 관리를 통합적으로 할 수 있게 된다.

기본 라이프사이클(Life Cycle)

1. stateless 위젯과 마찬가지로 constructor를 생성합니다. 그리고 createState()를 통해서 관련 state를 만듭니다.
2. initState()를 통해 State를 실행합니다. 논리적으로 initState는 createState()에 종속적이라 한번밖에 실행되지 않습니다.
3. initState에 종속된 데이터가 바뀌면 state의 상태는 dirty로 바뀌고 다시 build()를 하게 됩니다. build()가 종료되었다면 상태는 clean으로 바뀌고 build()를 트리거 하지 않습니다.
4. 위젯이 트리에서 내려간다면, dispose()로 폐기가 됩니다.