[Flutter] ModalBottomSheet가 키보드에 의해 가려지는 현상

블로그 내의 게시물은 PC 버전에 최적화 되어 있습니다. 오늘은 ModalBttomSheet를 사용하면서 발생했던 문제에 대해 적어보려고 합니다. ModalBottomSheet에 TextField를 사용하여 키보드로 사용자의 입력을 받으려고 했습니다. 하지만 ModalBottomSheet가 팝업된 키보드의 높이만큼 올라가지 않아서 ModalBottomSheet가 키보드에 가려지는 현상이 발생했습니다. 아래와 같은 상황입니다. 키보드가 팝업되면서 ModalBottomSheet를 가려 사용자가 입력한 텍스트를 확인할 수 없는 문제가 발생했습니다. ModalBottomSheet가 키보드에 의해 가려지는 현상 우선 ModalBottomSheet의 속성에 대해 분석했습니다. 그러던 중 isScrollContro..

[Flutter / Dart] What is Equatable?

블로그 내의 게시물은 PC 버전에 최적화 되어 있습니다. 오늘은 Equatable에 대해 알아보려고 합니다. BLoC에 대한 글을 쓰기 전에 BLoC에서 사용하는 Equatable에 대한 정리가 우선적이라고 생각했습니다. 바로 본론으로 들어가보죠! 아래 코드를 먼저 살펴보겠습니다. class Person { final int pid; final String name; final int age; Person(this.pid, this.name, this.age); } void main() { Person p1 = new Person(20221234, "kodo", 25); Person p2 = new Person(20221234, "kodo", 25); (p1 == p2) ? print("same") : ..

[Flutter] BLoC 패턴으로 자동 로그인, Splash Screen 구현하기 - 1

블로그 내의 게시물은 PC 버전에 최적화 되어 있습니다. 오늘은 플러터에서 자동 로그인와 Splash Screen을 구현해보려고 합니다. 자동 로그인은 앱 개발을 접해봤다면 한 번쯤은 구현해봤을 기능이라고 생각합니다. SharedPreference를 활용해서 구현하는데 오늘은 조금 다른 방식으로 접근했습니다. 바로 BLoC를 통해서 구현하는데요, BLoC를 사용하면 자동 로그인과 Splash Screen을 하나의 로직으로 처리할 수 있습니다. 한번 시작해보죠. 바로 BLoC로 구현하지 않고 기존의 방식으로 구현하고 BLoC로 리펙토링하는 방식으로 접근합니다. 기존 방식으로 구현하면서 발생하는 문제와 이 문제를 어떤 식으로 해결하는지가 중요하니까요. 자동 로그인 앞서 말씀드린 것처럼 SharedPrefer..

[Flutter / Dart] What is Singleton?

블로그 내의 게시물은 PC 버전에 최적화 되어 있습니다. 정말 오랜만에 글 쓰는 거 같네요. 미국에서 돌아와서 일기 쓴 게 마지막인데 주기적으로 쓰려고 했었는데 1학기에 프로젝트가 너무 많아서 바빴습니다. 글 쓰고 있는 지금은 엔씨소프트에서 7주짜리 채용연계형 인턴을 하고 있습니다. 인턴을 진행하면서 플러터로 개발을 하고 있는데 개발하면서 알게된 것들, 정리하면 좋은 것들을 적어두고 싶어서 오늘부터 주기적으로 포스팅을 해보려고 합니다. (1학기 회고록을 작성하고 있는데 아직 작성이 안돼서 비공개로 해놨습니다...) 싱글톤 싱글톤, 전공자라면 다들 많이 들어봤을 단어일 겁니다. 말 그대로 싱글, 하나의 인스턴스만 존재하도록 하는 것입니다. 인스턴스를 하나만 가지기 위해서는 어떻게 해야할까요? 머리 속에 떠..

[Flutter] SingleChildScrollView, ListView, ListView.bulider

지난 시간에 Column에 대해 정리했었다. 오늘 정리할 내용은 Column으로 위젯들을 보여줄 때 발생할 수 있는 문제를 해결해주는 또 다른 위젯이다. import 'package:flutter/material.dart'; void main() { return runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Column 예제"), ), body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, ve..

4. Column, Row, Expanded

지난 시간 Container에 이어 오늘은 Column, Row, Expanded에 알아보려고 한다. 이전 포스팅에서 불가능했던 Container 간의 분리를 이러한 위젯들을 이용하여 해결할 수 있다. https://codekodo.tistory.com/95 3. Container, Padding 오늘 알아볼 것은 Container와 Padding 위젯이다. 같이 묶어서 작성하는 이유는 두 위젯이 거의 유사하기 때문이다. Container 우선 공식문서에는 Container가 자식 위젯을 커스터마이징 할 수 있는 위젯이 codekodo.tistory.com 오늘 알아볼 것은 Container와 Padding 위젯이다. 같이 묶어서 작성하는 이유는 두 위젯이 거의 유사하기 때문이다. 우선 공식문서에는 Co..

3. Container, Padding

오늘 알아볼 것은 Container와 Padding 위젯이다. 같이 묶어서 작성하는 이유는 두 위젯이 거의 유사하기 때문이다. Container 우선 공식문서에는 Container가 자식 위젯을 커스터마이징 할 수 있는 위젯이라고 나와있다. 이 말은 즉, 여백, 간격, 테두리 또는 배경색을 추가하고 싶을 때 Container를 사용할 수 있다는 것이다. 실제로 Cotainer 위젯은 다양한 속성을 가지고 있다. Container Container({ Key? key, AlignmentGeometry? alignment, EdgeInsetsGeometry? padding, Color? color, Decoration? decoration, Decoration? foregroundDecoration, dou..

2. Stateless, Stateful

플러터의 위젯은 크게 두 가지로 나뉜다. Stateful과 Stateless Stateful은 위젯이 동작하는 동안 내부 클래스에서 데이터 변경이 필요한 경우에 사용된다. setState 실행 이후 화면을 다시 그려서 변경된 부분을 다시 반영한다. Stateless는 Stateful과 다르게 위젯이 동작하는 동안 데이터 변경이 일어나지 않는 경우에 사용된다. 사용자의 반응과 상관 없이 화면만 보여줄 때 사용한다고 생각하면 된다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) ..

1. Widget

플러터는 위젯으로 시작해서 위젯으로 끝난다. 플러터로 앱을 개발할 때 화면상에 보이는 모든 것(element들의 배치)과 padding, margin과 같은 보이지 않는 것들이 위젯이다. 이러한 Widget간의 관계를 Widget Tree라고 한다. Widget들은 부모와 자식의 관계를 갖는다. MyApp의 자식으로 MaterialApp이 존재한다. Material은 현재 안드로이드에 적용된 UI이다. https://flutter.dev/docs/development/ui/widgets/material Material Components widgets flutter.dev 이와 대비되는 것은 Cuppertino, 현재 IOS에 적용된 UI이다. https://flutter.dev/docs/developm..