InheritedWidget Inherited Widget은 Flutter에서 상위 위젯에서 하위 위젯으로 데이터를 전달할 때 주로 이용됩니다. 위젯을 사용시 StatefulWidget과 StatelessWidget을 사용하여 트리가 구성이 될때 변화가 필요한 위젯이 트리의 마지막에 위치할 경우 타고 타고 올라가서 Top까지 올라가야 하지만 Inherited Widget을 사용하게 된다면 바로 Top에 접근이 가능해집니다.그렇지만 서도 내려갈때는 트리의 중간 위젯을 거치기 때문에 build를  Inherited Widget부터 사용중인 위젯까지 전부 해주게 됩니다.   InheritedParent// InheritedWidget 내장 데이터 타입을 상속받아 구현한다.import 'package:flutt..

1단계 작업 (stl, stf 기본 위젯 사용)1단계 - main1. dart  -  Statelessimport 'package:flutter/material.dart';void main() { runApp( MaterialApp( home: MySatelessWidget(), ), );}// Stateless// 상태의 변화 없이 항상 동일한 UI를 그립니다.// 이런 위젯은 데이터나 변수의 값이 변하지 않을 때 사용합니다.// 포인트 !// 사실 상태는 변수에 할당된 값 입니다.class MySatelessWidget extends StatelessWidget { const MySatelessWidget({super.key}); final msg = '안녕하세요 저는 상태..

콜백함수콜백함수는 특정 작업이나 이벤트가 발생했을때 실행되도록 미리 정의해 두는 함수입니다. 다른 함수가 실행을 끝낸 뒤 실행되는 callback함수를 의미합니다. 비동기 작업, 사용자 입력 또는 특정 상태변화에 따라 원하는 동작을 구현하는데 유용합니다. 콜백함수의 개념콜백 함수는 다른 함수나 위젯에 전달되어 특정 시점에서 호출되는 함수입니다. 보통 버튼 클릭, 사용자 동작, 또는 비동기 작업 완료 시 호출됩니다. void exampleFunction(Function callback) { print("Before callback"); callback(); // 전달받은 함수를 호출 print("After callback");}// 콜백함수 사용void main() { exampleFunction(..

Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다 Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다. Stack 위젯은 주로 위젯들 간의 위치를 상대적으로 정의할 때 사용됩니다.Stack 위젯과 alignment 속성의 사용import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialA..

기초적인 Flutter 화면을 구성하는 패턴'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Scaffold:앱의 시각적 레이아웃에 대한 기본 구조 제공appBar 및 body와 같은 속성 설정레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함body에 실제 화면 관련 위젯 정의'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Sca..

위젯(Widget)위젯의 종류Flutter는 풍부한 UI 위젯을 제공합니다. 자세한 내용은 공식 문서에서 확인할 수 있습니다.위젯들을 이해하기 쉽게 직접 나누어 봅시다(공식적인 분류는 아직 존재하지 않는 것 같음)1. 플랫폼별 위젯Material (Android) 위젯Google의 Material Design 가이드라인을 따르는 위젯들입니다.Cupertino (iOS) 위젯Apple의 Human Interface Guidelines를 기반으로 한 iOS 스타일 위젯들입니다.대부분의 경우 Material 위젯을 사용하지만, 플랫폼별 특성을 살리고 싶다면 각각의 위젯을 적절히 활용할 수 있습니다.2. 기본 위젯 (Basic Widgets)Text: 다양한 스타일의 텍스트를 표현합니다.Row와 Column: ..

명령형 UI어떠한 상태가 되도록 명령한다.ViewA a = ViewA();ViewB b = ViewB();a.setColor(red) // 빨간색이 되어라b.setColor(yello) // 노란색이 되어라a.add(b) // b는 a의 child가 되어라 선언형 UI어떠한 최종 상태를 선언한다// 빨간색 A가 노란색 B를 child로 가지고 있다.return ViewA( color: red, child: ViewB( color: yello, ),); 선언형 UI상태만 선언하면 UI는 자동으로 업데이트된다.최종 상태 선언에만 집중할 수 있다.예시) Flutter StatefulWidget명령형 UI상태 변경에 따른 UI 업데이트를 직접 명령한다.UI를 보다 세밀하게 제어 할 수 있다.예시) Java..

StatelessWidget 과 고정 상태 import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: MyStatelessWidget()));}// Stateless// 상태의 변화 없이 항상 동일한 UI를 그립니다.// 이런 위젯은 데이터나 변수의 값이 변하지 않을 때 사용합니다.class MyStatelessWidget extends StatelessWidget { // 변수에 final 키워드 즉 상수이다. final msg = '안녕하세요! 저는 Stateless 위젯입니다.'; @override Widget build(BuildContext context) { return Scaffold( ..

MaterialApp과 CupertinoAppFlutter는 쿠퍼티노 디자인 혹은 머터리얼 디자인중 하나를 사용하게 되는데 둘의 차이점은 각각 MeterialApp 은 안드로이드의 디자인이고 CupertinoApp은 Ios디자인이다.  MaterialApp구글의 머터리얼 디자인(Material Design) 가이드라인을 기반으로 앱을 구성하는 최상위 위젯이다.Flutter로 안드로의 스타일 앱을 만들때 주로 사용한다.ios를 포함한 다른 플랫폼에서도 문제가 되지 않으며, Material Design을 사용하고 싶다면 모든 플랫폼에 대해 MaterialApp을 사용할 수 있다.주요 속성home: 앱이 실행되었을 때 처음으로 표시할 위젯theme: 머터리얼 디자인 테마를 설정할 수 있는 파라미터.routes..

Flutter는 Dart언어를 기반으로 동작한다. Dart의 컴파일 방식에는 크게 AOT(Ahead-Of-Time)와 JIT(Just-In-Time) 두 가지가 있다. AOT(Ahead-Of-Time) 특징코드를 앱 실행 전에 미리 기계어(네이티브 코드)로 컴파일 한다.프로덕션(릴리즈) 빌드 시 Dart 코드를 AOT로 변환하여 배포한다. ✅장점미리 최적화된 네이티브 코드를 사용함으로, 런타임 성능이 우수하다.해석 과정없이 곧바로 실행되므로 속도가 빠르고 안정적이다.최종 앱 패키지 크기가 더 작아질 수 있다.❌단점앱을 빌드하는 과정에서 컴파일 시간이 증가할 수 있다.코드 수정 시마다 새로 빌드를 해야하기에 개발 과정에서 반복 테스트시 불편하다. JIT(Just-In-Time)특징코드 프로그램 실행중(런타..