Bull

서론제가 테트리스를 즐겨해서 시간을 내가지고 Flutter의 Flame을 연습할겸, 테트리스를 직접 구현하면 어떨까~~ㅎㅎ하는 마음에 Flame으로 간단하게 틀만 만들고 있었는데요. 가장 기본이 되는 키 입력 받는 방법을 몰라서 사경을 헤맸습니다. web폴더의 index.html 파일에 리스너를 추가해야된다는 GPT의 거짓말에 속아서 좀 걸린 것도 있구요. 다행히도 플러터에는 내장 패키지인 service library에서 키보드 관련 이벤트를 구현할 수 있었습니다! Level 1 : 구현 단계 이므로 철저한 조사와 자세한 설명은 빼고 코드 방식만 대략적으로 설명하겠습니다.결과Keyboard Event우선 키보드의 동작을 입력받으려면 우리가 보고 있는 프로그램의 포커싱 여부가 필요합니다.final Focu..

copyWith 의미copyWith 메소드는 Flutter에서 Immutable 클래스를 복사하면서 특정 속성들을 변경할 수 있도록 해주는 메소드입니다. 주로 StatefulWidget의 상태를 관리할 때 많이 사용됩니다.copyWith 예제예를 들어, 다음과 같은 Person 클래스를 생각해봅시다.class Person { final String name; final int age; Person({required this.name, required this.age}); Person copyWith({String? name, int? age}) { return Person( name: name ?? this.name, age: age ?? this.age, ); }}..

Flutter에서는 win32 패키지를 통해서 실제 win32 api 를 호출할 수 있다. win32 패키지에 대해서 자세히 알아보진 않았지만 우선 win32 를 통해 MessageBox 이벤트를 호출하는 프로그램을 만들어보자.Level 1 : 구현Level 1 : 구현단계에서는 코드에 대한 자세한 설명과 원리는 거의 없고 A는 B이다 형식의 설명입니다.CODEwindows_message_box.dartimport 'package:win32/win32.dart';class WindowsApi { static void showMessageBox(String text, String caption) { final textPtr = TEXT(text); final captionPtr = TEXT(c..

BottomAppBar를 사용하는 대신 아래에 드롭박스를 열어서 아이템을 확인하는 위젯을 만들어 봅시다. 특이사항은 바텀 메뉴가 접혔다가 펼쳤다가 하기 때문에 접혔을 때도 기존의 화면이 나와야 됩니다. 그러기 위해서 Stack 위젯을 사용했습니다. 이 위젯은 렌더링 되는 화면을 3차원 공간으로 인식한 후 stack에 관점에서 겹겹이 위젯을 설치할 수 있습니다.이제 이 개념을 적용해서 바텀 메뉴 드랍다운을 만들면 아래처럼 됩니다.그림이 너무 대충만든 것 같죠? 맞습니다. 빠르게 하기 위해서 느낌만 내봤습니다.그럼 이제 코드를 살펴볼게요.CODEimport 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends S..

서론이번에 만들 앱을 기획하기전에 어떤 UX구조를 해야할 지 고민이 되서 먼처 채팅 UI의 기본적인 구조를 바탕으로 만들어 보았습니다. 채팅 UI는 만들다보면 간단해보일 거 같은 느낌이 드는 데 막상 해보면 조금 많이 어렵다고 느낄 수 있습니다. 왜냐하면 채팅의 히스토리를 어떻게 할 것인지 그 히스토리를 또 어떻게 저장할 것인지 많은 데이터가 담기기 때문에 생각할 게 많아지죠. 따라서 기본적인 틀 구성을 수학의 정석처럼 정석은 어떤지 한 번 살펴 보시다.혼자 헛소리 조금만 하겠습니다 - (넘어가도 좋습니다)제가 만들기 위한 앱은 앱을 들어왔을 때 바로 채팅을 칠 수 있는 구조로 만들어야하는데 BottomNavigationBar를 사용하면 아마 채팅을 치는데 불편함이 있겠죠? 그래서 BottomNaviga..

Flutter 애니메이션으로 자주 사용되는 기법은 Fade와 Hero가 있습니다. 이번엔 Hero가 뭔지 언제 주로 사용하는 지에 대한 기본적인 내용만 다뤄 보겠습니다.Hero 기본 개념Flutter의 Hero 위젯은 두 개의 화면 사이에서 애니메이션 효과를 통해 부드럽게 전환되는 위젯을 제공합니다. 주로 이미지나 특정 위젯이 한 화면에서 다른 화면으로 이동할 때 자연스러운 전환 효과를 구현하는 데 사용됩니다. Hero 애니메이션은 소스 화면과 목적지 화면에서 동일한 Hero 태그를 가진 위젯을 식별하여 작동합니다. 이렇게 하면 Flutter는 두 화면 사이에서 위젯의 위치와 크기를 애니메이션으로 연결할 수 있습니다.Hero의 이름이 Hero인 이유?Hero class 공식 문서에서는 Hero 위젯을 날..

Fade 란?Flutter에서 사용되는 Fade 기법은 자주 사용되는 애니메이션 기법 중 하나로 이름처럼 직관적인 개념을 나타냅니다. 위젯의 사라짐과 나타냄을 부드럽게 표현할 수 있습니다. 이를 opacity 프로퍼티에 애니메이션을 적용하여 나타낼 수 있습니다. implicit animations에서 AnimatedOpacity 위젯이 있습니다. 이 위젯은 opacity 프로퍼티를 관측하고 그 값이 변화할 때 애니메이션 효과를 넣어 줄 수 있습니다. Flutter 공식문서의 Tutorial에 따르면 Fade의 개념을 AnimatedOpacity를 사용하여 설명합니다.CODE공식문서에서 제공된 CODE는 다음과 같습니다.import 'package:flutter/material.dart';void main..

implicts animations란?implicits animations은 암시적 애니메이션으로 그대로 해석해보면 애니메이션을 암시해줍니다. 그 말은 애니메이션을 넌지시 알려준다는 의미가 되겠네요. 개념을 쉽게 이해하기 위해서 이 위젯을 사용하면 어떤 동작이 일어나면 애니메이션을 진행시켜줘 라고 생각해도 무방할 것 같습니다.공식 문서의 정의된 내용을 보면 "암시적 애니메이션을 사용하면 위젯 속성을 애니메이션화할 수 있으며, 대상 값이 변경될 때마다 위젯이 이전 값에서 새 값으로 속성을 애니메이션화합니다. 이러한 방식으로 암시적 애니메이션은 편리하게 제어권을 교환하여 애니메이션 효과를 관리합니다." 라고 나와 있습니다. 즉 컨트롤러에 의해 관리될 필요없이 제한적인 상황에서 특정 프로퍼티의 변화에만 반응하..

Ticker란?Ticker는. Ticker는 일정한 시간 간격으로 콜백을 호출하는 객체입니다. 이를 통해 애니메이션 프레임을 생성하고, 애니메이션의 상태를 업데이트할 수 있습니다. 공식 문서에 첫줄을 보면 애니메이션 프레임당 한 번 콜백한다는 사실을 알 수 있습니다.Ticker의 역할애니메이션 프레임 생성:Ticker는 지정된 간격으로 콜백을 호출하여 애니메이션 프레임을 생성합니다. 이를 통해 애니메이션이 부드럽게 실행됩니다.시간 기반 업데이트:Ticker는 시간 기반으로 상태를 업데이트합니다. 예를 들어, 애니메이션의 진행 상황을 시간에 따라 계산하고, 화면을 다시 그리는 역할을 합니다.Ticker 사용플러터에서 Ticker를 직접 사용할 때는 보통 TickerProvider를 통해 Ticker를 생성..

Tween 클래스는 시작값과 끝값 사이의 선형 보간을 수행합니다. Tween 객체를 애니메이션과 함께 사용하려면 Tween 객체의 animate 메서드를 호출하고, 수정할 애니메이션 객체를 전달합니다. Tween 객체는 chain 메서드를 사용해 체이닝할 수 있으며, 이는 애니메이션 객체를 여러 Tween 객체로 구성하는 것과 다릅니다. 체이닝을 사용하면 단일 애니메이션 객체가 여러 Tween 객체에 의해 구성될 수 있습니다. Tween은 "in-between"의 줄임말로, 애니메이션의 중간 상태를 계산하는 데 사용됩니다. 기본적으로 Tween 애니메이션은 AnimationController와 함께 사용됩니다.Tween 애니메이션의 기본 구조AnimationController:애니메이션의 실행 시간과 상..

결과물https://www.youtube.com/shorts/GuZz_DxAfIs(이전엔 안그랬는데 지금 시간대에 뭔가 오류가 났는 지 제대로 업로드 안되서 하이퍼 링크로만 보류합니다.)  Flutter를 활용하여 Git 잔디밭을 만들어 보겠습니다. 이걸 어디에 활용할까요? 저는 최근에 앱을 둘러보던 중 많은 앱들에 이러한 기록 서비스가 들어가는 것을 확인했습니다.저 또한 그렇듯이 깃허브나 백준처럼 일일 기록지처럼 무언가 했다는 느낌이 드는 표가 있으면 기분이 좋아집니다.부끄럽지만 제 백준과 깃허브의 스트릭(잔디밭)입니다. 사실 백준은 풀면 자동으로 깃허브에 커밋 푸시가 되기 때문에 하나는 거의 의미가 없긴합니다. 그냥 기분이 좋아서 이중 등록해놨습니다 ㅎㅎ..Codeimport 'package:flut..

https://codcost.tistory.com/169 Feed:아무 생각이나 적기 (24-07-16)버스를 타다가...창의력. 거창한 걸 말하는 것이 아니다. 이미 있는 것을 얼마나 활용도 높게 사용할 수 있고 적절히 사용할 수 있는지. 그리고 자신감. 표현해내는 능력.젊었을 때 한 줌이라도codcost.tistory.com그냥 글 쓰다가 어차피 혼자 적을 거, 나 같은 사람 있을까봐 앱으로 만들면 괜찮겠다고 생각했다.SNS는 안하는데 트위터나 링크드인 과는 다르게 혼자 사색의 시간 보내는 글을 쓰면 재밌을 거 같았다.근데 평소에도 그러한 아이디어 종종 나오는데 계획으로 옮기질 않아서...이번에 만들 거는 디자인만 대충 머릿속에 있는 거 끄집어내서 해보았다.결과물https://www.youtube.c..