Enjoy travel into the Flutter.
드리프트 플러그인(drift plugin)을 사용하면 직접 SQL을 작성하지 않고 객체-관계 매핑(ORM)으로 SQLite를 사용할 수 있습니다. SQL문과 Drift 사용법을 비교하며 서술해 보겠습니다. Table 생성하기 SQL Drift INSERT 하기 SQL Drift SELECT 하기 SQL Drift UPDATE 하기 SQL Drift DELETE 하기 SQL Drift #SQLite #Flutter #drift #plugin #ORM #DB #Database #SQL
이 전 글(Step 7th)에서 일정을 추가할 수 있는 영역인 ScheduleBottomSheet에 입력 컴포넌트 위젯들을 추가해 보았습니다. 이번 스텝에서는 입력을 위한 가상 키보드가 나타날 때 키보드에 입력 UI가 가려지지 않도록 대응하는 처리에 대해 알아보겠습니다. 현상 사진과 같이 내용을 입력하려고 포커스를 주거나 했을때 키보드가 올라와 UI를 가리게 되는 경우가 있다. 이런 경우의 처리 방법에 대하여 알아보자. 해결방법 MediaQuery를 … 더 읽기
플러터(Flutter)로 앱을 개발하다 보면 기능과 역할에 따라 파일을 분리하게 됩니다. 프로젝트 규모가 커질수록 models, services, widgets 등 수많은 파일이 생겨나죠. 이때 특정 기능을 사용하기 위해 여러 파일을 import 해야 하는 번거로움이 발생합니다. 이 글에서는 여러 Dart 파일을 하나의 논리적인 단위, 즉 라이브러리로 묶어 효율적으로 관리하는 두 가지 방법을 소개합니다. 🤔 왜 라이브러리로 묶어야 할까? 예를 들어 a.dart와 b.dart 파일이 있고, main.dart에서 두 파일의 변수를 모두 사용해야 … 더 읽기
Flutter는 Google에서 개발한 강력한 크로스 플랫폼 프레임워크입니다. 잘 만들어진 웹사이트가 이미 있으신가요? 이번 글에서는 Flutter의 웹뷰(WebView)를 활용해 단 몇 줄의 코드로 기존 웹사이트에 새로운 생명을 불어넣어 멋진 모바일 앱으로 탈바꿈시키는 방법을 알아보겠습니다. 1. 웹뷰(WebView)란? **웹뷰(WebView)**는 앱 안에 내장된 작은 브라우저라고 생각하면 쉽습니다. 앱의 네이티브 UI 안에 웹 콘텐츠를 자연스럽게 표시해주는 기능이죠. 장점 (Pros) 단점 (Cons) 이러한 … 더 읽기
앱의 첫인상을 결정하는 화면은 무엇일까요? 바로 사용자가 앱을 실행했을 때 가장 먼저 마주하는 ‘스플래시 화면(Splash Screen)’입니다. 로딩 시간 동안 잠시 노출되는 이 화면은 앱의 정체성을 보여주는 로고나 브랜드를 각인시키는 중요한 역할을 합니다. 이번 포스트에서는 Flutter의 기본적인 위젯들을 활용하여 간단하면서도 멋진 스플래시 화면을 구현하는 과정을 차근차근 따라가 보겠습니다. 개발 환경은 안드로이드 스튜디오(Android Studio)를 기준으로 진행합니다. 1단계: … 더 읽기
이 전 글(Step 6th)에서 일정을 추가할 수 있는 영역인 ScheduleBottomSheet를 생성했습니다. 이번 스텝에서는 일정 추가를 위해 만들어 놓은 틀인 ScheduleBottomSheet에 입력 컴포넌트 위젯들을 추가해 보도록 하겠습니다. 일정 추가 입력하기 SceduleBottomSheet는 사용자가 새로 추가할 일정을 입력할 수 있는 위젯입니다. 시작 시간, 종료 시간, 일정 내용을 입력할 텍스트 필드 3개와 저장 버튼 하나로 구성하면 되겠습니다. 먼저 커스텀 … 더 읽기
이 전 글(Step 5th)에서 일정을 보여주는 카드 디자인의 위젯을 작성했습니다. 이번 스텝에서는 달력과 일정 카드 위젯 사이에 선택된 날짜를 보여주는 배너 형태의 위젯을 하나 추가해 보도록 하겠습니다. 그리고 FloatingActionButton을 추가하고 터치시 일정을 추가하는 ScheduleBottomSheet가 나타나도록 구현해 보겠습니다. 일정을 추가할 ScheduleBottomSheet와 그것을 호출하는 FloatingActionButton 추가 ScheduleBottomSheet 내부의 입력 위젯들은 다음 글에서 작성하도록 하고 이번 글에서는 우선 … 더 읽기
이 전 글(Step 4th)에서 달력에 날짜 선택시 선택된 날짜에 대한 표시와 콜백함수의 틀을 작성했습니다. 이제 드디어 선택된 날짜의 일정을 보여주는 카드 디자인의 위젯을 작성해 보려고 합니다. 일정을 보여주는 카드 위젯 카드는 좌측에 시간을 보여주는 영역과 우측에 내용을 보여줄 영역으로 구성하겠습니다. 먼저 좌측의 시간을 표현할 영역에 들어갈 시간 위젯부터 시작하겠습니다. lib/component/schedule_card.dart lib/screen/home_screen.dart 실행화면 참고
이 전 글(Step 3rd)에서 달력의 기본 디자인을 커스터마이징 했습니다. 이제부터는 달력에 날짜 선택시 선택된 날짜에 대한 표시와 콜백함수의 틀을 작성해 보도록 하겠습니다. TableCalendar 날짜 선택 TableCalendar 위젯은 날짜가 선택될 때마다 실행되는 콜백 함수를 등록하고 추가적으로 어떤 날짜가 현재 선택된 상태인지 달력에 표시해주어야 합니다. HomeScreen에서 모든 상태를 관리하기 위해 MainCalendar에 코드를 작성해 보겠습니다. lib/component/main_calendar.dart OnDaySelected 타입은 … 더 읽기
이 전(Step 2nd) 글에서 기본 달력을 띄우는데 성공했으니 이번에는 달력을 커스터마이징 해보겠습니다. TableCalendar 커스터마이징 TableCalendar 위젯의 스타일은 크게 두 가지로 나눌 수 있습니다. 화살표와 년도 및 월이 보이는 최상단은 headerStyle 매개변수를 통해 지정할 수 있습니다. 날짜들이 배열돼 있는 아랫부분은 calendarStyle 매개변수를 사용해 지정할 수 있습니다. lib/component/main_calendar.dart 헤더 스타일 설정 titleCentered 매개변수에 true를 입력하면 연, 월을 … 더 읽기