diff --git "a/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/ch06.md" "b/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/ch06.md" new file mode 100644 index 0000000..d0634b4 --- /dev/null +++ "b/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/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, + ), +), +``` + +Screenshot 2024-08-04 at 4 11 27 PM + diff --git "a/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\355\225\231\354\212\265 \352\263\204\355\232\215.md" "b/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\355\225\231\354\212\265 \352\263\204\355\232\215.md" index c7b32e4..7caad34 100644 --- "a/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\355\225\231\354\212\265 \352\263\204\355\232\215.md" +++ "b/hong/flutter/\354\275\224\353\223\234\355\214\251\353\217\204\353\246\254\354\235\230 \355\224\214\353\237\254\355\204\260 \355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/\355\225\231\354\212\265 \352\263\204\355\232\215.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