Flutter26 [Flutter] 그림을 그려보자! CustomPaint 사이드 프로젝트를 하다가 네모난 카드에 배경 이미지를 넣을 일이 생겼다. 뭔가 구름모양 같은 곡선이미지면 괜찮지 않을까 하는 생각에 소스를 얻으려 구글을 돌아다녔다. 하지만 꽤 오랜 시간 구글을 뒤적거렸음에도 마음에 드는 이미지가 없었다. 그러다 문득 나는 화면에 UI를 그리고 있었는데, 왜 굳이 이미지 그림을 찾아다닌 걸까? 내가 필요한 간단한 background 그림을 그리려면 CustomPaint를 사용해서 충분히 그릴 수 있을 것 같았다. 덤으로 CustomPaint와 친해질 기회가 될 수도 있고. 우선 CustomPaint에 대해 알아보자. CustomPaint란 CustomPaint의 정의를 읽어보면 CustomPaint는 `paint phase`동안 그림을 그릴 캔버스를 제공해주는 위젯이다... 2024. 2. 1. [Flutter] Ticker Class Ticker Class Ticker는 간단히 말해서 time tracker이다. Ticker는 어떠한 애니메이션이 시작된 이후, 경과된 시간을 기록하고, 경과된 시간에 대해 콜백을 실행시킨다. 또한, 다음 프레임을 연속적으로 set up하여 화면 전환이 부드럽고 연속적으로 보이게 한다. 즉, 플러터에서 애니메이션의 유려한 실행, 전환 등 UI의 '유동적인 움직임'을 보장하여 사용자에게 시각적인 효과를 줄 때 사용할 수 있다. 예제 import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; void main(.. 2024. 1. 19. [Flutter] flutter 3.3 ShaderCompilerException ink_sparkle.frag failed with exit code -1073740791 에러 해결 개발 장비를 바꾼 뒤, 프로젝트를 실행시켰을 때 Target web_release_bundle failed: ShaderCompilerException: Shader compilation of "C:\flutter\packages\flutter\lib\src\material\shaders\ink_sparkle.frag" to "build\web\assets\shaders/ink_sparkle.frag" failed with exit code -1073740791. Compiling lib\main.dart for the Web... 52,1s Exception: Failed to compile application for the Web. 위와 같은 에러가 발생했다. 참고로 위 에러 문구는 저장해둔 에러메.. 2024. 1. 6. [Flutter] UI(5) - ExpansionTile을 활용하여 TreeView 만들기 flutter에서 기본 위젯으로 TreeView를 지원하지는 않는다. 하지만 pub.dev에 검색해보면 flutter_fancy_tree_view와 같이 잘 만들어진 패키지들을 찾아볼 수 있다. 하지만 학습의 차원에서 직접 TreeView를 만들어 보았다. 처음 만들자고 생각했을 때 부터 쉽지는 않을 것 같다고 생각했지만, 실제로 해보니 훨씬 복잡하다고 생각 되었다. 우선 TreeView를 만들기 위해서는 1. 재귀로 위젯 호출 2. ExpansionTile 위젯 (optional) 3. CustomPaint 위젯 세 가지 개념을 알고 있어야 한다. 1. 재귀로 위젯 호출 만약 내가 TreeView를 현업에서 만든다면, 무조건 재귀를 통해서 하위 데이터들을 불러올 것이다. 트리구조가 변경 될 때에도 수정.. 2024. 1. 2. 이전 1 2 3 4 5 6 7 다음
