UI5 [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] PROJECT(1) - YOUTUBE MUSIC 홈 화면 구현 Source code : https://github.com/FreeBono/youtube-music 플러터로 YOUTUBE MUSIC 홈 화면을 구현해 보았다. 완전히 일치하게 만들지는 않았고, 기본 UI틀을 지키면서 비슷한 느낌을 낼 수 있도록 하였다. Youtube Music의 홈화면은 ListView의 사용이 많을 것이라 생각되었다. 그래서 ListView를 보다 쉽고 효과적이게 구현할 수 있는 SliverList를 사용하는 것을 계획했다. appBar부터 bottomNavigationBar까지 어떤 식으로 코드를 작성했는지 살펴보겠다. appBar 구현 홈 화면 최상단에 유튜브 뮤직로고와 함께 서치 아이콘, 프로필 아이콘이 있는 appBar를 확인할 수 있다. 그리고 그 아래 음악 장르를 나누는 .. 2023. 12. 17. [Flutter] UI(3) - systemNavigationBar 색깔 바꾸기 (Device NavigationBar 대부분 앱을보면 앱 내부의 bottomNavigation과 디바이스의 NavigationBar의 색깔을 일치시켜 통일감 있는 UI를 보여준다. 대표적으로 유튜브 뮤직과 인스타그램을 보면 같은 디바이스에서도 각각 다른 앱을 실행시켰을 때, Device NavigationBar의 색상이 다른것을 확인할 수 있다. Flutter에서 Device의 NavgitationBar의 색깔을 바꾸기 위해서는 SystemChrome 클래스의 setSystemUIOverlayStyle 메써드를 사용하면 된다. void main() { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemNavigationBarColor: Color.fromARGB(255, 14.. 2023. 12. 15. 이전 1 2 다음
