siyoung.dev blog

Permission 이란 안드로이드에서 알림, 오디오, 위치, 저장고 등, 특정 기능을 사용하기 위해 사용자에게 허용을 요청하는 권한 시스템이다. 이번 포스팅에선 Android의 Permmision을 정리해보고자 한다. permission 사용하기 perimission을 사용하려면 androidmanifast.xml에 다음을 추가한다. <uses-permission android:name="android.permission.permission이름"/> 예시 <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.SEND_SMS"/> Runtime Permission Android 6.0(API 23)이상은 Manifset에 권한을 등록 하는 것만으로 충분하지 않다. 위치, 카메라, 마이크처럼 민감한 권한은 앱 실행중 사용자에게 요청 해야 한다. 즉, 다음 두 가지가 모두 필요하다. AndroidMainifest.xml에 권한 선언 앱 실행 중 Runtime Permission 요청 공식 문서에서도 권한을 필요한것만 선언하고, 사용자에게 왜 필요한지 명확하게 설명하는 것을 권장한다. ...

Glance로 앱 위젯 만들기 이번 포스팅에서는 Jetpack Glance를 사용해 Android 앱 위젯을 만드는 기본 흐름을 정리한다. 앞선 설정 글에서 Flutter 프로젝트에 Glance를 붙였다면, 이제는 실제 위젯을 등록하고 화면에 표시할 차례다. 핵심 포인트 Glance는 Compose 스타일로 앱 위젯 UI를 작성할 수 있게 해주지만, 내부적으로는 여전히 AppWidget과 RemoteViews 제약을 따른다. 그래서 일반 Jetpack Compose와 완전히 같은 컴포저블을 쓰는 것은 아니며, Glance 전용 API를 사용해야 한다. 1. GlanceAppWidgetReceiver 등록하기 가장 먼저 위젯 업데이트를 받을 receiver를 만든다. ...

Flutter 프로젝트에서 Glance 설정하기 Flutter는 기본적으로 Android 홈 화면 위젯(App Widget)을 직접 구성하기 어렵다. 그래서 이번 글에서는 Flutter 프로젝트에서 Jetpack Glance를 설정하고, 이를 활용해 Android 앱 위젯을 만들기 위한 환경을 구성한 과정을 정리한다. 이 글의 목적은 Glance API 자체를 깊게 설명하는 것이 아니라, Flutter 프로젝트 안에서 Glance를 사용할 수 있도록 Gradle과 Compose 설정을 맞추는 것에 있다. 먼저 정리하면 이 글에서 다루는 핵심은 아래와 같다. Flutter 프로젝트의 android 모듈에서 Glance 의존성을 추가한다. buildFeatures { compose = true }를 활성화한다. Kotlin 2.x 환경에 맞게 org.jetbrains.kotlin.plugin.compose 플러그인을 적용한다. settings.gradle.kts에서도 Compose 플러그인 버전을 함께 관리한다. 1. Flutter 프로젝트에서 추가 설정이 필요한 이유 Flutter 앱의 화면은 Flutter가 렌더링하지만, 홈 화면 위젯은 Android 시스템이 관리한다. 그래서 Flutter 앱에서 홈 위젯을 만들려면 Flutter 코드만으로 끝나지 않고, android 모듈에서 Glance와 Compose 관련 설정을 함께 해줘야 한다. ...

Jetpack Glance란 Flutter는 기본적으로 Android 홈 화면 위젯(App Widget)을 직접 구성하기 어렵다. Jetpack Glance는 이러한 한계를 보완하기 위해, Android 네이티브 영역에서 앱 위젯을 쉽게 개발할 수 있도록 도와주는 프레임워크이다. 앱 위젯은 다른 어플리케이션에 삽입되어 주기적인 업데이트를 받을 수 있는 소형 어플리캐이션 뷰 이다. 그림1. 날씨앱의 위젯, 출처 Glance는 적은 수의 코드로 홈 화면용 반응형 위젯을 빠르게 빌드 하는데 도움이 되는 일련의 컴포저블을 제공한다. 다음 포스팅 부터는 Glance를 사용하여 앱 위젯을 빌드하는 방법을 설명한다. ...

Column, Row, Stack Flutter에서 UI를 구성할 때, 가장 핵심이 되는 레이아웃 위젯은 Column, Row, Stack이다. 그리고 Stack에서 위치를 제어하기 위해 Positioned를 함께 사용한다. Column Column은 세로 방향으로 위젯을 배치하는 위젯이다. Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('A'), Text('B'), Text('C'), ], ) 정렬 기준 mainAxisAlignment => 세로정렬 crossAxisAlignment => 가로정렬 Row Row는 가로 방향으로 위젯을 배치하는 위젯이다. Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text('A'), Text('B'), Text('C'), ], ) 정렬 기준 mainAxisAlignment => 가로정렬 crossAxisAlignment => 세로정렬 Column vs Row 정렬 비교 구분 Column Row mainAxis 방향 가로 세로 crossAxis 방향 세로 가로 mainAxisAlignment 위아래 정렬 좌우 정렬 crossAxisAlignment 좌우 정렬 위아래 정렬 MainAxisAlignment 상세 mainAxisAlignment는 주축 방향에서 위젯을 어떻게 배치할지 결정하는 속성이다. ...

SizedBox & Container Flutter에서 레이아웃을 구현할 때 가장많이 사용되는 위젯이 SizedBox와 Conatainer이다. 둘다 박스 형태라는 공통점이 있지만, 사용목적은 완전히 다르다. SizedBox SizedBox는 크기를 지정하는데 특화된 위젯이다. SizedBox( width: 150, height: 150, ) 또는 위젯 사이 간격을 만들 때 많이 사용한다. Column( children: [ Text('Hello, '), SizedBox(height: 20), Text('World!') ] ) 특징 width, height 지정 위젯간 간격 생성 불필요한 기능이 없어 가볍고 빠름 “공간 확보용 위젯” Container Container는 레이아웃 + 스타일을 동시에 처리하는 위젯이다. ...

Build Context BuildContext는 Flutter에서 **위젯의 위치(트리 구조 상의 위치)**를 나타내는 객체이다. 현재 위젯이 어디에 있는지, 어떤 위젯 아래에 있는지를 알려주는 역할을 한다. 핵심 개념 BuildContex는 단순한 값이 아니라 위젯 트리에서의 “위치 정보” 즉, 부모 위젯 접근 테마 접근 Navigator 접근 이 모든게 가능한 이유가Contex덕분이다. contex가 왜 필요한가? Flutter는 위젯 트리 구조로 동작한다. 그래서 어떤 기능을 사용할 때: Theme.of(context) Navigator.of(context) MediaQuery.of(context) 전부contex를 통해 위쪽 위젯을 찾아간다. 사용 예제 1. Navigator Navigator.push( context, MaterialPageRoute(builder: (context) => NewScreen()), ); 현재 위치contex를 기준으로,Navigator를 찾아서 화면 이동 2. Theme Theme.of(context).textTheme.bodyLarge; 현재 위치 기준으로 가장 가까운Theme 가져온다. 많이 틀리는 포인트 1. context의 위치 문제 showDialog( context: context, builder: (context) { Navigator.pop(context); // 다른 context }, ); -builder 안의context는 다른 위치context ...

Navigator Navigator는 Flutter에서 화면 전환을 담당하는 핵심 객체이다. 페이지를 스택(Stack) 구조로 관리하며, 새로운 화면을 쌓거나(push), 이전 화면으로 돌아가는(pop) 방식으로 동작한다. 기본 개념 Navigator는 화면을 하나의 스택처럼 관리한다. push : 새로운 화면을 스택 위에 추가 pushReplacement : 현재 화면을 제거하고 새로운 화면으로 교체 (뒤로가기 불가) pushAndRemoveUntil : 특정 조건까지 모든 화면을 제거하고 이동 (로그아웃, 초기화에 사용) pop : 현재 화면을 제거하고 이전 화면으로 돌아감 즉, 화면을 쌓고 제거하는 방식으로 앱의 흐름을 제어한다. ...

Material App MaterialApp은 Flutter에서 Material Design 기반 앱의 최상위 위젯으로, 앱의 전반적인 구조와 설정을 담당한다. 기본 화면(home 또는 initialRoute), 라우팅(routes), 테마(theme), 디버그 배너 표시 여부 등을 정의할 수 있다. 또한 Navigator와 연동되어 화면 전환을 관리하며, 앱 전역에서 공통적으로 사용되는 스타일과 경로 구조를 일관되게 유지하도록 도와준다. 역할 MaterialApp은 단순한 컨테이너가 아니라, 앱의 핵심 설정을 담당한다. home : 앱 실행 시 처음 보여줄 화면 routes : 이름 기반 라우팅 설정 theme : 앱의 전역 스타일 설정 navigator : Navigator와 연동되어 화면 전환 관리 debugShowCheckedModeBanner : 디버그 배너 표시 설정 즉, 앱의 뼈대 + 설정 + 흐름을 담당하는 위젯이라고 볼 수 있다. ...

Scaffold Scaffold의 공식 docs의 첫 문장은 Implements the basic Material Design visual layout structure. 즉, 기본적인 Material 디자인 래이아웃 구조를 실행한다. 라고 명시 되어 있다. Scaffold의 사용 Scaffold는 화면을 구성할 때 자주 사용하는 UI 요소들을 구조적으로 제공한다. 대표적으로 다음과 같은 영역을 포함할 수 있다: appBar : 상단 바 (제목, 액션 버튼) body : 메인 콘텐츠 영역 bottomNavigationBar : 하단 네비게이션 즉, 하나의 화면 뼈대를 만들어주는 역할이라고 보면 된다. 실제 앱에서는 대부분의 화면이 Scaffold 위에서 구성되며, Flutter에서 Material UI의 시발점 이라고 볼 수 있다. ...