코딩 다이어리

위 사진 처럼불러 처리된 이미지를 배경으로 하고, 그 위에 실제 이미지를 올리는 기능을 구현해보자! Blur 1. BoxDecoration 을 이용해 이미지를 불러온다.BoxDecoration : https://api.flutter.dev/flutter/painting/BoxDecoration-class.htmlContainer( width: double.maxFinite, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('이미지 주소'), fit: BoxFit.cover, ),), 2. BackdropFilter를 이용한 블러 효과 적용...child: ClipRect( child:..

플러터의 화면 구성은 Stack으로 생각하면 된다. 따라서 다른 화면으로 이동 하고 싶을 때는 push 이전 화면으로 돌아가고 싶으면 pop을 하면 된다. 오앙 신기! https://docs.flutter.dev/cookbook/navigation/navigation-basics Navigate to a new screen and backHow to navigate between routes.docs.flutter.dev공식 홈페이지에 설명이 아주 잘 나와있다! 아래와 같이 구현 할 수 있다. Navigator.pushpush 할 때, 어떤 페이지를 push 할 지를 정해줘야하는데, 이때 사용자가 커스텀 하여 생성 할 수도 있고,플랫폼 별로 만들어져 있는 MaterialPageRoute를 사용해도 된다...

https://api.flutter.dev/flutter/rendering/CrossAxisAlignment.html CrossAxisAlignment enum - rendering library - Dart APICrossAxisAlignment enum How the children should be placed along the cross axis in a flex layout. See also: Inheritance Object Enum CrossAxisAlignment Constructors CrossAxisAlignment() const Values start → const CrossAxisAlignment Place the children withapi.flutter.dev Flutter 에..

이번 시간에는 넷플릭스에 들어가는 N로고를 추가하는 방법에 대해 알아보는 시간~ 나는 강사님이 만들어주신 B로고를 그대로 사용했는데, Y로 바꾸고 싶다+_+ 이미지 파일 패키지에 추가하는 방법 1. root폴더 아래에 images폴더 생성 버튼 누르고 images 폴더 생성 (원하는 폴더명으로 하면 될 듯) 2. 생성한 폴더 (images)에 추가하고자 하는 이미지 파일 저장 3. pubspec.yaml 파일 수정 assets에 있는 주석을 지우고, 원하는 파일의 경로를 추가해주면 된다. ex) 수정 전 # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - i..

하단 네비게이션 바를 생성하는 방법에 대해 정리! 하단 네비게이션 바라고 하면 여기 사진에서 아래 홈 / 검색 / 저장 / 더보기 에 해당하는 네비게이션을 의미한다! bottom_bar.dart 하단 네비게이션 바를 구현하는 소스 TabBar 사용. 각 탭은 아이콘 + 텍스트로 구성. class Bottom extends StatelessWidget { const Bottom({super.key}); @override Widget build(BuildContext context) { // for flexible size based on device display final Size screenSize = MediaQuery.of(context).size; final double screenHeight =..

뭔가 계속 취준을 하다 보니 나의 개발 스택을 넓히고 싶다는 생각이 들었다. 그래서 예~전부터 해보고 싶었던 Flutter에 드디어 손을 살짝- Android 와 IOS를 둘 다 개발 해볼 수 있다니 두근두근! 인프런에 클론 코딩 하는 강좌가 있어서 입문해보고자 도전 했다. 강좌는 4년 전 꺼라 현재 업데이트 되면서 틀린 부분도 있어서 어렵긴 했다. 개발 환경 세팅 시작 할 때 가장 어렵고 번거로운 환경 세팅~ 하지만 홈페이지에 아주 잘 나와있어서 그대로만 하면 되었다! https://docs.flutter.dev/get-started/install Choose your development platform to get started Install Flutter and get started. Downlo..