Flutter 프로젝트 시작하기: Flutter 앱은 main() 함수에서 시작합니다. runApp() 함수를 호출하여 Flutter 위젯 트리를 시작합니다. 기본적으로 MaterialApp 위젯을 사용하여 머터리얼 디자인을 적용할 수 있습니다.
위젯 배치와 스타일링: Flutter의 UI는 위젯으로 구성됩니다. Text, Container, Column, Row 등 다양한 기본 위젯을 사용하여 인터페이스를 구성합니다. 각 위젯은 특정 속성을 가지며, 이를 통해 위치, 크기, 색상 등을 조절할 수 있습니다.
텍스트와 버튼 위젯 사용하기: 텍스트는 Text 위젯을 통해 표시할 수 있으며, 스타일링을 위해 TextStyle 속성을 사용합니다. 버튼은 ElevatedButton, TextButton, IconButton 등 다양한 형태로 제공되며, 각각의 스타일과 동작을 정의할 수 있습니다.
레이아웃 관리: Flutter에서는 Column과 Row 위젯을 이용해 수직, 수평 방향으로 위젯을 배치할 수 있습니다. 또한 Stack 위젯을 사용하여 위젯을 겹쳐서 표시할 수 있습니다.
반응형 디자인: Flexible과 Expanded 위젯을 활용하여 다양한 화면 크기에 맞게 UI를 조정할 수 있습니다. 이를 통해 다양한 모바일 디바이스에서 일관된 사용자 경험을 제공할 수 있습니다.
stateful vs stateless
Stateful (상태를 가진다)
상상해 보세요. 당신이 하나의 마술 상자를 가지고 있다고 생각해봅시다. 이 상자는 당신이 이전에 넣었던 물건을 기억하고 있어요. 예를 들어, 어제 상자에 파란 공을 넣었다면, 오늘 상자를 열었을 때 그 파란 공이 여전히 거기 있을 거예요. 상자는 과거에 어떤 일이 있었는지 기억하고 있기 때문에, "상태를 가진다(stateful)"고 할 수 있어요.
Stateless (상태를 가지지 않는다)
이번엔 다른 상자를 상상해봅시다. 이 상자는 매번 열 때마다 이전에 무엇을 했는지 기억하지 못해요. 예를 들어, 어제 상자에 파란 공을 넣었다고 해도, 오늘 상자를 열면 아무것도 없을 거예요. 이 상자는 과거의 일을 기억하지 못하기 때문에, "상태를 가지지 않는다(stateless)"고 할 수 있어요.
비교
Stateful 상자: 과거에 무엇이 있었는지 기억한다. (예: 어제 넣은 파란 공이 오늘도 상자 안에 있다)
Stateless 상자: 매번 새롭게 시작한다. 과거에 무엇을 했는지 기억하지 못한다. (예: 어제 넣은 파란 공이 오늘은 상자 안에 없다)
