소개Flutter로 이미지를 선택하여 화면에 표시할 때, 균등한 간격을 유지하면서 썸네일 이미지를 정렬하는 UI를 구현하는 방법을 다룹니다. 이 글에서는 Wrap 위젯과 LayoutBuilder를 활용해 동적인 간격 계산과 정사각형 썸네일 UI를 구성하는 방법을 설명합니다.1. 핵심 코드 설명1. LayoutBuilder를 활용한 가로 간격 계산LayoutBuilder는 부모 위젯의 크기를 계산하는 데 유용합니다. constraints.maxWidth를 통해 가용 너비를 가져와 한 줄에 몇 개의 아이템을 배치할지 계산합니다.final double availableWidth = constraints.maxWidth; final int itemsPerRow = (availableWidth / (썸네일 너비 ..

앱에서 사용자로부터 이미지 접근 권한을 요청하고 이를 처리하는 방법은 iOS와 Android에서 다르게 작동합니다. 이 글에서는 Flutter를 사용하여 iOS와 Android에서 이미지 접근 권한을 설정하고 구현하는 방법을 공유합니다.1. iOS 권한 설정iOS에서는 PermissionHandler 패키지를 사용하여 이미지 접근 권한을 요청할 수 있습니다. 권한 요청을 위해 다음 단계를 수행합니다:1.1 Info.plist 수정Info.plist에 다음 권한 요청 메시지를 추가합니다:xml코드 복사key>NSPhotoLibraryUsageDescriptionkey> string>사진 접근 권한이 필요합니다.string> key>NSCameraUsageDescriptionkey> string>카메라 사용..

Simulator > I/O > Keyboard > Connect Hardwear Keyboard⌘ + SHIFT + K단축기 혹은 Simulator에서 적용하면 됩니다 !

상태 관리는 앱의 데이터와 정보를 추적하는 방법과 변경 사항이 있을 때 사용자 인터페이스(UI)를 업데이트하는 방법입니다. 예를 들어 화면에 숫자를 표시하는 카운터 앱이 있고 사용자가 버튼을 탭할 때 해당 숫자를 늘리거나 줄이려는 경우 해당 숫자의 상태와 이를 표시하는 UI를 관리해야 합니다. Flutter에서 상태 관리를 수행하는 방법에는 여러 가지가 있으며 각 방법에는 고유한 장단점이 있습니다. 이 기사에서는 세 가지 인기 있는 상태 관리 솔루션인 Riverpod2, BLoC 및 GetX를 비교해 보겠습니다. 우리는 그들이 어떻게 작동하는지, 무엇을 제공하는지, 그리고 서로 어떻게 다른지 알아볼 것입니다. Riverpod 2 란 무엇인가 ? Riverpod2는 Flutter의 가장 인기 있는 상태 관..

코드 팩토리의 플로터 프로그래밍 책을 보며 공부하다가 Dart 3.0 문법을 소개 드리면 좋을 것 같아 글을 남깁니다. 다트 3.0 신규 문법 플러터 3.0 버전부터는 다트 3.0 버전 이상을 사용합니다. 그리고 다트 언어의 메이저 버전이 3으로 업데이트되면서 새로 추가된 문법들이 생겼습니다. 다트 3.0 버전 업데이트 이후 어떤 문법들이 추가로 생겼는지 알아보겠습니다. 1. 레코드 레코드(Record)는 다트 3.0 이상부터 사용할 수 있는 새로운 타입입니다. 레코드는 포지셔널 파라미터(Positional Parameter)나 네임드 파라미터(Named Parameter) 중 한 가지 방식을 적용하여 사용할 수 있습니다. 두 방식은 모두 괄호 안에 쉼표로 구분하여 작성합니다. 자세한 내용은 다음 실제 ..

업데이트 목록 Flutter - Fonts asset hot reload - Text animation by FontVariation widget - Dart, Flutter Engine, Flutter SDK에 대해 최소 SLSA level 2 인증 보장 - FlutterFlow (Figma와 같은 UI Toolkit), API 콜이 가능해보임 - Material 3 - ffigen & jnigen (언어 변환, 예를 들어 Android SDK => C or C++ => Dart로 활용하는 것이 가능) Dart - Pattern matching - Multiple returns - Usable switches - Object Destructing - Functional-style programming ..

2편에서는 flutter_rating_bar를 조금더 활용을 해보겠습니다 전체 코드는 마지막에 넣어둘게요 ~! 기능은 다음과 같습니다 1. 톱니바퀴 아이콘 클릭 아이콘 전체 변경 2. TextFormField 를 활용해 숫자로 표시 3. 3개의 모드로 평가를 다르게 표현 (1. 기본적인 , 2. 이미지 , 3. 평가마다 색상) 4, 수직 모드로 변경 5. 좌우 반전 변경 자 .. 이제 시작해 볼게요 1. 톱니바퀴 아이콘 클릭 아이콘 전체 변경 IconButton( icon: Icon(Icons.settings), color: Colors.white, onPressed: () async { _selectedIcon = await showDialog( context: context, builder: (con..

오늘은 flutter_rating_bar에 대해 알아보겠습니다 프로젝트를 생성해 줍니다. pub add or pub get 을 진행합니다. $ flutter pub add flutter_rating_bar dependencies: flutter_rating_bar: ^4.0.1 이렇게 셋팅을 하면 그럼 이제 기본적인 준비는 완료되었습니다. main.dart를 수정해 줍니다 . 기본적인 구조는 다음과 같습니다 import 'package:flutter/material.dart'; import 'package:flutter_rating_bar/flutter_rating_bar.dart'; void main() { runApp(const MyApp()); } class MyApp extends Stateles..

요즘 회사 업무 일이 바빠서 오랜만에 글을 적어봅니다 Flutter에서 Provider를 사용하면서 꿀팁들을 조금 정리해보았습니다. 카운터 앱 제작 dependencies: flutter: sdk: flutter provider: 우선, provider 패키지를 프로젝트에 추가하기 위해 pubspec.yaml 파일에 위와 같은 코드를 추가하고 패키지를 가져옵니다. 1. Flutter pub add provider 2. yaml 파일에 provider : 추가 후 Flutter pub get 두개중 편한대로 사용하시면 됩니다. count_provider import 'package:flutter/material.dart'; class CountProvider with ChangeNotifier { int ..

먼저 Platform Channel에 대해서 모르시는 분들을 위해 간단하게 살펴보자면, Flutter는 앱, 웹, 데스크탑, 리눅스 등의 환경을 개발할 수 있도록 하는 프레임워크라는 사실은 이미 알고 계실거다. 앱에서는 양대 플랫폼인 Android / IOS를 모두 개발하는 크로스플랫폼인데, 네이티브 고유의 기능에 접근해야 하는 등의 개발이 필요한 경우 네이티브 언어를 통해 Flutter와 통신을 할 수 있다. 물론 통신을 하지 않고도 Flutter의 Dart Package에 등록된 PlugIn을 사용하여 개발이 가능하긴 하다. 여기서 말한 PlugIn이 바로 네이티브 코드로 만들어진 것이다. Library라고 불리는거는 Flutter 프레임워크에서 만들어진거고, PlugIn은 네이티브로 만들어진 것이다..