본문 바로가기
728x90

Flutter for Beginners34

Flutter 디지털 시계 + 나침반 + 날씨정보 기상청 단기예보 API 활용 신청하기회원 가입후 활용신청 가능 합니다. 기상청_단기예보 ((구)_동네예보) 조회서비스 | 공공데이터포털 기상청_단기예보 ((구)_동네예보) 조회서비스초단기실황, 초단기예보, 단기((구)동네)예보, 예보버전 정보를 조회하는 서비스입니다. 초단기실황정보는 예보 구역에 대한 대표 AWS 관측값을, 초단기예보는 예보시점부터 6시간까지의 예보를,www.data.go.kr프로젝트 구조Android, Windows, Web 만 적용합니다.iOS는 나중에.. Flutter Dependencies 추가pubspec.yamldependencies: flutter: sdk: flutter intl: '^0.20.2' flutter_compass: '^0.8.1' permissio.. 2025. 3. 25.
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.
728x90

티스토리툴바