민프

이번 포스팅은 BLoC 패턴을 적용한 카운터 앱에 간단하게 적용해보겠습니다. 참고 예제는 공식홈페이지 예제를 참고하였습니다. https://bloclibrary.dev/#/fluttercountertutorial Bloc State Management Library Official documentation for the bloc state management library. Support for Dart, Flutter, and AngularDart. Includes examples and tutorials. bloclibrary.dev 해당 예제에서는 Cubit이라는 개념이 등장하는데 간단하게 BLoC와 장단점을 비교해보겠습니다. Cubit의 장점 간결성: Cubit은 간단하게 상태와 상태를 변경하는 ..

이번 포스팅에서는 BLoC에 대해서 알아보겠습니다. 먼저 개념에 대해서 정리하고 다음은 예제 코드를 통해서 알아보겠습니다. 소개 BLoC는 공식홈페이지에 보면 아래와 같이 나와있습니다. Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable. 해석해보면 Bloc 패턴은 프레젠테이션과 비즈니스 로직을 분리하여 코드를 빠르고, 테스트하기 쉽고, 재사용 가능하게 만드는 데 도움이 된다고 합니다. 그렇다면 BLoC의 핵심은 무엇일까요? Simple: Easy to understand & can be used by developers with varying skil..

이번 포스팅에서는 FadeInImage Widget을 사용하여서 위 GIF와 같이 이미지가 로딩되는 동안의 이미지 (새 사진)와 이미지가 완료 된 후 이미지 (산 사진)를 애니메이션과 함께 적용해보려고 합니다. FadeInImage는 아래 사진과 같이 2가지 옵션을 가집니다. assetNetWork는 네트워크에서 최종 이미지를 로드하는 동안 asset폴더에 저장된 이미지를 사용하는 위젯을 생성하는 것이고, memoryNetwork는 네트워크에서 최종 이미지를 로드하는 동안 메모리에 저장된 이미지를 사용하는 위젯을 만드는 것 입니다. 적용한 코드는 아래와 같습니다. FadeInImage.assetNetwork( fit: BoxFit.cover, placeholder: "assets/images/placeh..

이번 포스팅에서는 위 결과 화면과 같이 상단에 TabBar를 만들어서 Tab메뉴에 대한 화면을 만들어보려고 합니다. TabBar는 일반적으로 AppBar 의 AppBar.bottom 부분 으로 생성되고 TabBarView 와 함께 생성되고, TabBar 및 TabBarView 의 동작을 제어하기 위한 추가 옵션을 제공하는 TabController를 사용하여 TabBar를 구현할 수도 있습니다 . 그리고 TabController 대신 DefaultTabControlle를 사용할 수 있습니다 . Flutter는 역시.. 잘 되어있는 것 같다 위 결과화면에 대한 코드는 아래와 같습니다. import 'package:flutter/material.dart'; import '../../constants/sizes..

Flutter 개발을 할 때마다 느끼는거지만 개발 시간을 줄이기 위한 기본 위젯들이 잘 되어있다고 생각합니다. 이번 포스팅에서는 Flutter BottomSheet를 적용해보려고 합니다. 먼저 결과 화면을 봐볼까요? 위 영상에서 댓글 아이콘을 누르면 BottomSheet가 잘 나오는 것을 확인할 수 있습니다. 위 BottomSheet를 아래 예시 코드를 입력하면 쉽게 구현할 수 있습니다. void _onCommentsTap(BuildContext context) { showModalBottomSheet( context: context, builder: (context) => Container(), ); } . . . GestureDetector( onTap: () => _onCommentsTap(cont..

Flutter에서 Animation을 적용해보려고 합니다. Flutter에서 Animation을 보다 쉽게 적용하는 방법은 크게 1. animation 위젯 사용 2. animationController 사용 이 있습니다. 예제 화면 설명은 영상이 플레이 되고 있는 상태 인 화면을 터치하면 AnimatedOpacity가 적용된 플레이 이모티콘이 나오면서 영상이 정지가 되고, 정지 된 영상 화면을 클릭하면 AnimatedOpacity가 적용된 플레이 이모티콘이 사라지게 되면서 영상이 플레이 되는 화면 입니다. 1. animation 위젯 사용 https://docs.flutter.dev/ui/widgets/animation Animation and motion widgets A catalog of Flut..

앱, 웹을 처음 만들때 프론트엔드에서 다크모드, 라이트모드를 미리 생각하고 만들지 않는다면 디자인 시스템에 빠르게 맞추지 못할수도 있기 때문에 처음 만들때 ThemeData, TextTheme을 미리 설정해놓고 작업을 하는게 좋다. 그래서 ThemeData, TextTheme 화면마다 공통 된 Theme을 적용해보려고 한다. 1. ThemeData 설정 https://api.flutter.dev/flutter/material/ThemeData-class.html ThemeData class - material library - Dart API Defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree..

공식문서를 기준으로 Flutter의 아키텍쳐에 대해서 살펴보자 결론적으로 Flutter Dart 코드는 운영체제와 직접적으로 소통하지 않는다. 보통 Native 앱 개발을 할 때 버튼이나 Text Input 등 어떠한 요소를 만들어 달라고 하면 각 운영체제에게 전달되게 됨으로써 안드로이드 or IOS에서의 버튼이 만들어지게 되는데 Flutter는 그렇지 않다. 실제로 Flutter에는 각 OS마다 버튼을 만들어내는 기능은 존재하지 않는다. 결론적으로는 Flutter에서는 게임 엔진과 같이 동작하게 되는데 쉽게 말하자면, 캔버스에 그림을 그리듯이 표현한다. Flutter에서 렌더링엔진 (Skia, Impeller)에 대해서 궁금하면 아래 링크로 가서 알아보자 https://minf.tistory.com/2..

Flutter의 핵심에는 대부분 C++로 작성되고, Flutter 애플리케이션을 지원하는데 필요한 Flutter 엔진이 있다. 그 Flutter 엔진에는 새 프레임을 칠해야 할 때마다 장면을 래스터화하는 역할을 하는데 렌더링을 담당하는 엔진은 Flutter 3.10에는 Impeller, 이전에는 Skia 렌더링 엔진이 있다. 이 두개의 렌더링 엔진에 대해서 알아보기 전에 렌더링이란 무엇인지부터 알아보자 렌더링이란? 렌더링이란UI 코드를 실제로 화면에 표시되는 픽셀로 변환하는데 도움이 되는 소프트웨어이다. 예를 들어서 위 와 같은 앱이 있다고 생각해보자 저 두번째 사진의 FlutterLogo가 첫번째 사진에서의 Flutter Framework가 되는 것 이다. Flutter 프레임워크에서 위젯 트리는 세번..

아래 GIF는 인스타그램의 릴스 페이지를 보여주는 부분인데 저렇게 한 페이지, 페이지를 밑으로 내려서 구현하는 것을 해보려고 하는데 Flutter에서는 저 부분을 구현하기 쉽게 PageView 라는 Widget을 이용해서 구현할 수 있다. https://api.flutter.dev/flutter/widgets/PageView-class.html PageView class - widgets library - Dart API A scrollable list that works page by page. Each child of a page view is forced to be the same size as the viewport. You can use a PageController to control whic..