Vintage appMaker의 Tech Blog

1. 설치 flutter pub add audioplayers 2. Player 객체생성 및 UI에 사용할 변수정의 3. 이벤트 핸들러 작성 initState에서 - 플레이어 상태를 채크히가 위해 onPlayerStateChanged.listen(파라메터값){} - 플레이위치를 얻기위해 onPositionChanged.listen(파라메터값){} 를 구현한다. 파라메터값이 포함된 정보로 프로그래시브 처리와 시간을 표시할 수있다. ... player.onPlayerStateChanged.listen((PlayerState event) { print("state: ${event.name}"); setState(() { if (event.name == "playing") { isPlaying = true; }..

Flutter 3.0으로 오면서 멀티플랫폼으로 Flutter는 안정적으로 변했다. 특히 Web app에서 PWA(Progressive Web App)을 만든다면 Flutter는 정말 괜찮은 선택 중에 하나이다. 그런데, Fluttrer로 Web App을 만들다보면 기존의 라이브러리들이 javascript로 되어있는 경우가 있는데, 이럴 때는 Javacript와 interface를 해야 한다. 1. javascript를 web 폴더에 작성한다. (app.js) flutter 프로젝트의 web 폴더안의 index.html이 있는 곳에 원하는 자바스크립트를 작성하여 코딩을 한다. [app.js] window.state = { reserved1: '전역변수처럼 사용가능' } // 호출예제 // 이 파일에서 ap..

Flutter로 PWA(Progressive Web App) 앱을 만들다보면, 브라우저의 크기에 따라 반응형으로 처리해야 할 때가 있다. 그 때는 LayoutBuilder를 이용하면 된다. 그리고 웹앱을 만들면 다른 도메인의 이미지들을 읽지 못하게 되는데, 이를 해결하기 위해 다음과 같이 빌드를 한다. flutter build web --web-renderer html --release [Flutter] Layoutbuilder를 이용한 반응형 UI LayoutBuilder class - widgets library - Dart API Builds a widget tree that can depend on the parent widget's size. Similar to the Builder widget..

Flutter는 Widget build(이곳에서만)시, 에러화면을 커스텀 할 수 있다. 1. main 함수에서 ErrorWidget.build를 새롭게 구현한다. 2. 파라메터로 FlutterErorrDetails를 받아서 메시지 처리가능하다. 3. KDebugMode 변수로 개발자 모드와 릴리즈 모드의 화면을 다르게 처리가능하다. (*) 스크롤되는 화면을 구현시 문제가 발생할 수 있다. [전체소스] import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main() { ErrorWidget.builder = (FlutterErrorDetails details) { // 릴리즈시 에러표시 Widget re..