잡코더

일정 시간 주기로 움직이는 광고 배너 예제 PageView 와 Timer.periodic() 를 통해 이를 구현할 수 있습니다. 아래는 인스타와 같이 사진이 일정 주기로 스와이프 되는 코드입니다. 아래의 코드를 조금만 수정하면 해당 기능을 구현할 수 있습니다. import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'dart:async'; void main() { runApp(const MyApp( title: 'Flutter Demo', )); } class MyApp extends StatelessWidget { final String title; const MyApp({super.key, requir..

Define PageView class PageView는 스와이프를 통해 하위 위젯들을 렌더링 할 수 있는 UI Widget 입니다. 보통 한 화면에 한 페이지를 구현하는데, PageView를 사용하면 한 화면에서 여러 페이지를 책처럼 넘겨볼 수 있도록 구현할 수 있습니다. - 스크롤 가능한 페이지 리스트 - 각 하위 위젯들은 강제로 같은 사이즈가 됩니다. - PageView를 제어할 수 있는 PageController를 제공해 줍니다. - Ex) 인스타 스토리, 스크롤 되는 앱 상단 광고 배너 등 - PageView + Timer 는 일정 시간 마다 넘어가는 광고 배너를 만들 수 있다. Function 1) 페이징 방향 변경(scrollDirection: Axis.vertical) 2) 페이지 넘김 보..

운영체제에서 제공하는 그래픽 인터페이스(시스템 UI)의 특정 부분과 어플 간의 상호작용을 제어합니다. 즉, 시스템 UI 의 색상이나 모드를 변경 가능하고 앱 실행 방향이나 변경 이벤트를 전달 받을 수 있습니다. Static Method of SystemChrome class 함수 설명 setEnabledSystemUIMode() 앱의 풀스크린 모드를 지정합니다. (예를 들어 핸드폰 상단의 시간이나 배터리 잔량이 보이지 않게 가릴 수 있습니다.) setPreferredOrientations() 앱을 실행하는 방향을 지정합니다. (가로, 가로좌우반전, 세로, 세로좌우반전 옵션이 있습니다.) setSystemUIChangeCallback() 시스템 UI 가 변경되면 콜백함수를 실행합니다. setSystemUI..

Image Widget을 비롯한 영역을 채울 때 사용하는 BoxFit 에 대한 포스팅이다. 사용방법은 다음과 같습니다. Image.asset( 'assets/img/image_$x.jpeg', fit: BoxFit.fill, ), Constants values → const ListA constant List of the values in this enum, in order of their declaration. BoxFit의 values에는 아래와 같이 7개의 상수값이 있습니다. 이제 그 특징에 대해 알아봅시다. [fill, contain, cover, fitWidth, fitHeight, none, scaleDown] Values 1) fill → const BoxFit Fill the target ..

목차 StatelessWidget vs StatefulWidget StatelessWidget StatelessWidget Life Cycle StatelessWidget 특성 StatefulWidget StatefulWidget 특성 StatefulWidget Life Cycle StatefulWidget Life Cycle 이해를 돕기위한 3가지 예시 상태변경이 없는 생명주기 StatefulWidget 생성자의 매개변수가 변경됐을 때 생명주기(Stateful을 이해하기 좋음) State 자체적으로 build() 를 재실행할 때 생명주기 1. StatelessWidget vs StatefulWidget StatelessWidget: 위젯 내부에서 값이 변경되어도, 위젯 자체적으로 다시 렌더링할 수 없는..

Timer의 기능은 두가지로 명확하다 1. 기다린 후 일회성으로 함수를 실행 2. 주기적으로 반복하여 함수를 실행 3. 사용방법 * 영단어 period: 기간 periodic: 주기적인 duration: 지속, 계속, 지속기간 1. 기다린 후 일회성으로 함수를 실행한다. Timer의 default constructor 이다. 기다릴 기간과 1회 실행할 콜백함수를 인자로 전달한다. import 'dart:async'; // 해당 시간을 기다린 수 콜백함수 1회 실행 Timer(Duration(seconds: 3), (Timer timer) { // 매개변수로 현재 실행중인 Timer 객체가 제공된다. // 기능 구현 }) 2. 주기적으로 반복하여 함수를 실행 Timer의 유일한 named construct..

현재(2023.03.28 기준) 가장 최신 버전은 4.0.7이다. WebViewWidget으로 사용하며 아래 코드와는 차이가 존재합니다. 맥락을 파악하기 위한 용도를 포스팅 한다. https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() { runApp(const MyApp()); } class MyApp ..

플러그인을 사용하다 보면 웹뷰, 카메라, 사진첩 등 사용자의 권한이 필요한 경우가 존재한다. 플러터는 각 네이티브 플랫폼으로 코드가 컴파일되므로 최소한의 네이티브 설정이 필요하다. 각 안드로이드와 iOS에서 설정하는 방법을 알아보자 목차 - 안드로이드 설정 - 안드로이드 권한 설정(AndroidManifest.xml) - 안드로이드 빌드 설정(build.gradle) - iOS 설정 - iOS 권한 설정(info.plish) - Flutter 설정 파일 및 총정리 안드로이드 설정 1. 안드로이드 권한 설정(AndroidManifest.xml) 안드로이드 앱에 필요한 각종 권한은 AndroidManifest.xml( android/app/src/main/AndroidManifest.xml ) 파일에서 작업..

Flutter에는 로딩 시 사용하는 위젯이 두 개 존재한다. 1. LinearProgressIndicator(추후 업데이트 예정) 2. CircularProgressIndicator LinearProgressIndicator, CircularProgressIndicator 모두 background와 valueColor라는 색상 매개변수를 제공한다. - backgroundColor: 위젯의 배경 색상을 의미한다. 기본적으로 셋팅된 동그라미 형태에 색을 지정하는 것이다. - valueColor: 애니메이션으로 움직이는 부분의 색상을 의미한다. 색상이 애니메이션이 되어야 하기에 AlwaysStoppedAnimation이라는 클래스에 감싸서 색상을 제공해야한다. (직접 구현하니 color을 지정해도 잘 동작한다..

여러 플러그인 중 하드웨어를 다루는 플러그인은 크게 5가지가 존재합니다. 종류는 다음과 같다. 다음 포스팅에서 사용 방법에 대한 설명을 포스팅할 예정입니다. 1. 움직임을 측정하는 센서 ( plugin: sensors_plus ) - Accelerometer: 핸드폰의 움직이는 속도 측정 - Gyroscope: 핸드폰의 회전을 측정 - Magnetometer: 자기장을 측정 2. GPS ( plugin: geolocator ) - 위치 서비스 기능 - GPS 권한 관리 - 핸드폰 위치 업데이트 받기 - 위도 경도를 기반으로 거리 계산 3. 카메라 ( plugin: camera ) - 카메라 권한 관리 - 카메라가 찍는 화면 렌더링 4. 블루투스 ( plugin: flutter_blue ) - 주변 블루투..

Flutter는 선언형 UI를 갖는다. 'Everthing is a Widget' 구글에서 플러터를 소개하는 문구입니다. 플러터에서 화면에 보여지는 UI와 관련된 모든 요소는 위젯으로 구성되어 있습니다. 위젯은 현재 주어진 상태를 기반으로 어떤 UI를 구현할지를 정의합니다. 즉, 플러터는 선언형 UI로 구성되어 있습니다. 명령형 UI 와 다르게 선언형 UI의 경우 View를 실행 중 생성하지 않습니다. 처음 생성된(선언한) UI에 대하여 값에 따른 변화를 주는 방식으로 구성되어 있습니다. 그래서 값에 따른 변화로 인해 View의 오버헤드를 신경쓰지 않아도 되니 생산성이 올라갑니다. 제가 생각하는 선언형 UI는 다음과 같습니다. "미리 선언을 해두어 형태가 정해져 있고, 상태(값, State)에 따른 형태..

Flutter의 정의 Flutter 플러터는 구글이 구현한 크로스 플랫폼 프레임워크 입니다. 안드로이드와 iOS, Web, Windows, masOS, Linux Desktop App까지 지원을 합니다. Flutter의 3계층 플러터 프레임워크는 3계층(임베드 계층, 엔진 계층, 프레임워크 계층)으로 나눠져 있습니다. Embedder(임베더) Layer 하드웨어와 가까운 Low-level 계층 (embed: 포함시키다) 운영체제의 자체적 기능을 모듈화했고, 운영 체제와의 연계를 위한 플랫폼의 엔트리 포인트를 제공해준다. 플러터가 현재 지원하는 6개의 각 플랫폼에서 구동되게 해주는 레이어다. 각 플랫폼의 네이티브 플랫폼과 직접 통신한다. 이 모듈들은 각 플랫폼의 네이티브 언어로 작성되어 있으며, 안드로이드..