[26주차 2] Flutter Programming: ch06. 기본 위젯 알아보기 (#242)

* Create ch06.md * Update 학습 계획.md
10000-Bagger · Dec 16, 2024 · e263ef4 · e263ef4
1 parent 45fee28
commit e263ef4
Show file tree

Hide file tree

Showing 2 changed files with 254 additions and 1 deletion.
diff --git a/hong/flutter/코드팩도리의 플러터 프로그래밍/ch06.md b/hong/flutter/코드팩도리의 플러터 프로그래밍/ch06.md
@@ -0,0 +1,253 @@
+# 06. 기본 위젯 알아보기
+
+학습 목표
+
+- 플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있음.
+- 플러터 프레임워크는 수십 가지 기본 위젯을 제공하며 앱 개발자가 직접 위젯을 만들 수도 있음.
+- 자주 사용되는 위젯을 텍스트, 제스처, 디자인, 배치 관련 위젯으로 분류해서 학습.
+
+## 6.1. 위젯 소개
+
+> Everything is a Widget
+> 
+- 구글에서 플러터를 소개하는 문구
+- 플러터에서 화면에 보여지는 UI와 관련된 모든 요소는 위젯으로 구성되어 있음.
+- 위젯은 현재 주어진 상태(state or data)를 기반으로 어떤 UI를 구현할지를 정의함.
+- 위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려줌.
+- 이때 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI 변화를 반영할 때 필요한 최소한의 변경 사항을 산출해서 화면을 그려냄.
+- 결과적으로 플러터는 최소한의 리소스를 이용해서 UI 변경을 이끌어 낼 수 있음.
+- 위젯은 자식을 하나만 갖는 위젯과 여럿 갖는 위젯으로 나뉨.
+- 자식을 하나만 갖는 대표적인 위젯들은 다음과 같으며 대체로 child 매개변수를 입력 받음
+    - Container 위젯: 자식을 담는 컨테이너 역할을 함. 다만 단순하게 자식을 담는 역할을 하는 게 아니라 배경색, 너비와 높이, 테두리 등의 디자인을 지정할 수 있음.
+    - GestureDecorator 위젯: 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯. 탭이나 드래그 그리고 더블 클릭 같은 제스처 기능이 자식 위젯이 인식됐을 때 함수를 실행할 수 있음.
+    - SizedBox 위젯: 높이와 너비를 지정하는 위젯. Container 위젯과 다르게 디자인적 요소는 적용할 수 없고, const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 더 효율적.
+- 다수의 자식을 입력할 수 있는 위젯은 children 매개변수를 입력 받으며 리스트로 여러 위젯을 입력할 수 있음.
+    - Column 위젯: children 매개변수에 입력된 모든 위젯들을 세로로 배치.
+    - Row 위젯: children 매개변수에 입력된 모든 위젯들을 가로로 배치.
+    - ListView 위젯: 리스트를 구현할 때 사용. 마찬가지로 children 매개변수에 다수의 위젯을 입력할 수 있으며입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능해짐.
+
+### 6.1.1. children과 child의 차이점
+
+- 플러터는 위젯 아래에 계속 위젯이 입력되는 형태로 ‘위젯 트리’를 구성하여 UI를 제작함.
+- child 매개변수와 children 매개변수는 위젯에 하위 위젯을 추가할 때 사용.
+- 대부분 위젯은 child 또는 children 매개변수를 하나만 제공 (child와 children 매개변수를 동시에 입력받는 위젯은 존재하지 않음.)
+
+```dart
+ void main() {
+  runApp(
+    const MaterialApp( // 머티리얼 디자인 위젯
+      home: Scaffold( // Scaffold 위젯
+        body: SizedBox(
+          width: double.infinity,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text('Roo'),
+              Text('Ryu'),
+            ],
+          ),
+        ),
+      ),
+    ),
+  );
+}
+```
+
+## 6.2. 위젯 실습용 템플릿 작성
+
+- Create New Flutter Project를 실행했을 때 lib/main에 있는 MyApp() → MyHomePage()에서 content 출력.
+    - MyApp: root of my application. header나 타이틀 footer 등이 보임.
+    - MyHomePage: home page of my application. state에 따라 보여줄 컨텐츠를 출력함.
+
+## 6.3. 텍스트 관련 위젯
+
+- 화면에 글자를 보여주기 위한 글자를 렌더링할 수 있는 위젯.
+    - 플러터는 RichText 위젯과 Paragraph 같은 클래스도 제공함.
+- Text 위젯은 글자를 적고 스타일링하는 위젯.
+- 첫 번째 포지셔널 파라미터에 원하는 문자열을 작성하고 style이라는 네임드 파라미터를 사용해 스타일을 지정.
+
+```dart
+const Text(
+  'You have pushed the button this many times:',
+  style: TextStyle(
+    fontSize: 16.0,
+    fontWeight: FontWeight.w700,
+    color: Colors.blue,
+),
+```
+
+## 6.4. 제스처 관련 위젯
+
+- 사용자가 키보드로 글자를 입력하는 행위 외의 모든 입력을 플러터에서는 제스처라고 부름.
+- 예: 화면 한 번/두 번 탭하기, 길게 누르기 등.
+- GestureDetector 위젯은 모든 제스처를 매개변수로 제공.
+- 제스처 관련 위젯은 하위 위젯에 탭이나 드래그처럼 특정 제스처가 입력됐을 때 인지하고 콜백 함수를 실행.
+- Button, IconButton, GestureDetector, FloatingActionButton 위젯 등.
+
+### 6.4.1. Button 위젯
+
+- 플러터 머티리얼 패키지에서 기본적으로 제공하는 버튼으로 TextButton, OutlinedButton, ElevatedButton(입체적으로 튀어나온 느낌의 배경이 들어간 버튼) 등이 있음.
+
+```dart
+ElevatedButton(
+  // 클릭 시 실행할 함수
+  onPressed: (){},
+  // 버튼 스타일링
+  style: ElevatedButton.styleFrom(
+    backgroundColor: Colors.lightBlueAccent
+  ),
+  // 버튼에 들아갈 위젯
+  child: const Text('버튼')
+)
+```
+
+### 6.4.3. GestureDetector 위젯
+
+- 앱은 모든 입력을 손가락으로 함. 그래서 손가락으로 하는 여러 가지 입력을 인지하는 위젯이 필요한데 GestureDetector가 바로 그 역할을 함.
+
+```dart
+GestureDetector(
+  // 한 번 탭했을 때 실행할 함수
+  onTap: () {
+    // 출력 결과는 안드로이드 스튜디오의 [Run] 탭에서 확인 가능.
+    print('on tap');
+  },
+  // 두 번 탭했을 때 실행할 함수
+  onDoubleTap: (){
+    print('on double tab');
+  },
+  onLongPress: () {
+    print('on long press');
+  },
+  // 제스처를 적용할 위젯
+  child: Container(
+    decoration: const BoxDecoration(
+    color: Colors.lightBlueAccent,
+  ),
+    width: 100.0,
+    height: 100.0,
+  ),
+)
+```
+
+- onPanStart: 수평 또는 수직으로 드래그가 시작됐을 때 실행되는 함수 입력 가능.
+- onPanUpdate: 수평 또는 수직으로 드래그를 하는 동안 드래그 위치가 업데이트될 때마다 실행되는 함수를 입력할 수 있음.
+- onPanEnd: 위의 작업이 끝났을 때 실행되는 함수 입력 가능.
+- onHorizontal/VerticalDragStart/Update/End: 수평/수직으로 드래그를 시작/변경/종료될 때 실행되는 함수를 입력 가능
+- onScaleStart/update/End: 확대가 시작/변경/종료됐을 때
+
+### 6.4.4. FloatingActionButton 위젯
+
+- FloatingActionButton은 Material Design에서 추구하는 버튼 형태.
+- 앱 화면의 오른쪽 아래에 동그란 플로팅 작업 버튼임.
+
+```dart
+    return Scaffold(
+      floatingActionButton: FloatingActionButton(
+        onPressed: () {},
+        child: const Text('클릭'),
+      ),
+      // ...
+      body: Container(),
+    );
+```
+
+## 6.5. 디자인 관련 위젯
+
+- 디자인 관련 위젯은 배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적 요소를 적용할 때 사용.
+
+### 6.5.1. Container 위젯
+
+- Container 위젯은 말 그대로 다른 위젯을 담는 데 사용.
+- 위젯의 너비와 높이를 지정하거나, 배경이나 테두리를 추가할 때 주로 사용됨.
+
+```dart
+Container(
+  decoration: BoxDecoration(
+    color: Colors.lightBlueAccent,
+    border: Border.all(
+      width: 16.0,
+      color: Colors.black,
+    ),
+    borderRadius: BorderRadius.circular(16.0)
+),
+  width: 100.0,
+  height: 100.0,
+),
+```
+
+- Container 위젯은 다른 위젯처럼 child 매개변수를 사용할 수 있음.
+
+### 6.5.2. SizedBox 위젯
+
+- SizedBox 위젯은 일반적으로 일정 크기의 공간을 공백으로 두고 싶을 때 사용됨.
+- Container 위젯을 사용해도 공백을 만들 수 있지만, SizedBox는 const 생성자를 사용했을 때 퍼포먼스에서 이점을 얻을 수 있음.
+
+```dart
+SizedBox(
+  height: 200.0,
+  width: 200.0,
+  child: Container(
+    color: Colors.red,
+  ),
+),
+```
+
+### 6.5.3. Padding 위젯
+
+- Padding 위젯은 child 위젯에 여백을 제공.
+- Padding 위젯을 사용하면 위젯의 상위 위젯과 하위 위젯 사이의 여백을 둘 수 있음.
+- Padding 위젯의 padding 매개변수는 `EdgeInsets`라는 값을 입력해야 함.
+- 또한 child 매개변수에 Padding을 적용하고 싶은 위젯을 입력할 수도 있음.
+
+```dart
+Container(
+  color: Colors.blue,
+  margin: EdgeInsets.all(16.0),
+  child: Padding(
+    // 상하, 좌우로 모두 16 픽셀만큼 패딩 적용
+    padding: const EdgeInsets.all(
+      16.0,
+    ),
+    child: Container(
+      color: Colors.red,
+      width: 50.0,
+      height: 50.0,
+    )
+  )
+)
+```
+
+- 패딩은 적용된 위젯이 차지하는 크기 내부에서 간격이 추가됨.
+- **플러터에서 자주 사용하지는 않지만** 위젯의 바깥에 간격을 추가해주는 margin 기능도 있음.
+- 다만 margin은 따로 위젯이 존재하지 않고 Container 위젯에 추가할 수 있음.
+
+** margin 보다는 padding 사용하자!
+
+- EdgeInsets 클래스의 다양한 생성자 종류:
+    - EdgeInsets.all(16.0): 상하좌우로 매개변수에 입력된 패딩을 균등하게 적용.
+    - EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0): 가로와 세로 패딩을 따로 적용.
+    - EdgeInsets.only(top: 16.0, bottom: 16.0, left: 16.0, right: 16.0): 위, 아래, 좌, 우 따로 적용.
+    - EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0): 위, 아래, 좌, 우 따로 적용 (positional parameter)
+
+### 6.5.4. SafeArea **
+
+- 크기와 디자인 모두 다양한 핸드폰의 사이즈의 위젯 위치 보호 (예: 노치에 가려지는 위젯 보호)
+- SafeArea 위젯을 사용하면 따로 기기별로 예외 처리를 하지 않고도 안전한 화면에서만 위젯을 그릴 수 있음.
+
+```dart
+SafeArea(
+  top: true,
+  bottom: true,
+  left: true,
+  right: true,
+  child: Container(
+    color: Colors.deepPurpleAccent,
+    height: 100.0,
+    width: 100.0,
+  ),
+),
+```
+
+<img width="365" alt="Screenshot 2024-08-04 at 4 11 27 PM" src="https://github.com/user-attachments/assets/68d62455-1e2a-4d0f-810d-6ec752c0bc6f">
+
diff --git a/hong/flutter/코드팩도리의 플러터 프로그래밍/학습 계획.md b/hong/flutter/코드팩도리의 플러터 프로그래밍/학습 계획.md
@@ -6,7 +6,7 @@
 
 - [x] 7/27, 28: 3, 4
 
-- [ ] 8/3, 4: 5, 6
+- [x] 8/3, 4: 5, 6
 
 - [ ] 8/10, 11: 7, 8