Flutter
-
[Flutter] 플러터 Navigator 페이지 이동 정리Flutter 2021. 8. 25. 22:30
플러터에서 페이지를 이동하는 방법은 Navigator를 활용하며, Navigator는 스택 형태로 구성이 되어 있었다. 사실 개인적으로 이 페이지라는 개념이 좀 헷갈렸는데, 알고보면 페이지는 그냥 Stateless 또는 Stateful 위젯이다. Navigator 스택에 새 페이지를 push하면 해당 페이지로 이동이 되고, pop하면 이전 페이지로 이동하는 형태이다. Pop하다가 더이상 뺄 페이지가 없으면 앱이 종료된다. 페이지마다 네임 태그가 달려있어 스택 내의 원하는 페이지로 이동도 가능한데... (응? 그러면 큐 아닌가?) 아무튼 직관적인 형태로 되어있다. 페이지 이동 방법을 초간단하게 정리해 본다. 1. 이전 페이지 이동 현재 페이지를 스택에서 제거하여 이전 페이지로 이동한다. 스택에 페이지가 남..
-
[Flutter] Null Safety 오류 무시하기 (VS Code)Flutter 2021. 8. 13. 13:51
플러터/다트를 처음 접하는 입장에서 생소했던 것이 Null Safety였다. 예외 처리를 크게 신경 쓰지 않는 최근의 트렌드를 고려할 때 효과적으로 Null 접근을 막을 수 있는 방법이라는 생각도 들었지만, 동시에 개발자를 초딩 취급하는 것 같다는 느낌이 들기도 했다. 아무튼, 현재 쓰고 있는 코드라면 Null Safety를 고려해서 작성하면 될 일인데, 오래된 라이브러리를 사용하거나 할 때에는 난감한 경우가 있었다. 다음과 같이 특정 라이브러리에 대하 Null Safety 에러가 나는 경우이다. Error: Null safety features are disabled for this library. 라이브러리의 버전을 업데이트하여 최신 라이브러리를 쓰는 것으로 해결될 수 있지만, 그럴 상황이 못될 경우..
-
[Flutter] 안드로이드 앱 사인 키 확인Flutter 2021. 8. 5. 00:54
안드로이드 앱의 사인 키를 확인해야할 경우가 있다. 특히 파이어베이스를 연동할 때에 디버그용이나 릴리즈용 SHA1 키를 확인해야 한다. 이를 위해서 앱을 사인하고 있는 키스토어의 위치를 확인한 후에 JDK의 keytool로 keystore를 확인하는 것이 일반적인 방법인데 사실 커맨드를 기억하기도 어렵고 불편한 것이 사실이다. 그런데, 이를 빠르게 확인하는 방법이 있는데, 바로 그래들 스크립트를 사용하는 것이다. 물론 이 방법은 플러터 프로젝트가 아닌 일반 안드로이드 프로젝트에도 동일하게 사용할 수 있다. 플러터 프로젝트의 경우 커맨드 창을 실행시키고 플러터 프로젝트의 안드로이드 디렉토리로 이동한다. 그리고 그 상태에서 gradlew signingReport 명령으로 현재 앱 사인에 사용되는 키를 확인할..
-
[Flutter] 플러터 화면 터치 좌표 처리Flutter 2021. 6. 26. 00:11
플러터뿐만 아니라 대부분의 프로그래밍 언어나 프레임워크에서 터치 입력 처리는 보통 UI 구성 요소별로 구현하는게 일반적이다. 그런데 이미지 위의 어떤 부분을 터치했는지가 필요한 경우가 있다. 예를 들어 화면에 보이는 어떠한 이미지상의 서로 다른 부분을 터치할 경우 동작이 상이해 지는 케이스를 생각할 수 있다. 이와 같은 처리는 GestureDetector를 이용해 터치 좌표를 알아내어 구현이 가능하다. 다음은 이미지를 하나 표시하고 터치 입력이 원하는 영역에 일어나면 동작을 수행하는 예제이다. class _DemoPageState extends State { // 터치 입력을 처리 void _handleTapDown(BuildContext context, var dx, var dy) { // 원하는 영역..
-
[Flutter] 우상단 Debug 디버그 표시 없애기Flutter 2021. 6. 25. 23:54
플러터 앱을 디버그 모드로 실행하면 우상단에 디버그 표시가 걸려있다. 처음에는 구분도 잘되고 좋았는데, UI 작업을 계속 하다보니 눈에 거슬리는게 심해졌다. 이 표시는 다음 옵션으로 없앨 수 있다. debugShowCheckedModeBanner: false 다음은 실제 적용한 샘플 코드이다. // 앱 엔트리 void main() { runApp(MyApp()); } // 루트 위젯 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( // 디버그 표시를 없앤다. debugShowChec..
-
[Flutter] 플러터 전체 화면 풀스크린 앱 만들기Flutter 2021. 6. 25. 23:47
플러터로 프로젝트를 하게 되었다. Dart 자체가 처음인데다가 플러터의 다양한 플러그인들에도 아직 익숙하지 않아 러닝 커브를 겪는 중에 있다. 다른 언어들과 비교해서 약간 고개를 갸우뚱하는 경우도 있었지만, 그래도 지금까지의 총평은 합격이다. 유니티가 아닌 일반 앱은 앞으로도 플러터에 의존할 것 같다는 예상이 잠깐 들었다. 머신러닝과 달리 분명 오늘의 러닝을 망각했을 미래의 나를 위해 플러터에 대해 이것 저것 남겨보기로 했다. 이번에 작성하던 앱은 간단한 프로토타입 앱이었는데 전체화면에서 작동하는 것이 필요했다. 추상화가 잘 되어 있어서 안드로이드 네이티브에 비해 비교적 쉽게 전체 화면 전환을 할 수 있었다. 앱의 상단 시스템 메뉴와 하단의 메뉴를 각각 조절할 수있는데, SystemChrome.setEn..
-
[Flutter] 플러터 설치 및 환경설정 에러 해결Flutter 2021. 6. 16. 17:15
최근에는 멀티 플랫폼을 지원하는 개발툴이 다양하게 존재한다. 물론 앱이 고도화되면 플랫폼별로 네이티브 개발을 하는게 제일 좋겠지만, 프로토타입을 개발하거나 MVP 버전의 앱을 개발하는 것은 멀티 플랫폼 툴이 아무래도 편한 것이 사실이다. 이번에 새로운 작업을 검토하면서 대세에 따라 Flutter를 활용해 보려고 야심차게 SDK 설치를 진행했다. Flutter가 대세 중 대세라고 하지만 설정 과정은 역시나 구글스러워서 셋업중 예상치 못한 에러를 몇 개 만났다. 해결 방법을 정리해 본다. Installation Process [Android Studio 설치] 안드로이드 개발자라면 대부분 설치가 되어 있겠지만 없다면 안드로이드 개발 환경 설치가 필요하다. JDK나 에디터를 따로 설치해도 무방하지만 Andro..