도서의 코딩노트

위젯 생명 주기란?위젯이 화면에 그려지는 순간부터 삭제되는 순간까지의 주기를 의미함.플러터에서 UI를 표현할 때 사용되는 위젯인 `StatelessWidget`과 `StatefulWidget`이 있음 이걸 왜 알아야하냐?UI 상태 관리: `StatefulWidget`은 상태를 가지는 위젯으로, 사용자 인터페이스의 상태를 관리하는 데 사용됨.위젯이 화면에 표시되고 변경될 때마다 생명주기 메서드가 호출되며, 이를 통해 화면의 상태를 업데이트하고 반응적인 UI를 구현가능.상태 변경 감지: `StatefulWidget`의 생명주기 메서드를 이용하면 상태의 변화를 감지하고, 이에 따라 필요한 작업을 수행할 수 있음.예를 들어, 사용자의 입력에 따라 화면을 업데이트하거나 데이터를 로드하는 등의 작업을 수행할 수 있..

우선 실습한 프로젝트는 시뮬레이터에서 앱에서 웹으로 접근하는걸 실습해봤음https://github.com/Leedoseo/Flutter_WidgetStudy/tree/main/webapp_practice_projectFlutter_WidgetStudy/webapp_practice_project at main · Leedoseo/Flutter_WidgetStudyContribute to Leedoseo/Flutter_WidgetStudy development by creating an account on GitHub.github.com커밋 기록을 보면 코드를 볼 수 있음!

그럼 이제까지 배운 Widget의 기본 개념을 봤으니 실습을 해보겠음. 1. 사용자 정의 위젯 만들기우선 사용자 정의 위젯을 만들어야함 -> 스테이트리스 위젯import 'package:flutter/material.dart';void main() { runApp(SplashScreen()); // SplashScreen 위젯을 첫 화면으로 지정}class SplashScreen extends StatelessWidget { // StatelessWidget 선언 @override Widget build(BuildContext context) { // 위젯의 UI 구현 return MaterialApp( // 항상 최상단에 입력되는 위젯 home: Scaffold( // 항상 두 번째..

1. 배치 관련 위젯배치 관련 위젯은 하위 위젯을 가로 또는 세로로 배치하거나 위젯 위에 위젯을 겹칠 때 사용함!1-1. `Row`위젯`Row`는 `Column`위젯과 함께 가로*세로로 배치하는데 사용됨. `Row`는 말 그대로 가로로 위젯을 배치하는데 사용됨.하나의 `child`위젯을 입력받는 위젯들과 다르게 여러 개의 `child`위젯을 입력받을 수 있는 `children`파라미터를 노출함.`Row`와 `Column`에는 주축과 반대축이라는 개념이 존재하는데 `Row`의 주축 : 가로, 반대축 : 세로`Column`의 주축 : 세로, 반대축 : 가로위젯을 가로로 배치하는 `Row`위젯은 `crossAxisAlignment`파라미터를 사용함. 이전 템플릿 코드는 버리고 새로 작성해보겠음void main..

1. 디자인 관련 위젯디자인 관련 위젯은 배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적 요소를 적용할 때 사용함1-1. `Container`위젯말 그대로 다른 위젯을 담는데 사용위젯의 높이와 너비를 지정하거나, 배경이나 테두리를 추가할 때 많이 사용다른 위젯처럼 `child`파라미터 사용 가능import 'package:flutter/material.dart';void main() { runApp(MyApp());}// 디자인 관련 위젯class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( bod..

위젯 실습 템플릿// 위젯 실습용 파일import "package:flutter/material.dart";void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: // 여기에 실습 코드 작성 ), ), ); }}1. 텍스트 관련 위젯`Text`위젯은 글자를 적고 스타일링하는 위젯임. 첫 번째 포지셔널 파라미터에 원하는 문자열을 작성하고 `style`이라는 네임드 파라미터를 사용해..

플러터는 위젯 아래에 계속 위젯이 입력되는 형태로 '위젯 트리'를 구성하며 UI를 제작함`child`파라미터와 `children`파라미터는 위젯에 하위 위젯을 추가할 때 사용함.`child`파라미터 : 위젯 하나만 추가 가능`children`파라미터 : 위젯 여러개 추가 가능대부분의 위젯은 `child` 또는 `children` 파라미터 하나만 제공함. 두개의 파라미터를 동시에 입력받는 위젯은 존재하지 않음.아래 코드에서 `child`와 `children`파라미터의 차이를 알아보겠음// child 사용import "package:flutter/material.dart";void main() { runApp( MaterialApp( home: Scaffold( body: Cen..

위젯은 자식을 하나만 갖는 위젯과 자식을 여럿 갖는 위젯으로 나뉨!자식을 하나만 갖는 대표적인 위젯들은 아래와 같으며 대체로 `child`파라미터를 입력받음Container 위젯 : 자식을 담는 컨테이너 역할을 함. 다만 단순하게 자식을 담는 역할을 하는게 아님배경색, 너비와 높이, 테두리 등의 디자인을 지정 가능GestureDetector 위젯 : 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위짓임탭이나 드래그, 더블 클릭 같은 제스처 기능이 자식 위젯에 인식됐을 때 함수를 실행할 수 있음SizedBox 위젯 : 높이와 너비를 지정하는 위젯Container 위젯과 다르게 디자인적요소는 적용할 수 없고 `const` 생성자로 선언할 수 있어서 퍼포먼스 측면에서 더 효율적임 자식을 여럿 갖는 ..

다양한 클래스 제한자가 새로 추가됨.추가된 클래스 제한자는 `base`, `final`, `interface,` `sealed`, `mixin`임. 모든 클래스 제한자는 `class`키워드 앞에 명시함.클래스 제한자를 명시한 클래스를 해당 클래스를 사용하는 파일이 아닌 다른 파일에 선언해야 정상적으로 기능이 작동함1. `base`제한자`base`제한자는 `base`클래스의 기능을 강제하는 제한자임. `base` 클래스를 상속할 때는 다른 파일에서 상속하려면 자식 클래스도 반드시 `base`, `sealed`, `final` 중 하나여야 함. 또한, `implements`는 불가능함.// base 제한자base class Parent{} // a파일import "1_a.dart"; // b파일Parent ..