분류 전체보기

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을 이용해서 자식들을 배치할 수 있다. 내가 하면서 제일 먼저 생성한 자식위젯은 맨 아래에 쌓인다. 그리고 제일 나중에 생성한 위젯은 제..

1. Flutter SDK path 파악하기 flutter SDK download 된 경로 파악한다. 이는 SDK경로를 터미널에서 인식하게 하기 위함으로 SDK위치를 저장해놓는다. 2. SDK경로 저장하기 1) $HOME/.zshrc 파일열기 터미널로 들어가서 아래 명령어를 친다. vi **$HOME/.zshrc** 그러면 vi에디터로 해서 insert를 할 수 있게된다. 2) 명령어를 치고 저장 $HOME/.zshrc 파일에 제일 처음에 저렇게 써져 있어서 아래에 path를 입력했다. export PATH="$PATH:pwd" 3. flutter 사용하기 추가 가끔 가다가 플러터 버전이 바껴서 코드를 못 따라하는 경우가 있다. 웬만해서 자신의 플러터 버전을 외우겠지만 버전을 확인하고 싶을 때는 flut..

import와 void main import 'package:flutter/material.dart'; void main() => {runApp(MyApp())}; 처음에 플러터를 시작하게 되면 main.dart 파일을 만들게 된다. 이는 기본적으로 만들지 않아도 생성되는 파일이다. 그래서 임포트를 해서 material.dart package를 가져오면 된다. 그리고 나서 void main() {runApp(MyApp())};라는 main이라는 함수를 실행하게 된다. 여기서 MyApp()은 자기 마음대로 이름을 바꿔도 된다. materialApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { retu..