ICT Story

Could not build the precompiled application for the device.

# 개요 내가 가지고 있는 테스트폰(iPhone XR)에 빌드를 했는데 에러가 발생했다. 기존에 잘 작동하고 있던 테스트폰이라서 당황했으나, 구글링을 통해 쉽게 해결하겠지라고 생각하며 구글링을 시작했다. 대부분의 글들은, Podfile을 삭제 후 재설치를 해보라고 하거나, flutter clean, flutter pub get을 이용해 Flutter dependency를 다시 설치하라고 하는 글들이 대부분이었다. 결국 재설치를 위한 시간만 날리고 해결되지 않았다. 걔 중에는 Xcode의 버전이 낮아서 그렇다며, Xcode 업데이트를 진행하라고 하는 글도 있었는데, 결과론적으로 말하자면 해결은 될 수 있으나, 외부라이브러리와 버전이 안 맞는 등, 다른 곳에서 문제가 발생할 수 있다. 작은 것을 고치려다, ..

디자인 패턴 1 - 화면 구역별로 나눠서 관리하자

# 개요# 화면 구역별 관리BeforeAfterTopPartBottomPart_HomeScreenState # 개요디자인 패턴이 왜 중요할까?서비스의 규모가 커짐에 따라 사용자 인터페이스인 애플리케이션들도 덩치가 커지고 있다.따라서 하나의 애플리케이션을 개발하는데, 여러 명의 개발자가 작업을 해야하는 경우가 많다.일정한 패턴이나 컨벤션이 없이 개발을 진행한다면, 서로 다른 방식의 코드가 작성되어서 누가 퇴사를 하거나, 인원이 바뀐다면 힘든 상황을 맞이할 수 있다. 나는 혼자 개발을 하니 상관없다?혼자 개발을 하더라도 유지보수를 위해서 디자인 패턴은 꼭 필요하다.일정한 패턴없이 무분별한 개발이 진행된다면, 흔히 말하는 스파게티 코드나 에일리언 코드와 같은 코드가 작성되어서 유지보수하기 힘든 상황이 발생할 ..

Font 적용하기

1. asset/font 추가하기2. pubspec.yaml 수정하기3. TextStyle을 사용해서 적용하기4. 결과 1. asset/font 추가하기폰트를 변경하기 위해서는 Asset 폴더와 그 밑에 Font 폴더를 생성하고 변경하고 싶은 폰트 파일(.ttf)을 넣자. 2. pubspec.yaml 수정하기asset/font를 추가했으니, pubspec.yaml을 수정하고 적용하자.fonts: - family: baemin fonts: - asset: asset/font/BMYEONSUNG_ttf.ttf - family: parisienne fonts: - asset: asset/font/Parisienne-Regular.ttf - family: sunflower fonts: - asset: asset..

[Dart] DateTime 와 Duration을 활용한 시간/날짜 구하기

현재시간 확인하기특정 시간 환산하기특정 날짜(연, 월, 일) 선언하기날짜 사이의 차이 구하기특정 날짜가 또 다른 날짜의 이후인지 아닌지 확인하기날짜 연산하기현재시간 확인하기Dart에서 시간 데이터를 다루기 위해서는 DateTime 을 사용하면 된다.void main() { DateTime now = DateTime.now(); print(now); print(now.year); print(now.month); print(now.day); }// 결과 2022-09-23 11:51:13.218 2022 9 23 특정 시간 환산하기Duration을 활용하면 특정 값을 항목별로 환산할 수 있다.무슨 말이냐면,void main() { Duration duration = Duration(seconds: 60); ..

PageView

# PageViewPageView widget을 사용하면 한 화면에서 여러 페이지를 보여줄 수 있다. 구현 방법은 쉽다. 다음과 같이 PageView를 생성하고, children이라고 선언된 부분에 List 형태로 값을 넣어주면 된다.import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Code Sample'), ), body: PageV..

StatelessWidget vs. StatefulWidget

Android Native 앱이나, iOS Native 앱을 처음 개발할 때 가장 중요하다고 생각하는건 Lifecycle이다. Flutter 앱 개발에서도 마찬가지로 Lifecycle이 있다.앱에서 화면은, 변화하지 않을 수도 있고, 사용자의 인터렉션이나 실시간 변경 등을 통해 데이터나 UI가 변화될 수도 있다. Flutter에서는 이 두 가지 상황에 따라 StatelessWidget, StatefulWidget으로 나뉜다.Widget의 기본 개념기본적으로 Widget은 불변의 법칙을 갖고 있다.하지만 우리는 Widget을 변경해야할 때가 있다.(색, 크기 변경 등)변경이 필요하면 기존 Widget을 삭제하고 완전히 새로운 Widget으로 대체한다. StatelessWidget StatelessWidge..

WebView 4.x

https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev 현재 날짜 기준 최신 버전은 4.0.4버전인데, 이 글은 4.0.2버전을 기준으로 작성했다. # pubspec.yaml dependencies: flutter: sdk: flutter #... webview_flutter: ^4.0.2 #... webview_flutter: ^4.0.2 추가 # AppBar 구현하기 home_screen.dart import 'package:flutter/material.dart'; import 'pack..

Image 추가하기(Asset 폴더 활용)

# Asset 폴더 생성 Flutter에서 Image를 추가하기 위해서는 Asset 폴더를 생성해서 활용하면 된다. Project 상단(아래 그림에서는 splash_screen)을 우클릭하고, New > Directory를 선택해서 asset 폴더를 생성한다. # Image 추가 asset 폴더 밑에 image 폴더를 생성해서 넣고 싶은 이미지를 넣어준다. # 코드 추가 pubspec.yaml 파일을 수정한다. flutter: 아래에 다음과 같이 수정하고, pub get을 눌러서 적용한다. 이제 소스코드로 이미지를 가져오면 된다. class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return S..

Row & Column

# 개념 말 그대로 수평으로 위젯들을 나열해야할 때는 Row wiget을 사용하고, 수직으로 나열해야할 때는 Column widget을 사용한다. [목차] # MainAxisAlignment 1. MainAxisAlignment.start 2. MainAxisAlignment.end 3. MainAxisAlignment.center 4. MainAxisAlignment.spaceBetween 5. MainAxisAlignment.spaceEvenly 6. MainAxisAlignment.spaceAround # CrossAxisAlignment 1. CrossAxisAlignment.start 2. CrossAxisAlignment.end 3. CrossAxisAlignment.stretch #MainA..

[Tip] iOS & Android Emulator DEBUG 라벨 없애기

처음 Flutter 개발을 시작할 때, Emulator로 앱을 실행해보면 오른쪽 상단에 DEBUG라고 표시되어있는 라벨을 발견할 수 있다. 말그대로 Debug 환경에서 돌아가고 있다는 뜻이다. 사람에 따라 이 부분이 거슬려서 없애고 싶어할 수도 있다. 방법은 간단하다. void main() { runApp( MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen() ) ); } debugShowCheckedModeBanner: false 옵션을 넣으면 된다. # 결과

[Tip] Android Emulator always on top

Android Studio에서 실행하는 Android Emulator 앱을 항상 상위에 유지하는 방법이다. 아래 그림과 같이 옵션을 누르면 Expanded Controls 창이 나타난다. Settings 메뉴에서 Emulator always on top 옵션을 활성화하면 된다.

Getting started with HelloWorld

프로젝트 생성하기 전... Flutter에 대해 괜찮은 유료 강의를 찾고 있다면, 코드팩토리의 초급, 중급 강의를 추천한다. 최소한 이정도는 알아야 한다는 점들을 명쾌하게 설명을 해주면서, 강의를 다 보더라도 커뮤니티 채널을 유지하면서 강사와 소통도 할 수 있다. # 개발 환경 구축 코드팩토리 초급 강좌에 무료로 잘 설명되어 있어, 링크를 첨부한다. MAC 세팅하기 Windows 세팅하기 Flutter라는 크로스 플랫폼을 사용한다는 것은 안드로이드와 애플을 모두 하나의 프레임워크로 커버하겠다는 의미가 클 것이다. 애플 앱을 개발하기 위해서는 MacOS가 되는 기기를 사용해야 한다. # 프로젝트 생성 새로운 언어를 처음 접했을 때, 해봐야 하는 건 역시 HelloWorld를 출력해보는 것이다. 이를 위해 ..