프로그래밍/Flutter 앱 개발14 Flutter 앱 개발 8 : 다국어 지원 I 코드가 더 복잡해 지기 전에 다국어 지원을 위한 구현을 추가해보자. 늦으면 늦을 수록 귀찮아 진다. ㅎ; 1. Easy Localization 패키지 추가 다국어 지원을 쉽게 도와주는 easy localization 패키지를 사용할 계획이니 pubspec.yaml 에 의존성을 추가하자. ... dependencies: flutter: sdk: flutter url_launcher: ^5.7.10 easy_localization: ^2.3.3 # 다국어 패키지 추가 ... 2. 다국어 리소스 추가 assets 아래에 translations 폴더를 생성하고 언어별 리소스를 추가한다. 영어 (en.json), 스페인어 (es.json), 일본어 (ja.json), 한국어 (ko.json), 중국어 (zh.js.. 2021. 1. 5. Flutter 앱 개발 7 : Contents 뷰 - Drawer 추가 Flutter 앱 개발 6 : Contents 뷰 - Scaffold, AppBar 추가 포스팅에 이어 Contents 뷰에 Drawer를 추가해 보자. 1. Drawer 추가 Drawer는 좌에서 우로 슬라이딩 되며 나오는 메뉴인데, '앱 평가하기' 메뉴를 drawer 에 추가해 보자. 지난 포스트에 작성해둔 Contents 클래스에 drawer를 추가해 보자. 뷰의 기본 틀을 만들어주는 Scaffold 위젯의 drawer 속성을 구현해 주면 된다. 참고로 구현 방법은 Drawer 위젯의 child 로 원하는 UI를 구성해 주면 된다. 일반적으로 Column 에 제목인 DrawerHeader 를 넣고 필요한 메뉴를 ListTile로 추가한다. 자세한 내용은 아래 코드의 주석을 참고하길 바란다. @ove.. 2021. 1. 3. Flutter 앱 개발 6 : Contents 뷰 - Scaffold, AppBar 추가 자 이제부터 우주 사진 리스트를 보여주기 위한 Contents 뷰 클래스를 차근 차근 만들어 보자. 1. Contents 클래스 추가 일단, lib/view 폴더를 생성 하고 contents.dart 파일을 추가하자. 일단, Contents 클래스를 Stateless 위젯으로 만들자. Stateless 위젯에 대해서는 Flutter 커스텀 위젯 (Stateless, Stateful) 를 참고하기 바란다. import 'package:flutter/material.dart'; class Contents extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build throw Unimplement.. 2021. 1. 3. Flutter 앱 개발 5 : 테마 설정 (폰트, 칼라 코드) 1. 폰트 추가 일단, 아래 페이지에서 NexonLv2Gothic 파일을 다운로드 한다. >NEXON LEVEL UP (레벨업) – 넥슨 브랜드 인벤토리 LEVEL UP의 첫 단계로 게임에서 경험했던 느낌을 서체에 담아 표현했습니다. 서체의 기능적인 부분 외에도 즐거운 경험들을 전달하고자 하는 또 다른 도전의 시작입니다. levelup.nexon.com 프로젝트 폴더에 assets/fonts 디렉토리를 만들고 아래 두 파일을 복사한다. NEXON Lv2 Gothic Light.ttf NEXON Lv2 Gothic Medium.ttf Nexon Lv2 폰트는 무료로 상업적 사용이 가능한 폰트다. 우리는 Light와 Medium 폰트 두가지를 사용할 계획이다. 마지막으로, 프로젝트 설정 파일인 pubspec.. 2021. 1. 2. Flutter 앱 개발 4 : Material App 생성 플러터 UI 는 위젯으로 시작해서 위젯으로 끝난다. 심지어 앱 자체도 MaterialApp 위젯이다. 일단, 프로젝트의 lib/main.dart 에 아래 소스를 붙여 넣어 보자. import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Space Daily', home: FlutterLogo(), )); } 실행 결과부터 보고 소스 설명을 해보자. 중앙에 플러터 로고가 나온다. :) 간단한 소스지만, 중요한 포인트를 설명해 보자면, 1) runApp() 함수 플러터 앱은 runApp 함수 호출로 시작된다. runApp 호출 시, 넘겨주는 위젯이 앱의 루트 위젯이 된다. 코드 자체는 간단해 보이지만, 내부적으로 플랫폼.. 2021. 1. 2. Flutter 앱 개발 3 : 앱 아이콘 추가 아이콘을 1024 x 1024 크기로 준비한다. InkScape 로 공돌이 갬성으로 그려서 PNG 파일로 export 했다. 안드로이드 앱 아이콘은 폰 해상도별로 다양한 크기로 준비해 줘야 한다. 직접 만들기 귀찮아서 App Icon Generator 라는 사이트를 활용했다. 사이트에 만들어둔 이미지를 추가 한후 'Generate' 라고 적혀있는 파란색 버튼을 누르면 AppIcons.zip 파일이 다운로드 된다. 파일의 압축을 풀고 AppIcons > android 아래에 있는 모든 디렉토리를 프로젝트의 android > app > src > main > res 아래에 복사하면 아이콘 준비가 끝난다. :) # 다운로드 폴더 에서 unzip AppIcons.zip cd AppIcons cp -r AppIc.. 2021. 1. 2. 이전 1 2 3 다음
