lgvv98

Flutter 컨테이너(Container) 정리 이번 시간에는 Container 위젯을 다루며, 공식 문서에 나온 내용을 직접 실습.Container란?플러터 공식 문서에서 Container는 이렇게 정의“Containers with no children try to be as big as possible.”→ child가 없을 경우, 가능한 한 큰 영역을 차지한다. 즉, 컨테이너는 레이아웃 상의 빈 공간을 최대한 확장하여 채우는 위젯이다. https://flutter-ko.dev/docs/development/ui/widgets/layout#Single-child%20layout%20widgets https://flutter-ko.dev/docs/development/ui/widgets/layout#S..

Flutter에서 스낵바(SnackBar)와 토스트(Toast) 메시지 사용하기 이번 시간에는 스낵바(SnackBar) 와 토스트(Toast) 메시지에 대해 학습.이 두 가지는 사용자에게 간단한 알림이나 상태 변화를 알려줄 때 자주 사용ScaffoldMessenger로 스낵바 만들기 ScaffoldMessenger는 가장 가까운 Scaffold를 찾아서 메시지를 표시하는 역할을 한다.기존의 Scaffold.of(context) 방식은 deprecated 되었기 때문에ScaffoldMessenger.of(context) 로 대체해서 사용해야 한다. import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키voi..

Flutter 2.0에서 버튼 위젯 변화 정리 (TextButton, ElevatedButton, OutlinedButton) Flutter 2.0에서 버튼들이 변화되었음.RaisedButton -> ElevatedButtonFlatButton -> TextButtonOutlineButton -> OutlinedButtonTextButton에서 background속성이 존재하지만 다른 버튼에는 백그라운드가 없어서 styleForm안에서 color를 사용해서 백그라운드를 설정. 샘플 코드ButtonBar의 경우에는 버튼의 가로로 여러개가 배치되어 있는데 화면의 가로 너비가 부족해서 세로로 전환해야할 때 반응형 웹처럼 자동으로 바꿔주는 것이다. import 'package:flutter/materi..

Flutter 2.0에서 ScaffoldMessenger와 SnackBar 변화 정리 플러터 2.0에서는 해당 사용 부분이 많이 달라짐. 기존 Scaffold.of(context)의 한계먼저 기존의 Scaffold.of(context)를 이해이 메서드는 현재 위젯 트리에서 가장 가까운 Scaffold를 찾아 반환하라는 의미 하지만 여기엔 한 가지 큰 문제가 있음.현재의 context가 Scaffold를 참조할 수 없는 위치에 있으면 Scaffold.of(context) 는 에러를 던짐 이 문제를 해결하기 위해, 우리는 보통 Builder 위젯을 사용.이렇게 하면 Builder가 새로운 context를 제공하므로 Scaffold를 정상적으로 찾을 수 있었다.Builder( builder: (conte..

Flutter의 BuildContext 알아보기 BuildContext는 Flutter 위젯 트리에서 매우 중요한 개념 흔한 에러 예시 Flutter를 하다 보면 이런 에러를 종종 보게 된다.Scaffold.of() called with a context that does not contain a Scaffold 이 에러는 context의 위치를 잘못 참조했을 때 발생즉, 특정 위젯이 자신이 속한 트리 상의 Scaffold를 찾을 수 없다는 의미. 그럼 BuildContext가 도대체 뭘 의미하고, 왜 이런 문제가 생기는 걸까? BuildContext란? 공식 Flutter 문서에서는 BuildContext의 정의BuildContext는 위젯 트리 내에서 위젯의 위치를 나타내는 핸들즉, 위젯이 트리 구..

Flutter에서 Drawer 메뉴 만들기 이번 시간에는 AppBar의 햄버거(☰) 버튼을 클릭했을 때 열리는 Drawer 메뉴를 만들어보자.아래 이미지를 보면, AppBar 왼쪽의 아이콘을 누르면 사이드 패널이 열리는 UI를 말한다. Drawer를 사용할 때 주의할 점Drawer는 내부적으로 AppBar의 왼쪽 영역(leading 부분)을 자동으로 제어하기 때문에 수동으로 지정하면 충돌이 발생.// ❌ 아래처럼 leading에 IconButton을 추가하면 Drawer가 작동하지 않는다!leading: IconButton( icon: Icon(Icons.menu), onPressed: () { print("menu button clicked"); },), Drawer 샘플 스크린샷 1..

Flutter에서 AppBar 메뉴 아이콘 추가하기 플러터에서 AppBar(Swift에서 UINavigationBar) 구성하는 방법 정리. 시작하기 전에.이번에는 print문을 통해 콘솔에 로그를 찍어 보면서 확인하는 작업이 많았음.콘솔창이 안보인다면, 아래 이미지에 벌레 모양 아이콘을 클릭하면 디버그 콘솔이 활성화 되고 로그를 확인할 수 있음. 코드 샘플AppBar에 대한 간단 정리leadingAppBar의 왼쪽 영역에 위치한 위젯을 의미. 주로 메뉴 버튼(☰)을 배치함.actionsAppBar의 오른쪽 영역에 여러 개의 아이콘 버튼을 배치할 때 사용.IconButton클릭 가능한 아이콘 버튼 위젯. icon:으로 표시할 아이콘을 지정하고, onPressed: 안에 클릭 시 실행할 코드를 작성.e..

Dart에서 클래스(Class)와 생성자(Constructor) Dart에서 클래스랑 생성자를 간단하게 정리. 클래스(Class)란?객체가 가져야 하는 속성과 기능을 정의한 설계도(blueprint)클래스는 변수와 메서드를 포함할 수 있음객체(Object)는 이 클래스를 기반으로 실제 메모리에 생성된 실체class Person { String name = 'John'; int? age; String? sex;} 객체(Object)와 인스턴스(Instance)객체클래스로부터 생성된 실제 메모리 상의 데이터인스턴스“객체”와 같은 의미이지만, 클래스에서 생성되었다는 관계를 강조할 때 사용 즉, 클래스를 정의하면 설계도가 생기고, 그 설계도를 기반으로 실제로 만든 것이 인스턴스(객체)이다. 기본 생..

캐릭터 페이지 디자인 실습이번에는 캐릭터 페이지를 만들어보는 실습을 진행. AppBarCenterTitle : title을 중앙에 위치 시킴 - True or Falseappbar Background : 앱바 배경색 바꿈elavation : 앱 바에 있는 그림자 설정 Padding Widget패딩도 하나의 위젯임즉, 하나의 View라는 의미. 플러터에서 가로 방향에 대해서는 width를 가능한 넓게 채우도록 레이아웃이 설정되어 있고, 세로 축에 대해서는 별도의 레이아웃을 잡지 않음.따라서 아래 코드처럼 세로축을 기준으로 중심에 위치하게 하는 코드이다.mainAxisAlignment: MainAxisAlignment.center Center Widget얘도 뷰라서 결국은 위젯으로 볼 수 있고 레이아웃..

프로젝트 폴더와 기본 코드 이해하기 모든 앱 개발에서 폴더 구조와 기본 코드 구조가 존재하듯이 이를 정리. 플러터 프로젝트 폴더의 구성 pubspec.ymal : 프로젝트의 버전 라이브러리 등을 관리안드로이드 폴더 및 iOS폴더는 각각의 플랫폼에 배포하기 위한 코드를 가짐test폴더는 Dart코드 테스팅 위한 코드lib폴더 여기서 앱 만들 때 작업을 주로 한다 코드의 기본 구조클래스 명과 함수 명메서드 명은: goHome() 형태로 작성클래스 명은: MyApp 형태로 작성클로징 레이블플러터는 위젯으로 작업해서 닫는 부분이 정말 중요한데, 클로징 레이블을 주석을 제공해줌. 샘플 코드 작성import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수..