lgvv98

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를 적용할 수..

1. Flutter에서의 위젯(Widget)이란? Flutter에서 위젯은 UI를 만드는 모든 기본 단위 요소.화면에 보이는 텍스트, 이미지뿐만 아니라 패딩, 정렬 같은 눈에 안 보이는 요소까지 모두 위젯.Flutter의 핵심 철학은 Everything is a widget임.전통적인 개발의 '뷰' 같은 개념이 모두 위젯으로 통일됨.그래서 UI는 코드로만 작성하며, 스토리보드 같은 시각 도구가 따로 없음.일반적인 위젯과의 차이점일반적인 위젯은 바탕화면에 날씨 보여주는 작은 프로그램 말하는 거지만, Flutter 위젯은 UI를 조립하는 레고 블록 같은 역할. 2. 위젯의 종류: Stateless 위젯 vs. Stateful 위젯위젯은 상태(State)를 관리하는지 여부에 따라 두 가지로 나뉨.Statel..

플러터 시작하기 학습 세팅 플러터가 핫하다고 해서 학습을 하고자 한다.기존에 안드로이드(Java) XML 기반으로 학습하다가 데이터 사이언스가 재미있어서 이쪽으로 하다가 다시 웹은 영 아닌거 같고, iOS를 가장 오래 했었는데, Flutter(Dart)도 알아두면 좋을거 같아서 이것도 배워보자 플러터 학습 사이트 정하기원래는 플러터 학습을 위해 외국 사이트 강의를 들으려고 했는데, 자막이 불편하고 온전히 영여를 다 이해하기가 어려워서 국내 유튜브 강의로 진행하려고 함. 내 맥북 환경인텔맥에서도 플러터 돌아가는데 문제가 없다. 유튜브 강좌 링크https://www.youtube.com/watch?v=jI4kqLdqXic&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=5..