일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- Animation
- Firebase
- HTML
- 오류
- AnimationController
- Maui
- 리엑트
- React JS
- .NET
- listview
- Flutter
- 닷넷
- 마우이
- 깃허브
- 파이어베이스
- 자바스크립트
- MS-SQL
- 함수
- MVVM
- Binding
- typescript
- 애니메이션
- spring boot
- page
- db
- 플러터
- GitHub
- 바인딩
- MSSQL
- JavaScript
- Today
- Total
목록앱 개발/Flutter (83)
개발노트
ValueListenableBuilder ValueListenableBuilder는 Flutter의 위젯 중 하나로, ValueNotifier 또는 이와 유사한 클래스의 값이 변경될 때 UI를 다시 빌드합니다. 이 위젯은 주어진 ValueNotifier를 감시하고, 해당 ValueNotifier의 값이 변경될 때마다 builder 함수를 호출하여 새로운 위젯을 생성합니다. 일반적으로 ValueListenableBuilder는 다음과 같은 상황에서 사용됩니다: 값의 변화를 감시하고 UI를 업데이트할 때: 예를 들어, 애니메이션의 진행률을 나타내는 ValueNotifier를 사용하여 ValueListenableBuilder를 생성하면, 애니메이션의 진행률이 변경될 때마다 Slider나 Progress Ind..
CurvedAnimation Curve 적용: **CurvedAnimation**은 애니메이션을 제어하는데 사용되는 Animation 객체와 **Curve**를 인자로 받습니다. **Curve**는 애니메이션의 진행을 제어하는데 사용되며, 일반적으로 Curves 클래스에서 제공되는 미리 정의된 커브를 사용합니다. 보간(Interpolation): **CurvedAnimation**은 주어진 **Curve**에 따라 애니메이션 값의 보간을 조절합니다. 예를 들어, **Curves.easeIn**을 사용하면 애니메이션은 천천히 시작하여 점차 속도를 증가시킵니다. 애니메이션 제어: **CurvedAnimation**은 **AnimationController**와 함께 사용하여 애니메이션을 제어합니다. 이를 통..
AnimatedBuilder AnimatedBuilder는 애니메이션을 지속적으로 업데이트하면서 UI를 리빌드할 때 사용됩니다. 이 위젯은 애니메이션의 값이 변경될 때마다 특정한 위젯을 다시 그려주기 때문에 애니메이션의 효과를 적용하는 데 매우 효율적입니다. 여기서 **AnimatedBuilder**의 주요 요소를 살펴보겠습니다: animation 매개변수:animation 매개변수는 Animation 객체를 받습니다. 이 Animation 객체는 주로 **AnimationController**를 통해 제어되는 애니메이션입니다. **AnimatedBuilder**는 이 애니메이션의 값이 변경될 때마다 자동으로 다시 빌드됩니다. builder 콜백 함수:builder 콜백 함수는 애니메이션 값이 변경될 때..
출처: https://docs.flutter.dev/ Flutter documentation Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app. docs.flutter.dev
AnimatedContainer AnimatedContainer 를 사용하면 Container 의 애니메이션 효과를 쉽게 적용할 수 있습니다. "?" 연산자인 삼항조건 연산자를 사용하거난 if문 등 조건문을 이용하여 Container의 값을 조건별로 준다면, 자동으로 애니메이션 효과가 적용됩니다. transform: Matrix4.rotationZ(_visible ? 1 : 0), BorderRadius.all(Radius.circular(_visible ? 50 : 0))), color: _visible ? Colors.red : Colors.blue, 예시 소스 import 'package:flutter/material.dart'; class ImplicitAnimationScreen extends ..
키보드 레이아웃 올라올때 bottomNavigationBar 도 따라서 올라가는 소스(키보드 위에 위치) bottomNavigationBar: Padding( padding: MediaQuery.of(context).viewInsets, child: TextField(), ),
Firebase는 어플리케이션의 Push 알림을 지원합니다. 이를 설정하기 위해 아래와 같이 순서대로 진행합니다. Firebase Cloud Messaging 패키지 설치하기 - FCM 설정 방법: https://firebase.google.com/docs/cloud-messaging/flutter/client?hl=ko#upload_your_apns_authentication_key Flutter에서 Firebase 클라우드 메시징 클라이언트 앱 설정 Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 Flutter에서 Firebase 클라우드 메시징 클라이언트 앱 설정 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐 firebase.google..
Provider 를 사용하는 환경에서 Notifier에 특정 값이 필요하다면, FamilyAsyncNotifier와 Provider.family를 사용하여, Parameter 값을 받아올 수 있습니다. 즉, Provier에 값을 넘겨 주고 싶을 때 .family를 사용하면됩니다. 값 받아오는 문서 소스(Provider 쪽) class VideoPostViewModel extends FamilyAsyncNotifier { late final VideosRepository _repository; late final _videoId; @override FutureOr build(String videoId) { _videoId = videoId; _repository = ref.read(videosRepo); ..
Firestore의 CRUD를 Repository에서 어떻게 이용하는지 알아봅니다. Model Movie class Movie { String movieCode; String movieName; int score; Movie({ required this.movieCode, required this.movieName, required this.score, }); //Json 데이터 -> Movie로 변환 Movie.fromJson({required Map json}) : movieCode = json["movieCode"], movieName = json["movieName"], score = json["score"]; //Movie -> Json 데이터로 변환 Map toJson() { return { ..
Firebase의 Cloud Functions에서 기본적으로 제공되는 ffmpeg 패키지는 동영상, 이미지, 오디오 처리를 도와주는 패키지로 각종 명령어를 통해 다양한 작업이 가능합니다. FFmpeg이란? FFmpeg: FFmpeg은 무료 오픈 소스 소프트웨어 패키지로, 오디오와 비디오 데이터의 녹화, 변환, 편집, 스트리밍 등 다양한 멀티미디어 작업을 수행하는 데 사용되는 강력한 도구입니다. 주요 기능 다양한 형식 지원: 오디오와 비디오의 다양한 코덱과 형식을 지원하여 사용자가 쉽게 변환하거나 편집할 수 있습니다. 코덱 및 필터: 다양한 코덱을 활용하여 미디어를 인코딩하고 디코딩할 수 있습니다. 필터를 사용하여 화질 조절, 자막 추가 등 다양한 조작이 가능합니다. 라이브 스트리밍: 다양한 프로토콜을 지..