Flutter앱 유지보수 1년 간 해보기 프로젝트 -7(위젯 생명주기)

박경현·2023년 11월 6일

flutter

어플을 구성하는 위젯들을 보면 처음에 생성되고 마지막에 종료되는 라이프사이클을 가지고 있다.
이번 블로그에서는 그런 라이프 사이클을 집중적으로 작성해보려고 한다! + 추가로 Timer까지!!

클래스에서 위젯을 상속할때 StatelessWidget과 StatefulWidget 중 하나를 상속한다!

StatelessWidget의 라이프사이클

직역하면 '상태가 없는 위젯'이라는 뜻인데 매우 심플한 생명주기를 가지고 있다.

StatelessWidget이 빌드되면 생성자가 실행

이어서 필수로 오버라이드 되는 build()함수가 실행

마지막으로 build()함수에서 반환한 위젯이 화면에 렌더링

말 그대로 생성자에 새로운 매개변수가 들어오지 않았을때 사용하면 되는 클래스이다

근데 만약 Timer처럼 매번 생성자에 매번 새로운 매개변수가 들어온다면?
--> 이때 StatelessWidget으로 설정을 할시 매번 새롭게 객체를 생성해버리는 문제가 발생한다!!

StatefulWidget의 라이프사이클

StatelessWidget은 위젯클래스와 State클래스 2개로 구성되어있다.

아래 그림을 보면 알다시피 생성자를 한번 생성하고 State가 바뀔때마다
바뀐 State를 적용해주는 식으로 구동된다.

StatefulWidget생성자가 실행
createState()함수가 실행 -> State가 이때 생성!
State가 생성되면 initState()가 실행 -> 단 한번만 생성된다!
didChangeDependencies()가 실행,
BuildContext가 제공되고, State의존값이 바뀌면 재실행된다
State상태가 dirty가 되고 -> 이때 build()가 재실행!
Build()함수가 실행되고 UI가 반영됨 -> clean상태로 State변경
위젯이 위젯트리에서 사라지면 deactivate()가 실행
위젯 영구삭제시 dispose()가 실행

라이프사이클을 생각하면서 이미지를 자동으로 넘겨주는 앱을 만들어보자

이미지가 매 3초마다 바뀌어서 화면에 보여주는 어플을 만들어보려고 한다!

필요구성 및 클래스-> 이미지5개, Timer, PageView, StatefulWidget

pubspec.yaml설정하기

저번 블로그에서도 말했지만 외부 설정이 들어가게 되면 항상 pubspec.yaml에 적어줘야한다
이미지 또한 pubspec.yaml에 적어주기!

flutter:
	uses-material-design: true
    assets:
    	- asset/img/

img뒤에 / 게 매우 중요! 그래야 이 폴더 안에 이미지가 있다는걸 인식한다!

main.dart 부분

어플의 화면전체를 이미지가 차지하기 때문에 main에 코드를 적지 않고,
screen/home_screen.dart에 핵심코드를 적어줬다.

void main() {
	runApp(
    	const MaterialApp(
        	home: HomeScreen(),
        );
    );
}

home_screen.dart부분

Timer와 PageView를 중점으로 코드를 작성해보자!

일단 class를 두개 사용할 예정이다 -> 앞에서 나온 StatefulWidget은
createSate()부분과 State상태관리부분이 분리되어있어야해서!

class HomeScreen extends StatefulWidget {
	const HomeScreen({Key? key}) : super(key: key);
    @override
    State<StatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
	final PageController pageController = PageController();
    
    @override
    void initState() {
    	super.initState();
        Timer.periodic(
        	Duration (seconds: 3), // 몇초단위할건지 설정
        	(timer) {
            	int? nextPage = pageController.page?.toInt();
                if (nextPage == null) {
                	return;
                }
                if (nextPage == 4) {
                	nextPage = 0;
                }
                else {
                	nextPage++;
                }
                pageController.animateToPage(
                	nextPage,
                    duration: Duration(microseconds: 500),
                    curve: Curves.ease,
                );
            }
        );
    }
    @override
    Widget build(BuildContext context) {
    	SystemChrome.setSystemUIOverrlayStyle(SystemUiOverlayStyle.dark);
        return Scaffold(
        	body: Pageview(
            	controller: pageController;
               	children: [1,2,3,4,5]
                .map(
                	(number) =>
                    Image.asset('asset/img/image_$number.jpeg', 
                    fit: BoxFit.cover),
                ).toList(),
            ),
        );
        
    }
}