이 글은 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..
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..
Flexible과 Expanded은 Flutter에서 반응형 어플리케이션을 만들기 위해 사용하는 Widget 입니다. 두 위젯의 목적은 반응형 디자인입니다. 즉, Flutter 앱이 화면 크기에 따라 변경되고 적응하는 것입니다. 두 위젯 모두 Column과 Row와 밀접한 연관이 있으며, 상위 Column과 Row의 기본축에 연관된 하위 위젯들을 Responsive하게 사이즈를 변경 시켜줍니다. Flexible 속성 Flexible( flex: 1, // default fit: FlexFit.loose, // default child: Container(),// required field ), fit: Column 혹은 Row 기본축의 남은 공간을 어떻게 차지 하게 할 것인지를 정해주는 속성 1. Fle..
이번 포스트에서는 Flutter의 상태 관리가 필요한 이유와 효율적으로 관리하기 위해 상태 관리 라이브러리를 사용해야 하는 이유에 대해 알아보겠습니다. Flutter의 상태 관리 Flutter를 이용해서 앱을 만들 때 상태 관리(State Management)가 왜 중요한가에 대해 먼저 생각해볼 필요가 있습니다. Win32, Android, iOS 등 기존에 사용하던 프레임워크들에서 명령형 UI 프로그래밍 방식을 사용했었습니다. (but, 지금은 선언형으로 넘어가는 추세) 이러한 명령형 UI 프로그래밍 방식은 UI 엔티티를 수동으로 작성하여 UI를 변경할 수 있는 메소드 혹은 setter 메소드를 호출해서 수동으로 변경하였습니다.(예를 들면, textView.setText) 하지만, Flutter의 UI..
기존의 Material Buttons(FlatButton, RaisedButton, OutlineButton)들이 Deprecated 되었습니다. 대신 새로운 MaterialButton들을 사용해야 합니다. 새로운 Material Button들(TextButton, ElevatedButton, OutlinedButton)의 탄생 목적은 생성자 매개 변수와 테마를 통해 버튼을보다 유연하고 쉽게 구성하는 것이 목표입니다. 기존 버튼들은 각각 스타일을 변경해주어야 했지만 이제는 ButtonStyle 단일개체를 변경시켜주면 됩니다. ButtonStyle's Constructor import 'package:flutter/material.dart'; ButtonStyle({ MaterialStateProperty..
1. Flutter SDK 설치 (1) Stable Channel의 최신버전을 설치합니다. 2021년 5월 11일 기준 SDK 버전이 2.0.6이므로 해당 버전을 다운로드 하겠습니다. (2) 다운 받은 후 SDK 압축을 원하는 디렉토리에 풀어줍니다. 압축을 풀게되면 flutter 디렉터리가 생긴 것을 확인하실 수 있습니다. (3) 환경변수에 flutter의 SDK의 PATH를 등록해 줍니다. 1. 일시적인 환경변수 편집 $ export PATH="$PATH:~/Users/seunghwan/development/flutter/bin" 위와 같이 치면 환경변수에 PATH변수가 등록되지만 터미널이 재부팅되면 초기화됩니다. 2. 영구적인 환경변수 편집 저는 bash 쉘을 이용하기 때문에 vim으로 .bash_p..
