본문 바로가기

프론트엔드/Flutter

(8)
[Flutter] Pub.dev 접속 불가일 때 해결했던 방법 안녕하세요, 황대성입니다. 몇 주 전에 Pub.dev가 터져서 접속이 불가능했었습니다. 그래서 그 때 Pub.dev에 접속하기 위해 사용했던 방법을 공유하려고 합니다. (혹시나 다시 이런일이 발생할까, 작성합니다..ㅎㅎ) 첫번째 방법은 flutter pub get을 통하여 특정 packages를 get 할 때 사용하는 방법입니다. 현재 작업하고있는 directory에서 아래의 명령어를 사용하여 Pub host의 url을 변경해주는 것 입니다. 해당 방법은 현재 directory에서 pub.dev가 연결이 되지 않아 flutter pub get 명령어가 통하지 않을 때 사용했습니다. export PUB_HOSTED_URL=https://pub.flutter-io.cn export PUB_HOSTED_URL..
[Flutter] Flutter pub.cache path 위치 안녕하세요, 황대성입니다. 이번 글에서는 pub.cache의 path를 포스팅 하려 합니다. 생각보다 Flutter로 개발을 하면서 pub.cache에 접근해야 할 일들이 있더라구요.. 각설하고 바로 알려드리겠습니다! pub-cache는 Home directory에 위치하고 있습니다. Home directory에서 ls -a 명령어를 입력하면 숨어있는 pub-cache를 찾을 수 있습니다! 이 글이 도움이 되었으면 좋겠습니다 : ) 오늘도 제 글을 읽어주셔서 감사합니다! 참고 사이트 Dart - dart.dev/tools/pub/environment-variables Configuring pub environment variables How to configure your environment for D..
[Flutter] Flutter 2.0 & Stable Flutter WEB 안녕하세요, 황대성입니다 :) 오랜만에 작성하는 포스팅인 것 같네요! 이번 글에서는 Flutter 2.0과 Stable이 된 Flutter WEB에 관해 정리한 사항을 공유하려합니다! Flutter 2.0에서 Flutter 앱을 브라우저에서 기본적으로 실행할 수 있습니다. Flutter 2.0에서 가장 큰 사항은 웹에 대한 프로덕션 품질 지원입니다. How? WebAssemby로 빌드 된 새로운 CanvasKit 기반 렌더링 엔진을 추가하여 성능 최적화에 대한 많은 진전을 이루었다. 이번 릴리즈에서는 특히 아래의 세 가지 앱 시나리오에 중점을 둡니다. PWA SPA 기존 Flutter 모바일 앱을 웹에서 지원 Flutter Web에서는 dartdevc or dart2js 컴파일러를 통해 JavaScrip..
[Flutter] Client Post 통신 시 body에 json값 사용하는 방법 안녕하세요, 황대성입니다. 이번 글에서는 Flutter에서 Client를 사용하여 API 통신을 할 때 POST에서 body에 json값을 넣는 방법에 대해 포스팅하려 합니다! 제가 개발하다가 이건 공유하면 좋다고 생각이 들어 글을 작성합니다! 도움이 되었으면 좋겠습니다. 풀 코드를 통해 한 번에 설명해드리겠습니다! import 'dart:convert'; import 'package:http/http.dart' show Client; import 'package:http/http.dart'; Future getApiTest(List data, String name) async { var url = "api url"; try { Map data = {"harbor": harbor, "dock": dock..
[Flutter] Flutter_map package를 사용해 지도 구현하기 안녕하세요, 황대성입니다. 이번 글에서는 Flutter_map package를 사용하여 지도를 구현하는 방법에 대해 포스팅하려합니다. 준비물 Flutter Map Package: pub.dev/packages/flutter_map Geolocator Package: pub.dev/packages/geolocator 위 두 Package를 설치합니다. Flutter Map은 leaflet기반으로 구성되어있는 지도를 그려주는 라이브러리입니다. Geolocator는 현재 사용자의 위치를 받아오기 위해 사용하는 라이브러리입니다. 제일 먼저 현재 위치를 받아오는 코드를 구현해봅시다. import 'package:geolocator/geolocator.dart'; class Map extends StatefulWi..
[Flutter] Flutter 화면 세로, 가로 고정 방법 안녕하세요, 황대성입니다. 이번 글에서는 Flutter에서 가로, 세로 화면 고정하는 방법을 포스팅하려 합니다. (How to fix screen direction in Flutter) 1. import 'package:flutter/services.dart'; 를 임포트 해줍니다. 2. StatefulWidget을 사용한다면 아래와 같은 방법을 사용하세요! import 'package:flutter/services.dart'; import 'package:flutter/material.dart'; class Test extends StatefulWidget{ _Test createState() => _Test(); } class _Test extends State { @override void init..
[Flutter] Flutter에서 Hex값을 사용해 색상 설정 방법 안녕하세요, 황대성입니다! 이번 포스팅에서는 Flutter에서 제공하는 Colors에 있는 색상이 아닌, 개발자가 원하는 색상 (Hex, RGB...)을 사용하는 방법에 대해 포스팅해보려고 합니다! 엄청 쉬울 것 같지만 제가 개발하면서 막혔던 부분이었기에, 저와 같으신 분들이 조금이라도 더 도움이 되었으면 하여 글을 작성합니다!! Flutter에서 색상을 지정하는 다양한 방법들이 있습니다. // 가장 기본적인, Colors를 사용하는 방법 color: Colors.red; // ARGB 혹은 RGBO를 사용하는 방법 color: const Color.fromARGB(); color: const Color.fromRGBO(); // Hex값을 정수로 바꾸어 사용하는 방법 color: const Color(..
[Flutter] Mac + VS Code Flutter 개발 환경 세팅 안녕하세요! 황대성입니다. 이번 포스팅에서는 Mac + Visual Studio Code에서 Flutter 개발환경 세팅 방법을 작성하려 합니다. 포스팅하기 전 준비물이 필요합니다. Android Studio 설치 (https://developer.android.com/studio?hl=ko) XCode 설치 Visual Studio Code 설치 (https://code.visualstudio.com/) 준비물이 모두 준비되었으면 아래의 순서로 진행해주시면 됩니다. Visual Studio Code의 Flutter Extension 설치하기. Flutter SDK 설치 및 환경변수 설정하기. Flutter Doctor 실행하여 미설치되어있는 항목 설치하기. 행복하게 Flutter 코딩하기! 1. Vis..