전체 글

todo앱 만들면서 캘린더에 마크 표시가 안되어 해결방법을 적어보려고 한다. 1. 문제 파악하기 위의 사진은 마크 표시가 안 된 캘린더를 표시한 것이다. 원래 todo앱에 일정이 등록되면 해당 날짜에 마크 표시와 슬라이딩업패널에 일정보기 아래에 해당 날짜의 일정이 보여야 한다. 그러나 둘다 표시가 안 되었다. 그래서 다른 날짜를 클릭했을 때도 그런가 확인했다. 확인해보니 앱을 제일 처음 구동했을 때만 안되는 것이었다. 그렇다는 것은 해당 기능이 된다는 것은 변수를 잘못 선언했다는 말이었다. 2. 디버그 콘솔에 출력하기 디버그 콘솔에 앱 구동하고 바로 일정을 등록하면 어떻게 출력되는지 확인하고자 하였다. 그리고 나서 다른 날짜를 클릭하고 일정을 등록시 날짜가 어떻게 출력되는지 확인하였다. → 여기서 둘다 ..

Flutter에서 상태를 관리하기 위해서 Bloc패턴이나 Provider와 같은 패키지를 사용하게 된다. 그러나 시간이 흘러 GetX가 나와 사람들이 많이 쓰는 추세이다. GetX GetX설치와 관련해서는 따로 정리해놓은 글이 있기 때문에 이를 첨부해놓겠다. 2023.02.24 - [Flutter] - [GetX] getX 사용해서 snackbar 구현 [GetX] getX 사용해서 snackbar 구현 snackbar는 앱에서 수행했거나 앞으로 수행할 작업을 사용자에게 알려주는 UI 요소이다. 일시적으로 화면 하단에 나타난다. getX 사용하기 1. 종속성 추가 flutter파일에 pubspec.yaml파일이 존재한다. 여 uhee-12.tistory.com 상태 관리 내 경우에는 GetX없이 부모 위..

snackbar는 앱에서 수행했거나 앞으로 수행할 작업을 사용자에게 알려주는 UI 요소이다. 일시적으로 화면 하단에 나타난다. getX 사용하기 1. 종속성 추가 flutter파일에 pubspec.yaml파일이 존재한다. 여기에 들어가서 dev_dependencies탭에 아래의 명령어를 추가해준다. get: ^4.6.5 그러면 종속성이 알아서 추가된다. 가끔가다가 추가가 안되는 경우가 존재하는데, 이럴 경우에는 flutter pub get 명령어를 쳐서 종속성을 설치해준다. 2. import 하기 import 'package:get/get.dart'; getX를 사용하고자 하는 파일에 상위에 import를 하여 패키지를 가져온다. 3. GetMaterialApp로 사용하기 이를 바로 사용하려면 안되고 m..

widget: Flutter에서 화면에 표시된 모든 요소가 위젯이라 한다. 눈에 보이지 않지만 화면을 구성하는 레이아웃(Layout)도 위젯이라고 한다.위젯은 크게 두 가지로 분류할 수 있다.Stateful WidgetStateless WidgetStateful, Stateless Widget1) Stateless Widget: 어떠한 상태도 가지고 있지 않은 정적인 위젯이다. 어떠한 상태값도 가지고 있지 않기 때문에 Stateless Widget은 화면에서 어떠한 움직임이나 변화가 없다.예: 텍스트, 이미지 등.Stateless Widget은 화면에는 표시되지만, 사용자와 어떠한 인터렉션도 하지않는다. Stateless Widget은 StatelessWidget을 상속하여 생성한다.2) Stateful..

1. overflow에러(SingleChildScrollView) 왼쪽 사진은 화면의 크기보다 위젯이 더 큰 경우 발생하는 overflow 에러이다. 이 경우에는 사용하고자 하는 위젯의 최상위 Class를 SingleChildScrollView로 감싸주면 된다. 하나뿐인 자식이 너무 커서 화면에 다 안나오고 삐져나간다던지 할 때 스크롤을 해서 자식을 다 볼 수 있도록 해준다. 그렇게 되면 password 인풋을 눌렀을 때 왼쪽같은 오류가 났었다가 이제는 오른쪽처럼 스크롤이 가능하게 된다. 그래서 키보드에 의해서 인풋창이 가려지지 않게 된다. 2. 키보드 밖 클릭시(GestureDetector) 이와 관련된 강의를 여러번 봤지만 안 익혀져서 다시 정리한다. @override Widget build(Buil..

1. final과 const1) final 과 const 선언final 과 const 는 아래와 같은 방식으로 선언한다.final double pi = 3.141592;const double e = 2.71828;2) final과 const 공통점, 차이점final과 const 공통점한 번 설정한 값을 변경할 수 없다. (다른 값으로 변경하려고 시도하면 컴파일 오류가 발생)final & const 차이점const의 경우, 컴파일 타임에서 상수를 정의할 수 있다. 즉, const로 정의한 상수는 런타임에서 정의되는 값을 설정할 수 없다는 의미다.예를 들어, DateTime.now()의 경우 런타임에서 호출 될 때마다 결과 값이 다른데 이러한 값은 const로 설정할 수 없다.final은 런타임에서 결정되는..

홈페이지는 나혼자 구현해서 시간이 없기에 모바일까지 코드구현하는데 시간이 소요된다. 사이트를 보고자 하는 사용자를 위하여 모바일 페이지에서 데스크톱으로 이동하여 사이트를 이동할 수 있도록 모바일 페이지에서 데스크톱 페이지로 이동하라는 문구를 구현하고자 하였다. 1. react-device-detect 설치 npm i react-device-detect react-device-detect를 설치하여 모바일에 보일 화면을 만든다. 2. 모바일에 보일 화면 준비 import React from "react"; import styled from "styled-components"; const Outer = styled.div` display: flex; justify-content: center; `; cons..

1. Stack : stack는 자료구조에서 많이 보인다. 기본적으로 push와 pop을 사용한다. flutter에서 stack은 화면 위에 위젯을 표시하는 방식으로 화면에서 이동한다. 화면 위에서 위젯을 표시할 때 push를, 위에 표시된 화면을 제거할 때에는 pop을 사용한다. Stack의 자식 위젯 위치를 조절하는데 쓰인다. Postioned Positioned 위젯은 Stack안에서 사용되어야 하며, StatelessWidget과 StatefulWidget에서만 사용가능하다. 그런데 여기서 positioned를 사용하여 top, left, right, bottom을 이용해서 자식들을 배치할 수 있다. 내가 하면서 제일 먼저 생성한 자식위젯은 맨 아래에 쌓인다. 그리고 제일 나중에 생성한 위젯은 제..