📱 Mobile/📱 (old) Flutter v 1.0 검색 결과

해당 글 35건

비동기처리를 위한 Timer 클래스

JS에서의 setTimeout, setInterval 개념과 비슷한 동작을 수행할수 있는 Timer클래스를 살펴봅시다. dart:async 패키지에 포함되어 있습니다. Timer 클래스는 앱을 종료할 때(dispose) 동작을 취소해줘야 합니다. (백그라운드에서 계속 돌아가게 되니깐요) 물론 다른 버튼을 눌러 수동으로 동작 취소를 하게할 수도 있지만 해당 버튼을 누르도록 강제할 수 없으니 위젯이 dispose될 때 해제하는 것이 좋습니다. UI 관련 내용은 전부 제거하고 Timer 로직과 관련 있는 부분만 가져왔습니다. // dart:async 패키지에 있습니다. import 'dart:async'; Timer _timer; var _time = 0; var _isRunning = false; // 위젯..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 8. 13. 11:04

[Android] Dex 문제 해결

firebase를 사용하던 중 다음과 같은 오류를 마주쳤다. https://developer.android.com/studio/build/multidex 64K가 넘는 메서드의 앱에 관해 멀티덱스 사용 설정 | Android 개발자 | Android Developers 앱이 여러 DEX 파일을 빌드하고 읽을 수 있도록 하는 multidex라는 앱 구성의 사용설정 방법에 관해 알아보세요. developer.android.com D8: Cannot fit requested classes in a single dex file (# methods: 97532 > 65536) com.android.builder.dexing.DexArchiveMergerException: Error while merging dex..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 15. 23:25

Yellow lines under Text Widgets in Flutter?

https://stackoverflow.com/questions/47114639/yellow-lines-under-text-widgets-in-flutter 이번에 레이아웃을 짜면서 이상하게 Hero 애니메이션과 모달창에서 텍스트의 밑에 노란 밑줄을 자주 접하게 되었고 이 문제의 원인을 찾게 되었다. 우선, 이 문제는 Text를 Material로 감싸서 해결할 수 있다. Hero면 양쪽에 다 Material을 감싸면 된다. 뒤에 글씨가 보여야 하니 transparency를 타입으로 주면 된다. child: Center(child: Material( type: MaterialType.transparency, child: Text("HomeCooking", style: TextStyle(color: Colo..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 10. 21:26

Sliver

sliver가 뭐나면 slivers are parts of scrollable area. 즉 스크롤 가능한 영역을 flutter에서 부르는 말이다. sliver를 사용하는 데에는 한가지 조건이 있다. 언제나 CustomScrollView 내부에 정의되어야 한다. https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html 그리드 뷰, 리스트 뷰, 앱바를 구분하지 않고 한번에 모두 스크롤 다운 하고 싶다면 Sliver 종류(SliverList, SliverGrid, SliverAppBar)를 사용하자. 아래에 나와있지 않지만 SliverFillRemaining이라고 해서 빈 영역을 슬리버의 영역으로 지정하는 위젯도 있다. SliverAppBar를..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 7. 19:13

network image 캐싱하기

ListView로 네트워크 이미지를 뿌렸는데 다른 페이지에 있다가 다시 돌아오면 재로딩을 하게 된다. 현재 이미지를 가져오는 방식에는 캐시가 적용되지 않는다. Image.network("https://picsum.photos/id/237/200/200"), 이를 해결하기 위해 플러터가 공인한 패키지를 사용해보도록 하자. (https://pub.dev/packages/cached_network_image) 자세한 사용법은 공식 문서를 보는 것이 좋지만 사용법 자체각 워낙 간단해서... CachedNetworkImage( imageUrl: "https://picsum.photos/id/237/200/200", placeholder: (context, url) => CircularProgressIndicato..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 6. 19:09

BLoC (Bisuness Logic Component) 디자인 패턴

데이터를 Bloc에 전부 몰아 놓고 stream을 통해 해당 데이터가 변화할 때마다 UI를 업데이트하는 디자인 패턴이다. 특정 라이브러리, 패키지가 아니기 때문에 어느 프레임워크, 언어에서나 React에서도 RxJS를 활용해서 Bloc 패턴을 사용할 수 있다. bloc패턴은 비즈니스 로직과 UI를 분리한다. bloc에 상태와 관련된 데이터들이 모여있으며 화면은 데이터 관련 처리를 하지 않고 단순히 bloc에서 데이터를 받아 화면에 출력합니다. Bloc에 일괄적으로 데이터를 모아 처리한다는 점에서는 상태 관리 Redux와 비슷하며 값이 변하는 것을 감지(구독)해서 새로 렌더한다는 점에선 Reactive programming과 닿아있습니다. 데이터를 담당하는 코드와 UI를 담당하는 코드가 분리되면서 좀 더 ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 5. 13:44

stream, StreamBuilder

stream은 정보의 흐름으로 비디오, 오디오 등 연속적인 정보를 말합니다. 비동기적으로 연속적인 데이터 흐름을 처리하는 방식을 Stream이라고 보시면 될 것 같습니다. 자세한 내용은 buffer, stream 등을 다룬 포스트가 따로 있으니 그 글을 살펴보시고, 여기서는 flutter의 StreamBuilder를 활용해보는 코드를 작성해보겠습니다. 우선 간단한 카운터 기능을 하는 위젯은 StreamBuilder를 통해 만들어보겠습니다. 물론 간단히 stful 위젯에서 setState로 count값을 조정하는 식으로 코딩하는 것이 훨씬 당연한 일일터입니다만 연습이니까... 우선 일반적인 state를 활용하는 방식입니다. class Home extends StatefulWidget { @override ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 5. 10:18

flutter 테스트 하기

전에 언급한 저이 있는데, test 폴더 내에 작성한 코드를 통해 테스트를 진행할 수 있다. 간단하게 http를 통해 api 정보를 받아오는 테스트 코드를 작성해보았다. test 함수에 테스트 이르뫄 실행할 함수를 작성하면 된다. response.statusCode가 200이 될 것이라 기대하고 테스트를 돌려보았다. (vscode기준 Run을 누르면 된다) import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:flut/main.dart'; import 'package:http/http.dart' as http; void main() { test("http 통신 테스트", ..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 7. 5. 08:12

Android app 빌드 및 플레이 스토어 배포 과정

(https://flutter-ko.dev/docs/deployment/android) (한국어) (https://flutter.dev/docs/deployment/android) (영어) (https://here4you.tistory.com/198) 잘 설명한 한국어 블로그 Android 앱 출시 준비하기 Flutter 앱을 개발하는 동안, 커멘드 라인에서의 `flutter run`을 실행하거나IDE에 있는 툴바 **Run** 과 **Debug**를 선택하여 앱을 테스트할 수 있습니다. Flutter는 기본적으로 앱의 _debug_ 버전을 빌드합니� flutter-ko.dev Adding a launcher icon 번역할 필요 없이 간단하게 아래 포스트로 해결합시다. https://darrengwon..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 26. 00:13

flutter에서 자주 사용되는 기술

flutter에서 자주 사용되는 기술 0. ctrl + click으로 해당 위젯이 요구하는 속성 찾아보기 (이게 제일 중요) 예를 들어보겠습니다. 아 CircleAvatar는 stless 위젯이고 모든 속성은 {} 에 들어있으므로 선택적으로 값을 줄 수 있겠군요. 따라서 CircleAvatar(child: ...., backgroundColor: .... ) 이렇게 값을 줄 수 있겠습니다. * 이는 Dart의 문법에서 클래스의 생성자를 정의할 때 {}를 씌웠느냐, 씌우지 않았느냐의 차이와 똑같습니다. 아시죠? class CircleAvatar extends StatelessWidget { /// Creates a circle that represents a user. const CircleAvatar({..
📱 Mobile/📱 (old) Flutter v 1.0 2020. 5. 23. 19:10