본문 바로가기

Flutter27

[Flutter] ExpansionTile padding,border 다루기 ExpansionTile을 사용하면 손쉽게 collapse 기능을 이용할 수 있다. 하지만 ExpansionTile을 사용할 때, ExpansionTile위젯 내부 속성으로 padding이나 border 등을 조작할 수가 없어 헤맨 경험이 한 번쯤은 있을 것 같다. ExpansionTile의 속성에 없는 값을 조정하고 싶을 때는 아래와 같이 Theme을 이용하면 된다. // 하위 위젯의 구분선을 투명하게 만듦 Theme( data: Theme.of(context).copyWith(dividerColor: Colors.transparent), child: ExpansionTile(...) ) Theme은 주로 MaterialApp의 theme속성에서 사용된다. theme을 통해 MaterialApp에 대한.. 2024. 2. 13.
[Flutter] 그림을 그려보자! CustomPaint 사이드 프로젝트를 하다가 네모난 카드에 배경 이미지를 넣을 일이 생겼다. 뭔가 구름모양 같은 곡선이미지면 괜찮지 않을까 하는 생각에 소스를 얻으려 구글을 돌아다녔다. 하지만 꽤 오랜 시간 구글을 뒤적거렸음에도 마음에 드는 이미지가 없었다. 그러다 문득 나는 화면에 UI를 그리고 있었는데, 왜 굳이 이미지 그림을 찾아다닌 걸까? 내가 필요한 간단한 background 그림을 그리려면 CustomPaint를 사용해서 충분히 그릴 수 있을 것 같았다. 덤으로 CustomPaint와 친해질 기회가 될 수도 있고. 우선 CustomPaint에 대해 알아보자. CustomPaint란 CustomPaint의 정의를 읽어보면 CustomPaint는 `paint phase`동안 그림을 그릴 캔버스를 제공해주는 위젯이다... 2024. 2. 1.
[Flutter] A pragmatic guide to BuildContext in Flutter(요약,번역) 플러터가 실제로 화면을 그려내는 과정에 대한 궁금함이 있던 차에 좋은 아티클을 발견했다. Daria Orlova라는 사람이 작성한 A pragmatic guide to BuildContext in Flutter라는 글로, flutter framework를 이해하는데 많은 도움이 된 것 같아 글을 소개하는 의미로 요약,번역을 해보았다. 더 자세한 정보를 얻기 위해서는 꼭 원문을 읽어 보는 것을 추천한다. A pragmatic guide to BuildContext in Flutter | Codemagic Blog Understanding BuildContext is crucial to leveling up your Flutter development game. In this guide, Daria Orlo.. 2024. 1. 27.
[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.