본문 바로가기
728x90

mobile programming40

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

티스토리툴바