Flutter (6) 썸네일형 리스트형 [Flutter Dev] Theme 를 이용한 텍스트 스타일과 폰트 적용하기 앱개발에서 Text 는 빼놓을수 없으며, 텍스트마다 스타일을 적용해야 합니다. 다만, 앱에 들어가는 텍스트는 일정 패턴이나 몇가지 스타일을 따릅니다.(텍스트마다 스타일이 다르면 UI적으로 난잡해보이겠죠) 이런 몇가지 패턴의 스타일을 Text 위젯을 사용할때마다 적용하는 것도 번거롭고, 추후 텍스트의 스타일 변경시에도 번거로운 작업이 아닐 수 없습니다. 이런 부분을 해소하고자 Theme를 사용합니다. Theme를 이용하면 앱전체에 속성이 적용이되기때문에, 추후 Theme에서 설정값을 변경시 앱전체에 반영이 됩니다. ThemeData 이미 기본 샘플 코드(프로젝트 생성시 자동으로 추가되는 코드)에 ThemeData가 구현되어 있습니다. return MaterialApp( title: 'Flutter Demo.. [Flutter Dev] 애니메이션 Splash / Intro 화면 전환 만들기 - AnimatedSwitcher 우리는 앱을 개발하면서 인트로 화면을 만들게 됩니다. 앱 시작시에 서비스에 필요한 버전 체크나 사용자 정보, 서비스 정보 등등을 수집 및 체크를 하게 됩니다. 위의 작업이 완료되면 서비스 화면으로 전환을 하는데, 이때 좀더 자연스럽게 전환을 하여 사용자에게 좀더 나은 UX 경험을 목표로 합니다. 이번 게시물은 이와같은 인트로 화면에서 애니메이션을 통해서 자연스럽게 서비스 화면으로 넘어가는 기능을 구현하도록 하겠습니다. AnimatedSwitcher 이번 개발의 핵심 위젯으로, 화면 전환시 애니메이션을 담당합니다. 다양하게 사용할수 있는 위젯이지만, 이번 게시물은 AnimatedSwitcher에 대한 글이 아니므로 간략하게 사용하고 넘어가겠습니다. 개발 코드는 기존 게시물에서 사용했던 프로젝트에 추가 구현.. [Flutter Dev] 디버깅을 위한 logger 를 사용해보자. 우리가 개발을 하다보면 수많은 난관과 어려움에 봉착하게 되는데, 그때마다 이슈를 해결하기위해 log를 찍어서 확인을 합니다. 이렇게 개발자에게 필수적이고, 편리한 logger 라이브러리가 있어서 소개 드립니다. https://pub.dev/ 사이트에서 'logger'로 검색을 합니다. 검색결과 맨 위에 logger라고 나옵니다.(오른쪽의 스코어를 보면 이 라이브러리가 얼마나 많이 쓰이고 있는지 알수 있습니다.) 상세 내용으로 들어가서, Readme를 잠깐 훑어보고 Installing 탭으로 이동하여 설치 방법을 확인합니다. 다른 라이브러리와 마찬가지로 pubspec.yaml 파일에 추가해주면 되네요. 위와 같이 라이브러리를 추가한 후에, (안드로이드스튜디오 오른쪽 상단) "Pub get"을 눌러줍니다. .. [Flutter Dev] 로컬 / 네트워크 이미지 화면에 표시하기 앱을 개발하게되면 프로필 사진이나 로컬 / 네트워크 이미지를 표시해야 하는 경우가 필수적으로 있습니다. 이번 게시물에서는 Flutter에서 이미지를 표시하는 방법에 대해서 알아보겠습니다. Flutter 플랫폼에서 기본 제공해주는 방법을 사용해도 되겠지만, 편리한 라이브러리가 있어서 이를 활용해보도록 하겠습니다. 샘플 코드는 기존 게시물에서도 작업을 해온 FlutterSampleApp 프로젝트에 구현하겠습니다. 1. 로컬 이미지 표시를 위해서, 프로젝트에 이미지를 추가하겠습니다. Flutter 프로젝트 assets/images/ 디렉토리를 생성하고, 이미지를 추가해줍니다. 2. assets/images/ 디렉토리를 pubspec.yaml 파일에 경로를 등록합니다. assets: - assets/icons/.. [Flutter] Flutter에서 SVG 이미지 사용하기 SVG: Scalable Vector Graphics 는 앱개발에서 주로 사용되는 이미지 파일 형식입니다. 기존에 bitmap, jpg, png 파일에 비해 여러가지 장점을 가지고 있습니다. 특히나 파일 사이즈가 직고, 이미지 크기 조절시에 품질 저하가 발생하지 않는 점이 최고의 장점이라 할수 있습니다. 그럼, 이렇게나 좋은 SVG 이미지를 Flutter에서 어떻게 사용할 수 있는지 알아보겠습니다. Flutter에서는 다행스럽게도 SVG 이미지의 사용을 도와주는 패키지(라이브러리)가 제공되고 있습니다. 1. pub.dev 사이트에서 "flutter_svg"를 검색하거나, 아래 링크를 클릭해주세요. flutter_svg | Flutter Package An SVG rendering and widget l.. [Flutter Dev] 라이트 / 다크 모드 테마 변경하기 요즘 괜찮다는 앱들은 사용자 편의를 위해 다크 모드를 제공하고 있습니다. Flutter에서는 다크모드를 어떻게 사용할수 있는지 알아보도록 하겠습니다. 샘플은 Flutter 프로젝트 생성시 자동은 생성되는 기본 코드에 작업을 하였습니다. 1. MyApp 클래스(main.dart) 에 앱 전역에서 사용할수 있도록 static으로 ValueNotifier로 선언하여, light / dart 테마로 변경시에 이벤트를 받을수 있도록 해줍니다. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static final ValueNotifier themeNotifier = ValueNotifier(ThemeMode.light.. 이전 1 다음
