본문 바로가기
728x90

분류 전체보기977

Flutter PageView을 이용한 자동 슬라이드 이미지 겔러리 PageController를 사용해 슬라이드를 제어Timer.periodic으로 3초마다 다음 페이지로 이동마지막 이미지에 도달하면 처음으로페이지 이동에는 animateToPage를 사용해 부드러운 전환을 구현dispose()에서 타이머와 컨트롤러 정리전체 코드import 'dart:async';import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '자동 이미지 갤러리', theme: ThemeData( .. 2025. 3. 24.
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.
728x90

티스토리툴바