[Flutter] 21. Scaffold 위젯과 사용법, 주요 Property  1. MaterialApp의 주요 property와 사용법theme: 앱의 전체 테마, 색상 구성 등이 포함homeL 앱이 시작할 때 보여질 기본 경로 혹은 위젯  2. Scaffold 위젯 사용법과 주요 propertyMaterialApp 내에서 머테리얼 디자인의 기본 레이아웃 구조를 제공하는 위젯이다.*주요 PropertyappBar: 화면의 상단에 있는 앱 바body: 화면의 기본 내용, 일반적으로 위젯의 목록floatingActionButton: 인터페이스에 위치한 추가 버튼drawer: Scaffold 위젯의 사이트 메뉴persistentFooterButtons: 화면 하단에 표시되는 버튼의 행bottomNaviga..

[Flutter] 20. 기초적인 Flutter 화면을 구성하는 패턴 1. 기초적인 Flutter 화면 구성 패턴'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme같은 속성 설정home: 속성을 주 페이지로 정의Scaffold: 앱의 시각적 레이아웃에 대한 기본 구조를 제공한다. (ex: appBar, body) *머터리얼 디자인에서 수많은 오픈소스 위젯을 받아 사용할 수 있다.https://m3.material.io/components/chips/specs Chips – Material Design 3Chips help people enter information, make selections, filter content,..

[Flutter] 19. 위젯 트리, 엘리먼트 트리, 렌더 트리란? Flutter에는 UI가 화면에 렌더링되는 과정에는 위젯 트리, 엘리먼트 트리, 렌더 트리라는 세 가지 주요 개념이 있다. 1. 위젯 트리 (Widget Tree)정의: 위젯 트리는 플러터 애플리케이션의 구조와 모양을 정의하는 계층적 트리이다.역할: 앱 화면에 표시할 UI 구성 요소를 정의한다. 텍스트, 버튼, 컬럼 같은 위젯을 조합해 화면 구성을 정의하는 코드이다.특징: 위젯은 불변하며, 사용자가 화면을 변경하면 플러터는 새로운 위젯 트리를 생성한다. 2. 엘리먼트 트리 (Element Tree)정의: 엘리먼트 트리는 위젯 트리를 바탕으로 생성된 트리로, 위젯 인스턴스와 실제 화면 사이를 연결하는 역할을 한다.역할: 위젯을 구체화해 상..

[다모아 : 기능 구현] 프로젝트-프리랜서 매칭 기능 구현 로직 살펴보기 오늘은 내가 구현한 프로젝트-프리랜서 매칭 기능에 대해 이야기해보고자 한다.  기능 설명에 들어가기 앞서 핵심 기능인 매칭에 대해 알아야 한다. 전체적으로 보자면기업 측이 포인트 충전 기업 측이 포인트를 사용해 프로젝트 공고 게시프로젝트가 마음에 든다면, 프리랜서 측이 [매칭 신청] 버튼 클릭기업 측이 마음에 드는 프리랜서를 고르고, [공고 마감]버튼 클릭이라고 할 수 있다. 다만 이 과정에서 자잘한 상태값 변경이 있고, 상태에 따라 보여주는 목록이나 기능이 조금씩 달라진다.   1. 상태값 종류 우선 상태값에 대해 이야기해보고자 한다. 우리가 배달 어플을 사용할 때, [주문 전]-[장바구니]-[결제 전]-[결제 후]-[주문 확인]..

[Flutter] 18. 컨테이너 배치하기 연습 문제  -컨테이너들을 배치할 때, HTML에서 사용했던 태그, display: flex 개념과 flex-direction: column, justify-content/align-items 개념을 숙지하고 응용하면 쉽다import 'package:flutter/material.dart';void main(){ runApp(Test1());}class Test1 extends StatelessWidget { const Test1({super.key}); @override Widget build(BuildContext context) { return Container( color: Colors.white, child: Column..

[Flutter] 17. 플러터 기초 다지기 - (5) Column과 Row 위젯*const와 final의 차이constfinal컴파일 시점에 초기화런타임 시점에 초기화-const는 기계어로 바뀌어질 때 초기화된다. const를 사용하면 성능을 높일 수 있다.-final은 통신을 통해 초기화 될 때, 한 번 초기화된다.  *시나리오 코드 (1) Placeholderimport 'package:flutter/material.dart';void main(){ runApp(MyHome());}// 상태 여부 위젯 선정class MyHome extends StatelessWidget{ // Const 생성자 const MyHome({super.key}); // build 메서드는 화면에 그림을 그려주는 ..

[Flutter] 16. 플러터 기본기 다지기 - (4) Basic Widget 살펴 보기 *Flutter에 공식적인 용어가 정립되어 있지 않다!  1. layout 위젯visible 위젯을 원하는 위치에 배치하기 위해 layout 위젯을 사용한다.간단하고 기본적인 layout 위젯은 Container와 Center 위젯  2. visible 위젯간단하고 기본적인 visible 위젯은 아래와 같다. (1) Text 위젯Text('Hello World') (2) Image 위젯Image.asset('images/lake.jpg') (3) Icon 위젯Icon(Icons.home)   3. Visible 위젯을 Layout 위젯 안에 넣음모든 Layout 위젯은 하나의 자식을 가질 수 있는 위젯과, 여러 자..

[Flutter] 15. 플러터 기본기 다지기 (3) - 플러터 코드의 이해 1. 패키지와 임포트패키지: Flutter와 커뮤니티에서 제공하는 재사용 가능한 코드 모듈import 문으로 필요한 패키지와 위젯을 추가할 수 있다.패키지에는 Dart 기본 패키지, Flutter 제공 패키지, 외부-사용자 정의 패키지 등의 종류가 있다.   2. main()과 runApp() 함수Flutter 앱 시작 시, main() 함수 내의 runApp() 함수가 호출되어 앱이 실행된다.   3. analysis_options.yml코드 가이드를 비활성화 시키고 싶다면, 아래 코드를 analysis_options.yaml에 추가하면 된다.rules: prefer_typing_uninitialized_variables :..

[Flutter] 14. 플러터 기본기 다지기 (2) - 나만의 플러터 위젯 분류 1. 플러터와 위젯-Flutter는 풍부한 UI 위젯을 제공한다. -자세한 정보는 Flutter 공식 문서에서 확인할 수 있다. https://docs.flutter.dev/ui/widgets Widget catalogA catalog of some of Flutter's rich set of widgets.docs.flutter.dev  2. 플러터 위젯의 종류 (1) 플랫폼 별 위젯  대부분의 경우 Material 위젯을 사용한다.플랫폼별 특성을 살리고 싶다면, 각각의 위젯을 적절히 활용할 수 있다.Material(Android) 위젯Cupertino(iOS) 위젯Google의 Material Design 가이드라인을 ..

[Flutter] * Flutter 공식 사이트 문서 읽기 -아래의 링크에서 플러터 공식 문서를 읽어볼 수 있다. https://docs.flutter.dev/?_gl=1*1hkwczv*_up*MQ..*_ga*MjA1MTgzOTQwNC4xNzMwNzY4NDU1*_ga_04YGWK0175*MTczMDc2ODQ1NS4xLjAuMTczMDc2ODQ1NS4wLjAuMA..