본문 바로가기
728x90

Flutter for Beginners41

Flutter WebViewController를 이용한 블로그 앱 만들기 블로그앱 구성상단 Appbar의 타이틀 "tistory", 색상은 f9e000, 굵은 글씨, 중앙정렬Appbar 우측에 '홈' 버튼 생성, 클릭하면 'https://bigdown.tistory.com/' 로 이동AppBar 좌측에 뒤로가기 버튼을 추가하여 웹 브라우저의 뒤로 가기 기능을 수행스마트폰의 뒤로 가기 버튼을 누르면 이전 페이지로 이동하도록 WillPopScope을 활용하여 처리 Webview에서는 'https://bigdown.tistory.com/' 로 접속, 자바스크립트 등의 기능 활성화Webview 좌측 하단에 '방명록' 플로팅 버튼을 추가하고 클릭하면 'https://bigdown.tistory.com/guestbook'으로 이동pubspec.yam에 'webview_flutter' 플.. 2025. 3. 21.
Flutter의 상태 관리 기본 개념 (setState vs. Provider) Flutter의 상태 관리 기본 개념 (setState vs. Provider)Flutter에서 UI는 **상태(State)**에 따라 변경됩니다. 상태 관리(State Management)는 어떻게 데이터를 관리하고 UI에 반영할지를 결정하는 중요한 개념입니다.1. 상태(State)란?상태(State)란 UI가 변경될 때 필요한 데이터를 의미합니다.예를 들어, 버튼 클릭 시 카운터가 증가하는 앱을 만든다면, 카운터 값(int counter)이 상태가 됩니다.StatelessWidget → 변하지 않는(정적인) UIStatefulWidget → 사용자 입력이나 이벤트에 따라 변경되는 UI2. setState() (기본적인 상태 관리 방법)setState()는 StatefulWidget 내에서 간단한 상태.. 2025. 3. 14.
Flutter의 배치(Layout) 관련 위젯 Flutter의 배치(Layout) 관련 위젯Flutter에서 UI를 구성할 때 배치(Layout) 관련 위젯을 사용하여 요소들을 정렬하고 배치할 수 있습니다.배치 관련 위젯은 크게 단일 요소 배치, 수직/수평 정렬, 겹쳐 배치, 그리드 배치 등으로 나눌 수 있습니다. 1. Container (기본 배치 및 스타일링)Container는 크기, 패딩, 마진, 정렬, 색상 등을 설정할 수 있는 가장 기본적인 배치 위젯입니다. 예제: 크기, 정렬, 색상 적용Container( width: 200, height: 100, alignment: Alignment.center, // 내부 콘텐츠 정렬 decoration: BoxDecoration( color: Colors.blue, // 배경색 b.. 2025. 3. 14.
Flutter의 디자인 관련 위젯 Flutter의 디자인 관련 위젯Flutter는 Material Design과 Cupertino(iOS 스타일)을 지원하며, 다양한 디자인 관련 위젯을 제공합니다.UI를 꾸미고 스타일을 적용하는 데 유용한 주요 위젯을 정리해보겠습니다.1. 컨테이너 (Container)Container는 박스(Box) 형태의 UI 요소로, 크기 조정, 배경색, 테두리, 그림자 등을 적용할 수 있습니다. Container( width: 200, height: 100, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.blue, // 배경색 borderRadius: BorderRadius.circular(15), // 둥근 모서리 .. 2025. 3. 13.
Flutter의 제스처(Gesture) 관련 위젯 Flutter의 제스처(Gesture) 관련 위젯Flutter에서는 사용자의 터치, 스와이프, 탭, 길게 누르기 등의 입력을 감지하는 제스처(Gesture) 위젯을 제공합니다.이러한 위젯을 활용하면 버튼, 드래그 가능한 UI, 애니메이션 등의 다양한 상호작용을 구현할 수 있습니다.1. GestureDetector (가장 기본적인 제스처 감지 위젯)GestureDetector는 사용자의 다양한 터치 이벤트를 감지할 수 있는 기본 위젯입니다.import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @overrid.. 2025. 3. 11.
Flutter의 텍스트 관련 위젯 Flutter의 텍스트 관련 위젯Flutter에서 텍스트를 표시하고 스타일을 지정하는 데 사용할 수 있는 여러 위젯이 있습니다. 대표적으로 Text, SelectableText, RichText 등이 있으며, 각 위젯의 특징과 사용법을 살펴보겠습니다.1. 기본 텍스트 위젯 (Text)Flutter에서 텍스트를 표시하는 가장 기본적인 위젯입니다.1.1. 기본 사용법Text("Hello, Flutter!")단순한 텍스트를 화면에 표시할 때 사용합니다.1.2. 스타일 적용 (TextStyle)Text( "Hello, Flutter!", style: TextStyle( fontSize: 24, // 글자 크기 fontWeight: FontWeight.bold, // 굵기.. 2025. 3. 7.
안드로이드 스튜디오에서 Flutter "Hello Flutter" 앱 만들기 Hello, Flutter1. 새로운 Flutter 프로젝트 생성Android Studio 실행Welcome to Android Studio 화면에서New Flutter Project 클릭또는 File → New → New Flutter Project 선택Flutter 프로젝트 유형 선택Flutter Application 선택 후 Next프로젝트 설정Project name: hello_flutter (프로젝트 이름)Flutter SDK Path: Flutter SDK 경로 선택Project location: 저장할 폴더 선택Description: (선택 사항) 프로젝트 설명 입력Platforms: Android와 iOS를 기본 활성화Create 클릭하여 프로젝트 생성2. "Hello Flutter" 코드.. 2025. 3. 6.
Flutter vs. React Native Flutter vs. React Native 비교Flutter와 React Native는 크로스 플랫폼 앱 개발을 위한 대표적인 프레임워크입니다. 하지만 기술 스택, 성능, 개발 방식, UI 렌더링 방식 등 여러 측면에서 차이가 있습니다. 아래에서 두 프레임워크를 비교해 보겠습니다.1. 기본 개념 및 개요항목FlutterReact Native개발사GoogleMeta (Facebook)출시 연도2017년2015년언어DartJavaScript (React.js 기반)렌더링 방식Skia 엔진을 사용한 자체 렌더링네이티브 브릿지를 통한 네이티브 컴포넌트 사용핵심 철학자체 UI 엔진 사용으로 일관된 UI 제공네이티브 컴포넌트를 사용해 네이티브와 유사한 UX 제공Flutter: Skia 엔진을 사용하여 모든 UI를.. 2025. 3. 6.
플러터(Flutter) 소개 Flutter란?Flutter는 Google에서 개발한 오픈소스 UI 프레임워크로, 하나의 코드베이스로 Android, iOS, 웹, 데스크톱, 임베디드 시스템에서 실행되는 애플리케이션을 개발할 수 있습니다. Dart 언어를 사용하며, 성능이 뛰어나고 빠른 개발 속도를 제공합니다.Flutter의 주요 특징크로스 플랫폼 개발한 번의 코드 작성으로 Android, iOS, 웹, Windows, macOS, Linux 등의 다양한 플랫폼을 지원합니다.Hot Reload(핫 리로드)코드 변경 사항을 즉시 반영하여 빠른 개발과 실험이 가능합니다.자체 렌더링 엔진(스키아)Flutter는 네이티브 위젯이 아닌 자체 렌더링 엔진(Skia)을 사용하여 UI를 직접 그립니다. 이를 통해 일관된 디자인과 부드러운 성능을 제.. 2025. 3. 5.
728x90

티스토리툴바