본문 바로가기

Study

[Flutter] 앱 권한 관리 permission_handler 사용법 (AOS / IOS)
2022. 7. 19. 대부분의 운영 체제에서 권한은 설치시에만 요구하도록 지원합니다. 하지만 앱의 정상실행을 위해서는 실행되는 동안에도 필요 권한(런타임 권한요청)을 사용자에게 요청해야합니다 . permission_handler 는 크로스 플랫폼(iOS, Android) API를 제공합니다. 사용자가 권한을 부여할 수 있도록 기기의 앱 설정을 열 수도 있습니다. Android에서는 권한을 요청하는 근거를 보여줄 수 있습니다. 1. Setting 해당 API를 사용하기 위해서는 project내에 기본적으로 권한을 요구하도록 설정이 필요합니다. 1) AOS 1. "gradle.properties" 파일에 다음을 추가합니다. (기본사항이라 변경 불필요, 확인) android.useAndroidX=true android.enable..
[Flutter] Permission 그룹 권한의 종류와 허용법 (AOS / IOS)
2022. 7. 19. 앱을 개발함에 있어서, 장치에 대한 다양한 권한이 필수적으로 요구될 때가 있다. 권한을 설치시에 요구하는 경우, 설치 시간 권한(Install-time permissions) 앱을 설치하여 사용중에 요구하는 경우, 런타임 권한(Runtime permissions) 으로 구분한다. 일반적으로 AndroidManifest.xml 에 명시되면 설치 시간 권한(Install-time permissions)을 요청하게 되며, 사용중 권한을 요구하는 경우에는 대부분 외부 라이브러리인 permission_handler 를 이용해서 런타임 권한을 요청한다. 먼저 안드로이드에서 얻을 수 있는 권한의 종류를 살펴보자. 권한은 개별권한으로 요청 할 수 도 있지만. 다양한 개별권한을 한번에 그룹권한으로 요청 할 수도 있다. ..
[Flutter] floatingActionButton 플로팅 버튼 크기 설정
2022. 7. 15. Small (40 x 40) FloatingActionButton.small( onPressed: onPressed, child: Icon(Icons.edit), ) Regular (56 x 56) FloatingActionButton( onPressed: onPressed, child: Icon(Icons.edit), ) Large (96 x 96) FloatingActionButton.large( onPressed: onPressed, child: Icon(Icons.edit), ) Extended FloatingActionButton.extended( onPressed: onPressed, label: Text('Extended'), icon: Icon(Icons.edit), ) Custom siz..
[Flutter] 앱 전체 테마 설정 (배경, 글꼴, 텍스트 스타일, 색상 등)
2022. 7. 8. Flutter 앱을 만들때 , MaterialApp 위젯의 하위 속성으로 앱 전체에 적용할 다양한 시각적 스타일 테마를 기본적으로 지정해 줄 수 있습니다. 이를 통해 반복적인 작업을 피하고, 통일된 UX를 제공할 앱의 기초작업을 진행합니다. 예시코드) 아래와 같이 MaterialApp에 theme 속성에 ThemeData 클래스를 생성하여 설정해줍니다. MaterialApp( title: appName, theme: ThemeData( // Define the default brightness and colors. brightness: Brightness.dark, primaryColor: Colors.lightBlue[800], // Define the default font family. fontFa..
[Flutter] 화면 / 이미지 슬라이더 사용법 (carousel)
2022. 7. 4. 아래와 같은 화면을 슬라이드하면서 보여줄 팝업팁이 필요한 경우에 라이브러리에 캐러셀을 검색해서 사용하면 된다. 예제 코드 필자는 아래 라이브러리를 사용했다. https://pub.dev/packages/carousel_slider carousel_slider | Flutter Package A carousel slider widget, support infinite scroll and custom child widget. pub.dev final CarouselController _controller = CarouselController(); @override Widget build(BuildContext context) { return Scaffold( body: ListView( children: [..
[Flutter] Pop up 팝업창 띄우는 법 (Alert Dialog)
2022. 7. 4. 우리가 생각하는 팝업창은 화면에 일부라 생각하지만, 알림 다이어로그라는 표현이 더 맞다. 예제코드 한 Row안에 Text와 ? 아이콘 버튼을 만들어 버튼 클릭시 영상업로드팁 다이어로그를 팝업으로 띄워보겠다. Row( children: [ const Text("영상 업로드"), IconButton( onPressed: () { showDialog( context: context, barrierDismissible: true, // 바깥 영역 터치시 닫을지 여부 builder: (BuildContext context) { return AlertDialog( content: const ScreenVideoTips(), insetPadding: const EdgeInsets.fromLTRB(0,80,0, 80)..
[Flutter] Navigator 화면 전환과 Named routes 설정
2022. 6. 8. https://docs.flutter.dev/cookbook/navigation Navigation docs.flutter.dev 아래와 같이 두 화면(FirstScreen, SecondScreen)이 존재할때 Navigator를 이용해 화면 전환을 할 수 있다. class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Screen'), ), body: Center( child: RaisedButton( child: Text('Launch screen'), onPressed: () { // 클릭하면 두 번째 ..
[Flutter] Scaffold와 하위 속성
2022. 5. 24. https://api.flutter.dev/flutter/material/Scaffold-class.html Scaffold class - material library - Dart API Implements the basic material design visual layout structure. This class provides APIs for showing drawers and bottom sheets. To display a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldSt api.flutter.dev Scaffold 스캐폴드는 발판, ..
[Flutter] Appbar 상단바와 하단바 예제
2022. 5. 24. 지금 정리할 내용은 NavigationBar와는 달리, 화면내에서 추가로 사용될 상단바와 하단바에 대해서 이야기해보고자 한다. 분명 많은 플러그인과 방법이 있겠지만, 사용해보고 좋았던 플러그인과 위젯을 기록해두려 한다. 1. 상단바로 좋은 TabBar https://pub.dev/packages/contained_tab_bar_view contained_tab_bar_view | Flutter Package Encapsulates TabController, TabBar and TabBarView into a single customizable Widget. pub.dev 플러터 2.0 3.0에서 지원되며, 널안정성을 갖추고 있다. 사용 예제 // Example 1 import 'package:contai..
[Flutter] Chip, Badge 사용법
2022. 5. 24. 앱을 개발하다보면, 작은 아이콘이나 이미지가 Text뒤에 붙어야 할때가 있다. 이럴때 Chip이라는 위젯이 존재한다. 또한 몇건의 알림이 왔는지, 장바구니의 몇개가 담겨져있는지, 좋아요가 몇개있지 간략하게 보여줄 필요가 있을떄 Badge 위젯을 사용한다. 1. Chip 칩은 Material 기본제공 위젯으로 위와 같은 버튼형식에 텍스트와 함께 첨부하는 데이터 또는 아이콘을 말한다. 라벨링을 하거나, 숫자정보 등을 표시하기에 안성맞춤이다. 사용예제 Widget _buildChip(String label, Color color) { return Chip( labelPadding: EdgeInsets.all(2.0), avatar: CircleAvatar( backgroundColor: Colors.white..
[Flutter] Riverpod Plugin
2022. 5. 16. 1. 상태관리란? App state는 앱 전체에 영향을 주는 데이터를 말한다. 앱 상에서 데이터가 즉각적으로 rebuild되어 반영되어지고 관리되어져야하는 부분이 있다. 이런 데이터를 관리하는것을 앱 상태관리라고 말한다. 예를 들어, 로그인 정보 유저의 설정값 사용자의 알림 새로운 정보의 게시글 등... 유저간의 메세지 등... 이러한 App state를 관리하는 방법은 여러가지가 있다. 기본적으로 Stateful위젯속에서 setState메소드를 활용하여, 데이터가 변경되어 반영되야하는 부분마다 setState 메소드를 사용해주면 앱 상태가 관리되며, Rebuild된다. 하지만, 이런 Flutter 위젯을 통한 기본적인 방식으로는 복잡하고 구조적인 인터렉티브한 앱을 구현하는데 한계가 있어, 플러터를 제작..
[Flutter] 기본 레이아웃 Widget
2022. 5. 16. https://flutter-ko.dev/docs/development/ui/layout Flutter 레이아웃 Flutter 레이아웃의 메커니즘과 레이아웃을 만드는 방법에 대해 배워봅시다. flutter-ko.dev 기본 구조를 잡는 위젯들의 사용법을 모르면, 잘 개발하다가도 왜 위젯이 안나오는지, 왜 초과해서 사라지는지, 애꿎은 위젯에 시간만 쏟으며 이유를 모르게 될 때가 있다. 미연에 방지하고자 (이미 시간을 많이 버렸지만) 기본 레이아웃을 정리한다. 위젯은 UI를 만들기 위해 사용하는 Class입니다. 이미지, 아이콘, 글자들도 모두 위젯입니다. 하지만 row, column, grid 같이 눈에 보이지않는 레이아웃 위젯들도 있는데요. 이들은 보이는 위젯(이미지, 아이콘, 글자 등)들을 제어하고, ..
[Flutter] Freezed Plugin
2022. 5. 16. https://pub.dev/packages/freezed_annotation freezed_annotation | Dart Package Annotations for the freezed code-generator. This package does nothing without freezed too. pub.dev Freezed는 아래와 같이 Class를 정의할 때 지루한 작업을 자동화합니다 Define a constructor + the properties Override toString, operator ==, hashCode Implement a copyWith method to clone the object handling de/serialization 자바에서 롬복 + 직렬화 등을 합쳐놓은것 같..
[Flutter] 유용한 Plugin
2022. 5. 12. 개발자에게 다양한 패키지의 존재를 알고 있는 것만으로도 강력한 개발 무기가되므로 많은 사람들이 추천하는 플러터 패키지들을 정리해보자 permission_handler 대부분의 운영 체제에서 권한은 설치 시 앱에만 부여되지 않습니다. 오히려 개발자는 앱이 실행되는 동안 사용자에게 권한을 요청해야 합니다. 플러그인은 권한을 요청하고 상태를 확인할 수 있으며, 사용자가 권한을 부여할 수 있도록 기기의 앱 설정을 열 수도 있습니다. Android에서는 권한을 요청하는 설명까지 보여줄 수 있습니다. url_launcher 앱상에서 다양한 정보를 링크하여 열 수 있게 해주는 라이브러리입니다. 기본 전화앱, SMS, Mail, Web Page 등을 연결해줄수 있습니다. 해당 플러그인을 실행하기 위해서는 권한을 필수적..
[Dart] Sound Null Safety 견고한 널 안전성이란?
2022. 5. 9. 1. Null Safety란? Dart는 2.12 및 Flutter 2에서 가장 큰 변화라 할 수 있는 Null Safety! 뜻밖에 널 익셥선을 방지하는 견고한 널 안전성을 지원하는 null safety는 변수가 더 이상 null값을 가지지 않도록 막아, 널 역참조 오류를 막는다. 안전성을 지키는 코드 형식은 런타임 에러를 미연에 방지하고 edit-time 에러를 내어줍니다. // null-safety 적용 이전 bool isEmpty(String string) => string.length == 0; main(){ isEmpty(null); } 널 안전성이 추가되기전 과거 이 코드는 NoSuchMethodError 라는 런타임 에러를 호출했습니다. Dart에서 null은 Null클래스이며, Strin..
[Dart] 동적변수 var, dynamic 비교
2022. 5. 9. 웹개발자가 많은 구글에서 만들어진 플러터는 꽤나 자바와 자바스크립트의 상당부분과 닮아있습니다. Dart언어에서의 변수가 타입을 가지는 변수들과 모든 타입으로 초기화가 가능한 var, dynamic 을 알아 보겠습니다. 이 둘은 특정 모든 타입을 받을 수 있다는 공통점이 있지만, 초기화 이후 Dynamic은 동적으로 타입변경이 되지만, var는 초기화시 타입을 추론해 하나의 타입으로 지정됩니다. 1. Dart var ( !=JS var) JS에서 var는 선언과 동시에 모든 타입을 받을수 있고, 이후로도 다양한 타입으로 자유자재로 해당 변수에 타입에 제약이 없이 재사용이 가능합니다. 하지만, Dart에 var는 입력이 주어지게되면 해당 타입으로 타입 종류가 정해지게 됩니다. 이후에 다른 타입의 값을 넣으려..
[Dart] Future async await 란?
2022. 5. 5. Flutter 비동기 처리 프로그램을 제어하기 위해 존재하는 Future와 async/await 가 있습니다. 1. 비동기 처리 일반적인 프로그래밍은 단일 스레드 환경에서 순차적으로 (동기적으로) 수행이 이루어집니다. 프로그램에서 파일 읽기, 데이터베이스 쿼리, 웹 페이지 가져오기 등 과 같이 긴 작업을 하면 오랜시간을 프로그래밍이 멈춰있게 되므로 이런 작업을 비동기 처리로 진행합니다. 비동기 계산은 시간이 걸리는 작업이 끝날때까지 기다리지 않고, 계속적으로 다른 작업들을 처리할 수 있도록 해줍니다. Dart에 Future클래스는 미래에 요청한 데이터 혹은 에러가 담길 그릇과 같습니다. 2. Future 란? Future는 크게 두가지 상태를 가지며, [ 완료 / 미완료 ] 두가지의 결과 값을 가질 수 ..
[Dart] Final , Const 차이점
2022. 5. 5. 공통점 이 둘은 모두 상수를 선언하는 키워드 입니다. 둘다 뒤에 어떠한 변수 타입을 명시해주지 않아도, 초기화 되는 값으로 타입을 추론해주는 편리함이 있습니다. 차이점1 Final , Const 둘다 선언후에 재설정이 불가하지만, 어떤 차이가 있을까요? const는 컴파일 타임에 반드시 초기화되야 하며, (컴파일 안전) final은 런타임 시점에도 객체를 초기화 해줄 수 있습니다.(런타임에서 지정가능) 예시코드 1) 컴파일 시점 초기화 아래와 같이 컴파일 시점에 초기화는 모두 에러없이 수행된다. 2) 런타임시점 초기화 아래와 같이 런타임 시점에 값이 결정되는 경우, const 는 지정 불가하다는 에러가 발생한다. main() { const DateTime now1 = new DateTime.now(); ..
[Flutter] Hot Restart, Hot Reload 차이점
2022. 5. 5. 핫 리로드, 핫 리스타트는 개발중인 프로젝트 앱을 실행하고 변경되는 사항을 빠르게 반영하기 위해 지원하는 기능이다. 이 둘의 가장 큰 차이점은 빌드유무에 있다. 1. Hot Reload Dart VM에 변경된 코드를 불러오고 위젯트리를 재빌드한다. 앱의 상태를 보전하기 때문에, main(), initState()를 재실행하지 않는다. 2. Hot Restart Dart VM에 변경된 코드를 불러오고 앱을 재시작한다. 앱의 모든 상태를 잃어버리고, 새로 시작하므로 main() 부터 호출된다. 3. 사용 Relaod 로 가능할 때 - 새로운 라이브러리의 사용 및 변경 - 위젯의 구조변경 및 수정 - image나 assets파일의 추가사용 Restart 를 해야할 때 - initState 메서드상에 변경 - ..
[Flutter] Pubspec.yaml 에 대해서
2022. 5. 5. https://dart.dev/tools/pub/pubspec The pubspec file Reference guide for the fields in pubspec.yaml. dart.dev 1. Pubspec.yaml 이란? 플러터 프로젝트에서 사용하는 모든 메타데이터 (패키지, 프로젝트 버전, 자원 등)의 종속성을 명시하고, 관리하는 파일입니다. + YAML 이란? xml과 json보다 구성 파일에 더 많이 사용되는 직렬화 언어입니다. 아래와 같이 Key: Value 구조로 명시하며, 들여쓰기 및 Array( - 하이픈) 표기법 등의 작성법이 존재합니다. 2. 필드 종류 name 모든 패키지에 필요합니다. version pub.dev 사이트에서 호스팅되는 패키지에 필요합니다. description..

티스토리툴바