vault backup: 2024-06-17 18:22:15

HI-JIN2 · Jun 17, 2024 · 144da31 · 144da31
1 parent 8759c2d
commit 144da31
Show file tree

Hide file tree

Showing 4 changed files with 257 additions and 65 deletions.
diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json
@@ -203,14 +203,26 @@
             "state": {
               "type": "markdown",
               "state": {
-                "file": "Flutter/플러터 기본 다지기.md",
+                "file": "Flutter/기본 위젯 알아보기.md",
+                "mode": "source",
+                "source": false
+              }
+            }
+          },
+          {
+            "id": "2208cffbe1b8d234",
+            "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "Flutter/플러터 입문하기.md",
                 "mode": "source",
                 "source": false
               }
             }
           }
         ],
-        "currentTab": 16
+        "currentTab": 17
       }
     ],
     "direction": "vertical"
@@ -260,8 +272,7 @@
       }
     ],
     "direction": "horizontal",
-    "width": 300,
-    "collapsed": true
+    "width": 300
   },
   "right": {
     "id": "17bd5a38f90b4f47",
@@ -277,7 +288,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "Flutter/플러터 기본 다지기.md",
+                "file": "Flutter/플러터 입문하기.md",
                 "collapseAll": true,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -294,7 +305,7 @@
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "Flutter/플러터 기본 다지기.md",
+                "file": "Flutter/플러터 입문하기.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": true
               }
@@ -317,7 +328,7 @@
             "state": {
               "type": "outline",
               "state": {
-                "file": "Flutter/플러터 기본 다지기.md"
+                "file": "Flutter/플러터 입문하기.md"
               }
             }
           }
@@ -338,11 +349,12 @@
       "command-palette:명령어 팔레트 열기": false
     }
   },
-  "active": "5ac0e661501e7889",
+  "active": "2208cffbe1b8d234",
   "lastOpenFiles": [
-    "README.md",
-    "Flutter/플러터 기본 다지기.md",
+    "Flutter/기본 위젯 알아보기.md",
     "Flutter/다트 입문하기.md",
+    "Flutter/플러터 입문하기.md",
+    "README.md",
     "네트워크/2.1 네트워크의 기초.md",
     "네트워크/2.2 TCPIP 4계층 모델.md",
     "디자인 패턴/1.2 프로그래밍 패러다임.md",

diff --git a/Flutter/기본 위젯 알아보기.md b/Flutter/기본 위젯 알아보기.md
@@ -0,0 +1,217 @@
+
+## 위젯
+> Everything is Widget!
+
+UI과 관련된 모든 요소는 위젯으로 구성되어있음
+
+위젯의 상태가 변경되면 변경사항에 알맞게 변경된 UI를 화면에 다시 그려줌
+플러터 프레임워크는 기존 상태의 위젯을 비교해서 UI 변화를 반영할때 필요한 최소한의 변경사항을 산출해서 화면을 그려냄
+
+### 자식을 하나만 갖는 위젯
+- container
+	- 자식을 담는 컨테이너 위젯
+	- 배경색, 너비 높이, 테두리 등 디자인 지정 가능
+- gestureDetector
+	- 제스처 기능을 자식 위젯에서 인식하는 위젯
+	- 탭, 드래그, 더블클릭 같은 제스터 기능이 자식 위젯에 인식 되었을때 함수를 실행할 수 있음
+- sizedbox
+	- 높이 너비 지정하는 위젯
+	- 디자인적 요소 x 
+	- const 생성자로 생성할 수 있음 -> 퍼포먼스 효율적임
+
+### 다수의 자식을 입력할 수 있는 위젯
+- column
+	- 자식 매개변수에 입력된 모든 위젯을 세로로 배치
+- row
+	- 자식 매개변수에 입력된 모든 위젯을 가로로 배치
+- listview
+	- 리스트 구현 
+	- 입력된 위젯이 화면을 벗어나게 되면 스크롤 가능
+
+
+https://docs.flutter.dev/ui/widgets/basics
+
+
+## children vs child
+- child 매개변수에는 단 하나의 위젯만 입력할 수 있음
+- children 매개변수는 여러위젯을 리스트에 입력할 수 있음
+	- 리스트에 입력된 순서대로 화면에 그려짐
+
+## 제스처 관련 위젯
+### Button
+- TextButton
+	- 텍스트만 있는 버튼
+- OutlinedButton
+	- 테두리가 있는 버튼
+- ElevatedButton
+	- 입체적으로 튀어나온 느낌의 배경이 들어간 버튼
+### IconButton
+- 아이콘으로 버튼 만들기
+### GestureDetector
+- 하위 위젯이 제스처에 반응하도록 해줌
+### FloatingActionButton
+- 화면의 오른쪽 아래, 사용자가 가장 많이 사용하는 위치에 버튼을 띄움
+
+## 디자인 관련 위젯
+### Container 
+- 위젯에 배경, 패딩, 테두리 등 추가
+### SizedBox
+- 너비 높이 지정 할 수 있는 위젯
+- 공백 넣을 때 많이 씀
+### Padding
+- 패딩 위젯은 따로 있지만, 마진은 따로 있지 않음 
+	- 마진: container의 매개변수로 넣으면 됨 / 위젯 바깥에 간격 추가
+	- 패딩: 하위 위젯으로 추가 / 내부 간격 추가
+
+### SafeArea
+- 시스템 UI에 가려지지 않게 신경써서 화면에 그릴 때
+
+
+
+## 배치 관련 위젯
+### Row
+```dart
+class RowWidgetExample extends StatelessWidget {
+
+@override
+
+Widget build(BuildContext context) {
+
+// TODO: implement build
+
+return MaterialApp(
+
+home: Scaffold(
+
+body: SizedBox(
+
+height: double.infinity,
+
+child: Row(
+
+mainAxisAlignment: MainAxisAlignment.start,
+
+crossAxisAlignment: CrossAxisAlignment.center,
+
+children: [
+
+Container(
+
+height: 50.0,
+
+width: 50.0,
+
+color: Colors.red,
+
+),
+
+  
+
+const SizedBox(
+
+width: 12.0,
+
+), //공백
+
+Container(
+
+height: 50.0,
+
+width: 50.0,
+
+color: Colors.green,
+
+),
+
+const SizedBox(
+
+width: 12.0,
+
+),
+
+Container(
+
+height: 50.0,
+
+width: 50.0,
+
+color: Colors.blue,
+
+)
+
+],
+
+),
+
+),
+
+));
+
+}
+
+}
+```
+
+
+## column은 세로
+
+
+
+## Flexible vs Expanded
+
+```dart
+Flexible(
+
+flex: 1,
+
+child: Container(
+
+height: 50.0,
+
+width: 50.0,
+
+color: Colors.red,
+
+),
+
+),
+
+  
+
+const SizedBox(
+
+width: 12.0,
+
+), //공백
+
+  
+
+Expanded(
+
+child: Container(
+
+height: 50.0,
+
+width: 50.0,
+
+color: Colors.green,
+
+),
+
+),
+
+const SizedBox(
+
+width: 12.0,
+
+),
+```
+
+- Flexible은 비율 만큼 공간을 차지할 수 있게 해줌
+- Flex 1과 expanded 모두 남아 있는 공간을 최대한으로 차지한다. 
+- expanded는 Flexfit.tight를 기본으로 제공해준 위젯임
+	- `class Expanded extends Flexible` 상속 관계이다.
+
+## Stack
+- 위젯을 겹칠 수 있게 해줌
+- 위젯 위에 위젯을 올린듯한 효과 줄 수 있음
diff --git a/Flutter/플러터 기본 다지기.md b/Flutter/플러터 기본 다지기.md
diff --git a/Flutter/플러터 입문하기.md b/Flutter/플러터 입문하기.md
@@ -0,0 +1,18 @@
+## 계층
+1. Embedder:  네이티브 플랫폼과 통신
+2. Engine: 플러터 프레임워크의 중심이 되는 기능 제공
+4. Framework: 이젯과 애니메이션 등 플러터 개발자들이 실질적으로 사용하는 기능 제공
+
+## 그외
+- Center 위젯 -> 중앙배치
+- Text 위젯 -> 글자 작성
+
+# 폴더링
+- screen
+	- 스크린 전체에 해당되는 위젯 
+- component
+	- 공통으로 사용되
+- model
+	- 모델
+- const
+	- 상수