Image Carousel이란?여러 장의 이미지를 가로 또는 세로로 넘겨가며 표시하는 UI 요소입니다. 보통 자동 슬라이드 + 좌우 화살표를 할께 제공하며 사용자가 직접 터치/드래그/버튼 클릭으로 넘길 수도 있고 일정 시간마다 자동으로 넘어가기도 합니다. 한정된 화면 공간에서 여러 장의 이미지를 보여줄 때, 주로 사용하며 대표 이미지, 광고, 배너에 활용 됩니다. 예시로 쇼핑몰 앱에서는 메인 화면에서 여러 상품 프로모션 배너를 자동으로 넘기는 슬라이드가 있고, 호텔 예약 앱에서는 호텔 상세 페이지에서 숙소 사진들을 좌우로 넘겨보는 방식이 있습니다. Timer란?Timer는 프로그래밍에서 특정 시간이 지난 뒤 실행하거나, 일정 간격마다 반복 실행을 하기 위한 기능입니다. "몇 초 뒤에 이 작업을 실행"하..

Life Cycle?widget이 언제 만들어지고 보여지고 사라지는지에 대한 흐름입니다. widget에 대한 탄생과 죽음 과정이라고 생각하면 될 것 같습니다. 그럼 왜 life cycle이 중요할까. 데이터를 불러오거나 리소스를 정리하거나 화면을 다시 그릴 타이밍을 알기 위해서 입니다. life cycle을 알지 못하면 data flow 따라가지 못하게 되고 정확한 유지보수가 어렵습니다. 즉 정리하면 statelesswidget, statefulwidghet에 대한 생성과 소멸에 대한 개념입니다. StatelessWidget Life Cycle원리는 간단합니다. 생성자와 빌드함수가 있을 때, 누가 먼저 출력되는지 확인해보면 됩니다. statelesswidghet life cycle은 생성자가 실행되고 ..

StatefulWidget?변할 수 있는 화면을 만들 때 사용하는 위젯 입니다. 사용자 행동이나 앱 상황에 따라 화면이 바뀌는 경우에 사용합니다. 예를 들어 버튼을 누르면 숫자가 올라가거나 글씨 색깔이 변경되거나 탭을 누르면 화면 내용이 변경된거나,어떤 이벤트로인해서 화면이 변경이 필요할 때 사용하는 위젯 입니다. StatelessWidget과 비교했을 때, 변할 수 있는 화면에서 차이가 있습니다. StatefulWidget은 동적이고 StatelessWidget은 정적입니다. 왜 사용해?Home.dart 페이지에 아래와 같이 코딩해주세요. 기본적으로 가운데 버튼과 네모난 박스가 있습니다. onPressed 역할은 버튼을 눌렀을 때, 이벤트에 대한 정의입니다. 아래 코드에서는 버튼을 눌렀을 때, 현재 ..

WebView?앱 안에 웹사이트를 띄우는 창입니다. 모바일안에 브라우저를 넣는 개념입니다. 저는 웹 개발만 해왔기 때문에 webview로 접근해보도록 하겠습니다. pub.devFlutter와 Dart에서 사용할 수 있는 라이브러리를 다운받을 수 있는 공식 사이트입니다. pub.dev 접속하여 web view 검색하여 아래 라이브러리의 제목 옆에 있는 복사 버튼을 눌러주세요. 프로젝트로 돌아와서, pubspec.yaml 파일에 depenencies 찾아서 복사해온 값을 아래와 같이 넣어주세요. 그러면 최신 버전의 webview_flutter 가 추가 될 것 입니다. dependencies: flutter: sdk: flutter # The following adds the Cupertino Ic..

Padding?padding은 화면 안의 요소와 테두리 사이의 여백을 의미합니다. 예를 들어 박스 안에 글씨가 있을 때, 글씨와 테투리 사이를 띄워주는게 padding입니다. EdgeInsetspadding이나 margin을 얼마나 띄울지 정하는 속성입니다. 속성값에 따라서, 얼마나 띄울지 정의하게 됩니다. 아래 코드에서는 EdgeInsets.all 속성값을 사용하였습니다. 상하좌우 모두 30px padding 값을 적용한다는 의미입니다. import 'package:flutter/material.dart';class Home extends StatelessWidget { const Home({super.key}); @override Widget build(BuildContext context) ..

Row and Column?Row와 Column은 위젯을 나란히 또는 위아래로 정렬할 때 사용합니다. Row는 가로 Column은 세로 입니다. MainAxisAlignmentRow 또는 Column 안에 있는 여러 위젯을 어떻게 정렬할 것인지 정의하는 속성입니다. Row에서 사용하면 mainaxixaligment가 가로 방향, Column에서 사용하면 세로 방향 입니다. 정리하면 mainaxixalignment는 Row 기준 좌우 정렬, Column 기준 위아래 정렬 입니다. start : 왼쫀 정렬(Row), 위 정렬(Column)center : 가운데(Row), 가운데(Column)end : 오른쪽(Row), 아래(Column)spacBetween : 위젯을 양끝에 붙이고 동일한 간격을 두고 정렬..

Stateless Widget?상태가 변하지 않는 위젯을 말합니다. 한번 만들어지면 화면이 변경되지 않고 그대로 유지되는 위젯 입니다. 사용자가 어떤 액션을 하더라도 내부 데이터가 변경되지 않기 때문에 다시 그릴 필요 없습니다. 한 번 화면에 보여지면 변하지 않는 영역을 담당 합니다. 우리가 기존에 있던 소스가 정적이라고 가정하고 Stateless Widget 적용해보도록 하겠습니다. Widget 타입을 반환하는 클래스를 하나 생성하고 StatelessWidget 클래스를 상속 받습니다. 해당 클래스가 호출될 경우 build 함수가 동작하면서 UI에 랜더링 됩니다. import 'package:flutter/material.dart';void main() { print('✅ main() 함수가 실행..

Widget?계속 언급했듯이 Flutter 위젯은 UI의 기본 구성 요소로 화면에 표시되는 모든 것을 의미 합니다. 텍스트, 버튼, 레이아웃 등 모두 위젯으로 표현됩니다. 즉 Flutter에서 표현되는 모든 것들이 위젯이라고 할 수 있습니다. Widget Tree?위젯 트리란 위젯들이 부모-자식 구조로 구성된 계층 입니다. 앱이 실행되면 Flutter는 이 위젯 트리를 분석하여 UI를 구성하고 렌더링 합니다. Splash Screen?Flutter에서 Splash Screen이란 앱이 실행될 때 가장 먼저 보여지는 초기 화면을 의미 합니다. 사용자가 앱 아이콘을 눌러 실행한 뒤, 실제 앱의 첫 화면이 렌더링되기 전가지 로딩 중이라는 느낌을 주는 임시 화면입니다. 앱이 로드되는 동안 화면을 방지하고 브..