Develop/Flutter (5) 썸네일형 리스트형 [Flutter] 한글 Utility 기능 1. 개요소프트웨어를 개발할 때 한글을 자유롭게 다룰 경우가 종종 있었고, 이에 대한 Utilty 기능을 개발하게 되어 이 포스팅에서 소개하고자 한다.Github2. 활용 문법2.1. extension[Dart] extension3. 구현3.1. runes문자열의 각 문자에 대해 기본단위인 유니코드 코드 포인트를 취하여 Iterable 형식으로 반환하는 함수이다. 즉,'안녕'.runes; // (50504, 45397)와 같이 '안' 과 '녕' 문자의 각 유니코드 코드 포인트를 알 수 있다.3.2. 한글 음절의 유니코드 색인유니코드 값이 가장 작은 한글 음절은 '가' 로 0xAC00 의 값을 가진다.int get _index => runes.last - 0xAC00;따라서 위와 같이 나타내면 한글 음절이.. [Flutter] 문자열 명명 형식 변환기 (String Case Converter) 1. 개요소프트웨어를 개발할 때 문자열의 명명 형식(String Naming Type)을 변환해야 할 경우가 왕왕 있었는데, 이에 따라 자유자재로 변환이 가능한 Utilty 기능의 필요성을 느껴 개발하였고 이 포스팅에서 소개하고자 한다.Github1.1. 명명 형식 종류명명 형식예시Lower Snake Casehello_worldUpper Snake CaseHELLO_WORLDLower Skewer Casehello-worldUpper Skewer CaseHELLO-WORLDPascal CaseHelloWorldCamel CasehelloWorldTitle CaseHello WorldLower Casehello worldUpper CaseHELLO WORLD2. 활용 문법2.1. extension[Dar.. [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 다음
