1강을 끝내고 2-3까지 진행했다.
플러터의 구조를 이해하는데 힘을 둔 강의인것 같다.
위젯을 만드는 방법과 stateful과 stateless를 배웠고 뷰위젯을 공부했다.
위젯을 만드는 방법 3가지가 있는데
1.플러터 기본 내장 위젯 사용
2.pub.dev이용하기
3.직접 만들어보기가 있다.
위젯은 class형태를 뛰며 const(사용자)가 들어가 있어야한다.
먼저 stateless은 immutable하여 변경할 수 없는 위젯이다.
장점은 단순성과 예측 가능성이 있으며 정적이다.
stateful은 mutale하여 변경할 수 있는 위젯이다.
장점은 동적 대화형 ui를 나타낼 수 있고 유연성이 있다.
둘의 라이프사이클은 이해해야하는데
우선 위젯의 라이프사이클이란?
위젯이 생성부터 삭제 및 종료되는 단계의 과정에서 발생되는
여러가지 이벤트의 호출 순서를 뜻한다.
stateless의 라이프사이클은 constractor ->build()이다.
즉 정적이여서 뭐 없다..
stateful은 constractor ->build() 사이에 많은 것들이있다.
view위젯은
앱의 화면을 담당하는 위젯이다.
우선 구성은 이러하다
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: PageView(
children: [
Container(
color: Colors.red,
child: const Center(
child: Text(
"1",
style: TextStyle(fontSize: 50, color: Colors.white),
),
),
),
Container(
color: Colors.blue,
child: const Center(
child: Text(
"2",
style: TextStyle(fontSize: 50, color: Colors.white),
),
),
),
Container(
color: Colors.yellow,
child: const Center(
child: Text(
"3",
style: TextStyle(fontSize: 50, color: Colors.white),
),
),
),
],
),
),
);
}
}
여기서 세로 스크롤을 추가하고싶다면
body: PageView( 아래에 scrollDirection: Axis.vertical, 이 코드를 포함하면 된다
세로 스크롤의 예는 틱톡의 화면을 보면된다.
또 controller와 pagesnapping이라는 이벤트가 있는데 각 구조는
controller: _controller, pageSnapping: false, 이러하다
controller는 누를 수 있는 버튼을 추가해주며 pagesnapping 페이지와 페이지 사이에 멈출 수 있다.
마지막으로 onpagechange를 활용해 이벤트를 노출 시켜줄 수 있다.
1강을 드디어 긑냈다.
물론 다트 언어를 완벽히 숙지한채로 넘어간 것이 아니기에 다시 공부할 필요가 있긴하다.
내 생각에 비교적 1강보단 2강이 더 쉬울 것 같다는 생각이 들기도한다.
아직 초반이긴하지만 빠르게 다시 공부하자