Develop/Flutter (3) 썸네일형 리스트형 [Flutter] Duration 값 간결히 나타내기 1. 개요 Flutter 에서 기간 혹은 시간을 나타내기 위해서는 Duration 을 사용한다. 사용 예시는 다음과 같다. 1밀리초: Duration(milliseconds: 1) 50분: Duration(minutes: 50) 1년: Duration(days: 365) 1.1. 개선 필요성 위와 같은 쓰임은 개발하는데 상당히 불편했다. Future.delayed() 나, Timer.periodic() 함수 등과 같이 쓰이기라도 한다면, 코드길이가 너무 길어지고 가독성이 많이 떨어졌다. 또한 const 를 붙이라는 IDE 의 말을 따른다면 다음과 같은 코드가 완성된다. await Future.delayed(const Duration(milliseconds: 500), () { // ... }); Time.. [Flutter] 순환 캐러셀 (Circular Carousel) 위젯 만들기 1. 개요 1.1. 캐러셀 (Carousel) 캐러셀 (Carousel) 은 회전목마라는 뜻으로 일련의 위젯을 슬라이드 쇼 형태로 나열해놓은 위젯을 가리킨다. 1.1.1. 일반 캐러셀 일반 캐러셀은 위와 같이 단일 위젯이 직선 위에서 이동하는 특징이 있다. 1.1.2. 순환 캐러셀 순환 캐러셀은 일반 캐러셀과 달리 단일 위젯이 타원을 그리면서 회전한다. 1.2. 순환 캐러셀의 필요 Flutter 로 개발 중인 어플리케이션 (Fitween) 이 있는데, 디자이너로부터 다음과 같은 위젯의 구현을 요청받았다. 1.3. 구현 관련 패키지가 있는지 확인해보았지만, 굉장히 적고, 존재하는 것들도 마음에 들지 않았다. 적당한 꼼수를 발휘해서, 정적 이미지와 동적 이미지 (gif) 를 미리 준비하고, 좌우 드래그 제스.. [Flutter] 토스 스타일의 Pressable 커스텀 위젯 만들기 1. 개요 Flutter 의 대부분의 누를 수 있는 위젯은 InkWell animation 이 채택되었다. 위젯을 탭하면 위젯 색상이 highlight 되고 탭 위치부터 원이 splash 되어 퍼져나간다. TextButton, IconButton, InkWell 위젯의 예시 위 gif 의 코드는 아래와 같다. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowChecke.. 이전 1 다음
