Flutter

플러터 1년차가 말하는 '정말 배워도 괜찮을까?'

20년 10월부터 현재까지 플러터로 30만 다운로드의 글로벌 서비스를 개발 및 서비스하고 있는 주니어 개발자이다. 라고 말하고 다니기 너무 부끄러운 수준이지만, 플러터로 개발을 시작하는 사람들이 갖는 궁금증들을 1년 내내 고민해왔기에 글을 쓰게 되었다. 플러터의 기술적인 부분 보다는 커리어 적인 부분에서 작성한 글이다! 이전에 플러터에 관해 썼던 글이다. 아래 링크의 글은 플러터 장단점에 대한 글이다. RN과 네이티브와의 차이점에 대해 설명되어 있으니 참고하면 앱 개발 프레임워크에 대한 선택에 도움이 될 것이다. [Flutter] 플러터 이해하기 1. Flutter와 Dart의 개념 플러터라고 하면 항상 다트라는 용어가 나온다. 다트는 언어, 플러터는 다트를 사용하여 모바일 어플리케이션을 개발할 수 있는..

[플러터] 가로 모드 회전 막기

가로 모드로의 회전을 막는 방법은 매우 간단하다. 아래의 코드를 main 함수에서 실행하면 된다. SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); 추가로 ios에서는 다음과 같은 작업이 필요하다. UIInterfaceOrientationPortrait info.plist에 위 구문 추가 Runner를 X code로 오픈 후 device orientation의 portrait 옵션 활성화.

[플러터] application/octet-stream type

REST API 사용 시 content-type이라는 property가 존재한다. 말 그대로 데이터와 형식과 관련된 부분이다. 일반적으로는 application/json 타입을 사용하여 json의 형태로 데이터를 주고 받지만, API에 따라 다양한 타입이 요구된다. 위는 N-cloud의 Clova Speech Recognition REST API에서 요구되는 헤더이고, 음성 파일을 텍스트로 번역해주는 API로 파일을 전송한다. 이같이 content-type이 octet-stream인 경우 Flutter에서 request하는 코드는 다음과 같다. import 'package:dio/dio.dart'; import 'dart:io'; void requestSTT(String fileURL) async { R..

[플러터] ListView 경계선 흐리게 하기

ListView를 사용할 때 List가 끝나는 부분의 경계선을 부드럽게 만들어주고 싶을 때가 있다. 반투명을 주어 아래와 같이 자연스럽게 만들어주는 간단한 위젯이 존재한다. ShaderMask ShaderMask( shaderCallback: (Rect bounds) { return LinearGradient( //아래 속성들을 조절하여 원하는 값을 얻을 수 있다. begin: Alignment.center, end: Alignment.topCenter, colors: [ Colors.white, Colors.white.withOpacity(0.02) ], stops: [0.9, 1], tileMode: TileMode.mirror, ).createShader(bounds); }, (child: List..

[플러터] TabBar 만들기

Tabbar를 만드는 방법에도 여러가지가 있다. AppBar와 함께 만들 수 있고 TabBar와 TabBarView 위젯으로도 만들 수 있다. 후자의 방법에 대해 알아보자. TabBar & TabBarView class _LibraryPageState extends State with SingleTickerProviderStateMixin { //클래스에 with 해준다. ... } 사용하고자하는 클래스에 TickerProvider를 with 해준다. 간단하게 Animation의 Sync를 맞춰준다고 생각하면 된다. //선언부터 한다 TabController? _tabController; @override initState(){ //정의는 initState 이후에 한다 _tabController = ne..