본문 바로가기

Tech55

flutter splash image 설정하기 앱 처음 나오는 이미지 만들기 Flutter 앱 스플래시 이미지 설정 완벽 가이드 준비물 Flutter 개발 환경 스플래시 이미지 (PNG 또는 JPEG 형식) 단계별 설정 1. flutter_native_splash 패키지 설치 flutter pub add flutter_native_splash 2. pubspec.yaml 설정 dependencies: flutter: sdk: flutter #splash creator flutter_native_splash: ^2.3.0 3. flutter_native_splash.yaml 설정 flutter_native_splash: image: assets/splash.png # 스플래시 이미지 경로 (assets 폴더 기준) color: "#42a5f5" # 배경색 (스플래시 이미지 로딩 실.. 2024. 4. 9.
flutter 앱 개발시 사용자가 처음 설치했을 때 소개 페이지 만들어서 사용자 전환율 높이기! 튜토리얼 설명 페이지 Introduction screen 앱 사용자 전환율을 높이는 비결: Introduction Screen 활용 가이드 앱의 첫인상은 사용자들이 앱을 계속 사용할지 결정하는 중요한 요소입니다. 사용자에게 앱의 주요 기능과 장점을 명확하게 보여주는 것은 앱 사용자 전환율을 높이는 데 매우 중요합니다. Introduction Screen은 앱 처음 실행 시 사용자에게 앱의 주요 기능과 장점을 소개하는 화면입니다. 이 화면을 효과적으로 활용하면 사용자 경험을 향상시키고 앱 사용자 전환율을 높일 수 있습니다. 1. Introduction Screen 패키지 introduction_screen 패키지는 Flutter에서 쉽게 소개 화면을 만들 수 있도록 도와주는 유용한 패키지입니다. 이 패키지를 사용하면 다양한 디자인의 소개 화면을 손쉽게 만들 수 .. 2024. 3. 1.
flutter에서 go_router로 로그인시 라우팅 설정하기. 로그아웃일 때 못들어가게 하기. 안녕하세요, 오늘은 Flutter에서 Go_router를 이용하여 로그인 시 라우팅 설정하고 로그아웃 시 접근을 제한하는 방법에 대해 알아볼게요. Go_router는 Flutter에서 라우팅을 쉽게 관리할 수 있도록 도와주는 패키지에요. Flutter GoRouter에서 로그인 여부에 따라 라우팅 설정하기 로그아웃 시 접근 제한 로그아웃 상태일 때는 로그인이 필요한 페이지에 접근할 수 없도록 설정해야해요. 이를 위해 Go_router의 redirect 옵션을 사용하여 로그인 상태를 체크하고, 로그아웃 상태일 때는 로그인 페이지로 리다이렉트하도록 설정해요. 핵심은 router 안에서 redirect로 로그인 상태가 아니면 로그인 페이지로 보내주는 것이에요!! 1. pubspec.yaml: 패키지 다운로드 .. 2024. 3. 1.
FutureBuilder를 사용하여 배경 이미지를 설정하는 방법 [flutter] 아래 코드는 배경 이미지를 설정하는 코드에요. 이 코드에서는 FutureBuilder를 사용해서 비동기로 이미지 파일을 가져오고, 그 파일을 BoxDecoration으로 설정하여 배경 이미지로 사용하고 있어요. 에러 발생 코드 Container( decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: FileImage(widget.lightAnimation.imageFile), ), ), ) 문제는 FileImage와 BoxDecoration이 Widget이 아니라는 것이에요. 그런데 제가 이해한 바로는 Container의 자식 위젯이 많은 변수와 함수로 구성되어 있어서 Container를 사용할 수 없다고 하셨네요. 대신.. 2023. 11. 9.