이번 포스트에서는 Mixin으로 StatefulWidget의 초기화 중복 코드를 제거하는 방법을 정리하겠습니다. StatefulWidget의 Controller 중복 코드 발생 StatefulWidget에서 스크롤 또는 애니메이션 작업 등의 애플리케이션의 UI 상태와 연결하고 관리해야 하는 작업을 수행해야 할 때 Controller를 이용합니다. Controller의 종류로는 ScrollController, AnimationController, TextEditingController 등이 존재합니다. 예를 들면, ScrollController는 스크롤 상태를 추적하고 제어하는 데 사용됩니다. 이를 통해 스크롤 위치를 제어하고 스크롤 이벤트를 받을 수 있으므로 무한 스크롤, 페이징 또는 스크롤 위치에 따른..
이 글은 Riverpod 2.0 기준으로 작성되었습니다. 이번 포스트에서는 공식 문서를 보면서 Riverpod에 대해 알아보고, 왜 Riverpod을 사용해야 하는지에 대해 알아보겠습니다. 사용 방법은 간략하게만 다루었으며 Provider의 종류에 대한 정리는 패키지가 워낙 자주 바뀌기도 하고 공식 홈페이지에 워낙 잘 정리되어 있어서 참고하시면 좋을 것 같습니다. Flutter의 상태 관리 Flutter는 선언형 UI이며 각각의 상태를 포함하고 있는 위젯 트리를 기반으로 구성되기 때문에 상태 관리가 매우 중요합니다. 단일 위젯에서만 사용하는 상태일 경우는 상태 관리가 특별하게 관리되지 않아도 되지만, 앱의 여러 위젯에서 상태를 사용하는 경우에는 상태 관리가 특히 더 중요합니다. 이러한 여러 위젯에서 사용..
문제 발생 아래와 같이 Container에 InkWell을 붙였는데 InkWell의 물결 효과가 나타나지 않았습니다. 찾아보니 해당 이슈는 플러터의 bug report에 등록되어 있었고 Container의 컬러가 InkWell의 ripple effect를 덮어버리기 때문에 이러한 현상이 일어난다고 합니다. Ripple효과를 가진 Container를 만들때마다 이런 버그가 있는지 깜빡하고 맨날 해결법 검색을 해서 해결책을 적어두고 보려고 합니다. https://github.com/flutter/flutter/issues/3782 InkWell and FlatButton do not ripple when inside a container with opaque background · Issue #3782 · ..
안녕하세요. 이번에는 Flutter Plugin을 만들어서 Android Native 코드를 호출하는 법을 알아보겠습니다. Flutter Plugin이란? Flutter Plugin은 Android(Kotlin 또는 Java) 및 iOS(swift 또는 objective c)와 같은 네이티브 코드의 Wrapper입니다. 그러므로 Flutter는 Flutter Plugin을 통해서 platform channels와 메시지 전달을 통해 네이티브 애플리케이션에서 할 수 있는 모든 것을 할 수 있습니다. 동작은 Flutter에서 기본 iOS/Android 코드에 작업을 수행하고 결과를 Dart코드에 Return 하도록 지시합니다. Flutter Platform Architectural overview: plat..
이번 포스트에서는 SingleChildScrollView의 중앙에 위젯을 배치하는 방법을 알아보겠습니다. 의문점 SingleChildScrollView 내부 위젯에 중앙에 배치하는 방법은 Center 위젯과 같이 일반적인 방법으로는 배치할 수 없습니다. 어찌보면 당연한 해결 방법이지만 여러 위젯을 추가해야 하므로 해결 방법을 정리해놓고자 합니다. 해결 방법 LayoutBuilder( builder: (context, constraints) => RefreshIndicator( onRefresh: _onRefresh, child: SingleChildScrollView( child: ConstrainedBox( constraints: BoxConstraints( minHeight: constraints.m..
Navigator Push 1. Navigator.push()로 화면 전환 전달할 데이터가 없는 경우에는 Navigator.push() 메소드를 통해 화면전환을 할 수 있습니다. Navigator.push()에 전환할 페이지를 MaterialPageRoute()에 넣어주면 됩니다. Navigator.push(context, MaterialPageRoute(builder: (context) => FirstScreen())); main.dart import 'package:flutter/material.dart'; import 'package:flutter_widgets/screen/button_above_keyboard.dart'; import 'package:flutter_widgets/screen/fi..
이번 포스트에서는 Dart의 Mixin에 대해 정리하겠습니다. Mixin이란? Mixin이란 여러 클래스 계층에서 재사용할 수 있는 코드를 정의하는 방법입니다. 클래스에 with 키워드를 사용하여 Mixin을 추가하면 해당 클래스는 mixin에서 제공하는 필드와 메소드를 사용할 수 있습니다. 반면, extends 키워드는 단일 상속만 지원하므로 하나의 클래스만 상속할 수 있습니다. 물론, implements 키워드를 사용하여 여러 인터페이스를 구현할 수 있지만, implements를 사용하면 해당 인터페이스에 정의된 모든 메소드를 반드시 오버라이드로 구현해야 한다는 점에서 with 키워드를 사용하는 것과는 차이가 있습니다. Mixin을 여러번 사용하면 다중 상속일까? Mixin은 다중 상속과 유사한 기능..
이번 포스트는 플러터에서 키보드 위에 떠있는 버튼 만드는 방법을 정리하겠습니다. 위와 같은 화면에서 TextField를 클릭해서 Keyboard가 올라가면 아래와 같은 화면과 에러를 만나실 수 있습니다. ======== Exception caught by rendering library ===================================================== The following assertion was thrown during layout: A RenderFlex overflowed by 276 pixels on the bottom. 에러가 발생한 이유는 resizeToAvoidBottomInset 때문입니다. resizeToAvoidBottomInset는 Scaffold의 ..
