일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Binding
- Maui
- MS-SQL
- JavaScript
- 플러터
- MVVM
- listview
- Flutter
- HTML
- 오류
- 애니메이션
- MSSQL
- db
- 리엑트
- Firebase
- AnimationController
- GitHub
- Animation
- typescript
- 마우이
- 함수
- 깃허브
- 닷넷
- spring boot
- .NET
- page
- 파이어베이스
- 자바스크립트
- React JS
- 바인딩
- Today
- Total
목록Flutter (82)
개발노트
const VS finalconst와 final은 둘 다 변수를 상수로 선언할 때 사용되지만, 사용하는 방식과 타이밍이 다릅니다.1. const의 특징컴파일 타임 상수로, 값이 컴파일 타임에 결정됩니다.주로 변경되지 않는 값을 선언할 때 사용합니다.const로 선언된 위젯은 재사용이 가능하며, Flutter의 위젯 트리 재구성에서 불필요한 렌더링을 줄여 성능 최적화에 도움을 줍니다.예: const color = Colors.blue;2. final의 특징런타임에 한 번만 할당되며, 이후 변경되지 않는 값입니다.값은 런타임에 결정될 수 있습니다.final 키워드는 DateTime.now와 같은 런타임에 생성되는 값을 저장할 때 주로 사용합니다.예: final date = DateTime.now();컴파일타..
문제: 화면 여러개를 거쳐 맨 마지막 화면에 도착했을 때, 처음 화면으로 이동하고 싶다면 GetX에서 네비게이션을 어떻게 해야할까? 시나리오: 현재 Get.toNamed() 로 pag1 > page2 > page3 로 네비게이션 한 상태이다.따라서 현재 화면 위치는 'page3'여기서 나는 page3, page2 를 닫고 page1으로 이동하고 싶다.즉, page1이 나올때 까지 화면을 다 닫아버리고 싶다. 닫아버린 화면들의 GetxController 들은 삭제되어야한다. 다만, page1에 Binding 되어있는 GetxController들은 살아있어야한다.class Page1Binding implements Bindings { @override void dependencies() { Get...
하나의 위젯에 실시간 감시를 요구하는 값이 2개이며, 각각 다른 컨트롤러에 있기 때문에 컨트롤러를 2개 사용해야하는 상황이 와서 고민을 해보았습니다. 1. GetBuilder목적: 특정 시점에만 UI를 리빌드하기 위한 도구입니다. 컨트롤러의 상태가 변경될 때 update() 메서드를 호출하여 수동으로 UI를 리빌드합니다.성능: GetBuilder는 필요한 시점에만 리빌드를 트리거하므로, 성능 최적화 측면에서 더 유리합니다. 특히 UI 업데이트 빈도가 낮고, 성능이 중요한 경우 GetBuilder가 더 적합합니다.사용 사례: 예를 들어, 페이지 내 특정 UI 요소만 드물게 업데이트되는 상황에 적합합니다.GetBuilder를 사용할 경우class ProfileView extends StatelessWidge..
GetX와 animated_bottom_navigation_bar 을 이용하여 하단탭 페이지전환 기능 만들기.!만들면서 Named Route 사용법을 익혀본다. GetX 설치: https://pub.dev/packages/get/install get install | Flutter packageOpen screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.pub.dev하단Navigation버튼 바: https://pub.dev/packages/animated_bottom_navigation_bar animated_bottom_navigation_bar | Flutter packageA..
WebSocket (TCP/IP)WebSocket은 실시간 양방향 통신을 가능하게 하는 기술로, 지속적인 연결을 유지하며 언제든지 클라이언트와 서버가 서로 통신주요 특징:양방향 통신: 클라이언트와 서버가 서로 데이터를 주고받음(ex 전화통화)지속적인 연결: 연결이 수립된 후에는 클라이언트와 서버가 지속적으로 연결을 유지실시간 통신: 실시간 데이터 전송이 가능, 지연 없이 즉시 통신Open - Close 개념: 연결이 시작될 때 HttpRequest를 WebSocket으로 Upgrade 요청을 한뒤, 101 Response를 받아 오픈(Open)하며, 통신이 끝날 때 클로즈(Close) 함* HTTP 상태 코드 101은 "Switching Protocols"를 의미(HTTP에서 WebSocket으로 변경한..
API 서버 http 통신에 riverpod을 이용하여 상태관리 하도록 만들어 보겠습니다.이번 시간에는 AsyncNotifierProvider와 http의 GET, POST, DELETE (CRUD) 를 같이 사용하여 어떻게 상태관리 할 수 있는지 포스팅 해보겠습니다.JPA의 save() 메소드로 upsert가 가능하기 때문에 update 즉, PUT는 생략하겠습니다.[구현할 기능 시나리오]1. 재료 리스트 화면으로 네이게이션되었을 때 findAll() 로 모든 재료를 받아 ListView의 ListTile에 맵핑합니다.2. 재료가 담긴 ListTile 을 클릭했을 때 해당 재료의 식별ID로 조회하여 하단 시트가 올라오며, 시트에 정보를 가져옵니다.3. ListTile 클릭으로 Bottom..
http 패키지 Flutter에서 네트워크 요청을 보내고 받는 데 사용되는 가장 일반적인 패키지 중 하나가 http 패키지입니다. 이 패키지는 HTTP 요청을 만들고 응답을 처리하는 데 도움이 되는 다양한 클래스와 함수를 제공합니다. HTTP 패키지의 주요 특징 간단한 인터페이스: http 패키지는 간단한 API를 제공하여 HTTP 요청을 쉽게 생성하고 수행할 수 있습니다. 이를 통해 개발자는 쉽게 네트워크 요청을 관리할 수 있습니다. 비동기 지원: 대부분의 네트워크 작업은 비동기적으로 처리되므로 http 패키지는 Future 기반 API를 제공하여 비동기 코드 작성을 간단하게 해줍니다. 이를 통해 UI를 차단하지 않고 네트워크 요청을 수행할 수 있습니다. HTTP 요청 설정: http 패키지를 사용하면..
- 날짜 연산 패키지: https://pub.dev/packages/jiffy - 액체같은 Swiper 효과: https://pub.dev/packages/liquid_swipe 사용해보니 생각보다 자연스럽고, 이전 페이지 위에 다음 페이지가 바로 생성되는 부분이 좋았습니다. - 간단한 Card Swiper: https://pub.dev/packages/appinio_swiper - 반응형 Scaffold: https://pub.dev/packages/flutter_adaptive_scaffold - 손쉽게 Sheet를 만들어줌: https://pub.dev/packages/wolt_modal_sheet - 영상에 필터를 걸거나 텍스쳐 효과를 줌(빗물, 3D효과, 파장 등): https://pub.dev..
bottomNavigationBar을 만들 때 GoRoute, Stack, OffStage 조합을 사용하는 이유는 다음과 같습니다. GoRoute: GoRoute는 일반적으로 네비게이션 기능을 제공하는 라우팅 패키지로 이를 사용하여 앱의 다양한 화면 간의 이동을 관리할 수 있습니다. 특히, Web에서의 동작을 path와 같은 URL로 처리할 수 있습니다. Stack: Stack 위젯은 위에서 아래로 겹쳐진 위젯을 나타냅니다. 여러 화면을 겹쳐서 표시하고, 사용자가 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아가게 합니다. 이것은 사용자 경험을 향상시키고, 앱의 내비게이션을 관리하는 데 도움이 됩니다. OffStage: OffStage 위젯은 화면에서 숨겨진 상태로 위젯을 유지합니다. 이를 통해 앱의 여러..
MediaQuery.of(context).size 는 BuildContext 형인 context가 필요합니다. 따라서 위 코드는 BuildContext 를 제공하는 build안에서만 사용이 가능합니다. - 해결방법: BuildContext가 없이 기기의 size를 가져오기 위해서는 MediaQueryData를 사용하면됩니다. import 'package:flutter/material.dart'; class DeviceSize { static final deviceWidth = MediaQueryData.fromView( WidgetsBinding.instance.platformDispatcher.views.single) .size .width; static final deviceHeight = Media..