앞서 배운 예제들 정도면 flutter로 간단한 앱은 구현할 수 있을 것이다. 앱의 껍데기를 덮는 걸 마지막으로 flutter 기초를 마무리 지어 보자! 앱 아이콘App Icon Generatorwww.appicon.co 먼저 앱 아이콘을 바꾸기 위해서는 크기 별로 png 파일이 필요하다. 위 링크를 따라가서 정방형 이미지를 업로드하면, iOS와 Android에서 바로 사용할 수 있는 형식으로 변환해 준다. 다운로드 받은 두 파일은 다음과 같다. 파일 형식이 이미 다 맞춰져 있기 때문에 이 녀석들이 들어갈 위치에 그대로 넣어주기만 하면 된다! Android는 mipmap들을, iOS는 AppIcon.appiconset을 통째로 교체해 주면 끝! 런치 스크린 Xcode를 열어서 LaunchScreen ..

지난 포스팅에서 화면 전환에 대한 언급을 살짝 한 것 같은데, 어찌 됐든 거의 대부분의 앱은 여러 화면 구성을 가진다. 그리고 그 화면 간 전환도 필수적인 요소이다. 오늘은 여러 화면 전환 방법과 약간의 커스텀이 들어간 화면 전환 방식을 알아보자.  스크린 별로 UI 레이아웃을 관리해 주기 위해 따로 파일을 구성하였다. 화면끼리 연결해 주기 위해 연결될 화면의 경로를 통해 항상 import 해줄 필요가 있다. Navigator.push()// home_screen.dartimport 'package:flutter/cupertino.dart';import 'package:sample_screen_change/screen/next_screen.dart';/*전체 코드 생략*/Navigator.push( c..

사진 여러 장을 좌우로 스와이프 하여 볼 수 있는 화면을 구성해 보자. 이번 예제는 너무 쉬워서 화면 구성에 관한 Tip과 심화 예제를 포함시킨다. 이번 실습은 Must Have 코드팩토리의 플러터 프로그래밍 2판>을 참조하였다. Assets 이미지 파일을 첨부하고, pubspec.yaml 파일을 업데이트해 주자. 스크린 나누기import 'package:sample_swipe/screen/home_screen.dart';import 'package:flutter/cupertino.dart';void main() { runApp( const CupertinoApp( home: HomeScreen(), ), );} 지금이야 화면 전환 없이 한 화면을 구성하는 것이 끝이지만, 현업에서..

이번 시간에 다룰 기능은 STT (Speech To Text)와 TTS (Text To Speech)이다. 사용자가 마이크 버튼을 누르고 말을 한 다음에 다시 버튼을 누르면 텍스트로 변환해 준다. 이어서 Speak을 누르면 화면에 작성된 글이 음성으로 변환되어 출력된다. 이 두 기능은 무료 오픈 소스를 사용하였다.  pubspec.yaml 파일에 두 라이브러리와 권한 요청을 위한 permission_handler를 추가해 준다.   전 예제와 마찬가지로 ios > Runner > Info.plist 에 들어가서 권한 요청을 위해 해당 코드를 작성해 준다. permission handling이 제일 애먹었던 부분인데, 단순히 권한 설정을 Info.plist에 추가하고 permission_handler 라이..

이번 시간에는 지난 시간에 이어서 사진을 찍고, 찍은 이미지를 서버에 업로드하는 과정을 해보자. 이전 포스팅의 코드와 거의 유사하므로 참고하면 좋겠다.  [Dev, flutter] 플러터로 iOS 앱 개발 시작하기 (3) - Camera, Gallery이제 본격적으로 인터랙션을 지닌 샘플 앱을 만들어 보자. 먼저 해볼 것은 image picker의 사용이다. 사용을 하기 위해서는 main.dart 파일에서 image picker를 import 하는 것도 중요하지만 그전에 여러 가dusanbaek.tistory.com 시작하기에 앞서 간단한 서버가 필요하다. Flask로 구성해 보자.  먼저 Web이라는 디렉터리를 만들고, 그 안에 uploads 폴더와 app.py 파이썬 파일을 생성한다. uploads ..

이제 본격적으로 인터랙션을 지닌 샘플 앱을 만들어 보자. 먼저 해볼 것은 image picker의 사용이다. 사용을 하기 위해서는 main.dart 파일에서 image picker를 import 하는 것도 중요하지만 그전에 여러 가지 설정을 해주어야 한다.  먼저 pubspec.yaml 파일에 image_picker의 dependency를 추가시켜 준다. (1.0.5 버전을 사용하였다.)  이어서 카메라와 갤러리의 접근 권한을 요청하기 위해 info.plist에 해당 코드를 추가해주어야 한다. 해당 파일은  ios/Runner/Info.plist 에 위치해 있다. 이 부분이 안드로이드에서 앱 개발을 할 때와 가장 큰 차이인데, 나도 안드로이드를 안 해봐선 모르겠지만 일단 이 설정을 해주지 않으면 에뮬레이..

iOS 개발 환경에서 쓰이는 Launchscreen을 플러터로 구현해 보자. 아마 안드로이드 개발자들에게는 Splash screen이라는 말이 더욱 자연스러울 것이다.  화면 구성을 위해 필요한 그림 파일을 다운 받자.  프로젝트에 assets라는 디렉터리를 추가하고 다운로드한 이미지를 안에 업로드한다.  pubspec.yaml 파일에 들어가 uses-material-design: true라는 코드 밑에 assets 디렉터리를 추가해 준다.  그러면 화면 상단에 팝업이 뜨고 Pub get을 눌러 yaml 파일을 갱신해 준다. import 'package:flutter/cupertino.dart';void main() { runApp( SplashScreen(), );}class SplashScr..

Swift로 네이티브 앱 개발을 주력으로 하다가 팀 프로젝트에서 하이브리드 앱을 만들 필요성이 생겨 그토록 미뤄왔던 flutter를 시작한다. 코드 위주로 작성을 하고, 필요한 개념들만 간단히 정리할 계획이다. 이미 시중에 플러터 관련 코드가 많지만, 내가 찾아보기엔 iOS cupertino design 기반의 예제 코드가 부족해 보여, 기존의 material design 코드를 iOS 느낌으로 전환하는 방식으로 작성해본다. 1. Hello Worldimport 'package:flutter/cupertino.dart';void main() { runApp( CupertinoApp( home: CupertinoPageScaffold( child: Center( ..

아무 생각 없이 실제 iOS Device를 PC에 연결 후 빌드를 하면 다음과 같은 오류를 발견할 수 있다.로그에 찍힌 대로 해당 프로젝트의 경로에 접근해서 flutter create . 명령어를 작성한다.// 해당 경로로 이동하여flutter create .