close
1. 설명decoration: InputDecoration()을 사용해서, TextField 틀 장식InputDecoration() 주요 propertyfocusedBorder: TextField가 선택되었을 때의 테두리 설정enabledBorder: TextField가 활성화가 되었을 때의 테두리 설정OutlineInputBorder(): 상하좌우 테두리UnderlineInputBorder(): 하단 테두리InputBorder.none: 테두리 없음labelText: TextField 선택에 상관없이 텍스트를 표시하는데 사용labelStyle로 레이블 텍스트 스타일 설정 가능 (예, labelStyle: TextStyle(color: Colors.amber))hintText: TextField 내부에 ..
Material Symbols and Icons - Google FontsMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.fonts.google.com1. 프로젝트 설정 Google Fonts의 Material Icons는 Flutter에 기본적으로 내장되어 있다. 별도의 추가 설정 없이 바로 사용할 수 있다.2. 아이콘 찾기 Google Fonts Icons 사이트에서 원하는 아이콘을 검색하고 아이콘 이름을 확인하자.예를 들어, home, favorite, settings 등의 이름을 얻을 수 있다.3. 사용 예제 Flut..
1. MaterialApp color theme와 Material 3 색상 useMaterial3를 사용하면, Material 라이브러리의 최신 버전 사용 가능 (주류 대중성 가능성이 있으므로 참고하라고 함)useMaterial3와 seedColor, Theme.of(context).colorScheme를 사용하면, Material 3 디자인 가이드에 따른 색상값을 사용할 수 있음주요 Theme.of(context).colorSchemeprimary/primaryContainer: 강조 요소secondary/secondaryContainer: 보조 요소tertiary/tertiaryContainer: 세부 요소colorScheme.primary와 colorScheme.primaryContainer 차이:..
1. asset이란? asset은 앱 구성에 필요한 리소스 파일들을 의미한다. 예로 아이콘, 이미지, JSON 파일, 폰트 파일 등이 있다.이러한 리소스는 앱 빌드 시 내부에 포함되어야 하며, 이를 위해 pubspec.yaml 파일에 등록이 필요하다.2. Text 위젯에서 로컬 폰트(fontFamily) 설정하기 Flutter에서 Text 위젯의 fontFamily를 로컬 폰트로 설정하려면, asset으로 폰트를 등록한 후 사용해야 한다.폰트 다운로드 Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.comfonts: - family: Schyler f..
1. 패턴'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Scaffold:앱의 시각적 레이아웃에 대한 기본 구조 제공appBar 및 body와 같은 속성 설정레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 한다body에 실제 화면 관련 위젯 정의import 'package:flutter/material.dart';void main() { runApp(MyApp());}// 상태 기반 UIclass MyApp extends StatelessWidget { con..
Flutter에서 UI가 화면에 렌더링되는 과정에는 위젯 트리, 엘리먼트 트리, 렌더 트리라는 세 가지 주요 개념이 있다.1. 위젯 트리 (Widget Tree) 정의: 위젯 트리는 Flutter 애플리케이션의 구조와 모양을 정의하는 계층적 트리이다.역할: 앱 화면에 표시할 UI 구성 요소를 정의한다. Text, Button, Column 같은 위젯을 조합하여 화면 구성을 정의하는 코드이다.특징: 위젯은 불변(immutable)하며, 사용자가 화면을 변경하면 Flutter는 새로운 위젯 트리를 생성한다.2. 엘리먼트 트리 (Element Tree) 정의: 엘리먼트 트리는 위젯 트리를 바탕으로 생성된 트리로, 위젯 인스턴스와 실제 화면 사이를 연결하는 역할을 한다.역할: 위젯을 구체화하여 상태와 연결한다...
