Flutter/Framework(Flutter) 7

[Flutter] 이미지 출력 위젯

1. asset - 로컬 이미지 표시 - flutter 프로젝트 안에 assets 폴더를 만들고 그안에 image 폴더를 만든 후 넣고 싶은 이미지 파일을 추가한다. - pubspec.yaml 파일 안에 들어가서 주석 처리된 asset 관련 설정을 다음과 같이 변경한다. * 경로는 넣고 싶은 이미지 파일을 프로젝트 탐색기에서 우클릭하면 상대경로 복사하기 버튼을 누르면 된다. - image 파일 넣기는 Image.asset('이미지 파일 경로') 를 넣으면 된다. *윈도우의 경우 상대경로를 붙여넣으면 \ 한개로 경로표시가 되는데 이것을 \\ 두개로 변경해준다. - pubspec.yaml 파일에 asset 부분을 파일로 지정하지 않고 폴더로 지정할 수 도 있다. ( 폴더 내 모든 파일 적용 ) -만약 이미지..

[Flutter] 자주 사용되는 Button

1. ElevatedButton - 단순 버튼을 만들 수 있고 onPressed 로 버튼을 누를 시 동작을 선택 할 수 있다. 2. OutlinedButteon - 버튼의 경계선만 나타나는 버튼을 만들 수 있고 onPressed 로 버튼을 누를 시 동작을 선택 할 수 있다. 3. TestButton - 단순 텍스트 만으로 버튼 처리를 할 수 있다. 4. GestureDetector - 다른 입력사항에 대하여 동작할 수 있도록 기능을 지원한다.

[Flutter] 컨테이너 위젯 작성하기

1. 컨테이너(단일 박스) 위젯이란? - html의 div 와 유사 - 레이아웃을 위해 단위로 구역을 나누기 위함 2. Container 생성방법 - 필요한 부분에서 Container()를 입력하면 된다. - 괄호 안에는 color, width, height 등 컨테이너에 관련된 여러 가지의 옵션을 넣을 수 있다. 3. SizedBox - container 안에서 box 가 필요할 때 사용한다. - 사용법은 다음과 같다. 4. Column - 컨테이너를 2개 이상 넣고 싶을 때는 column 을 사용하고, children 을 사용하여 container를 넣으면 된다. - 실제 사용법은 아래와 같다. - 세로로 배치되는것 말고 가로로 배치되는 것을 원하면 Column 대신 Wrap 또는 Row 를 사용하면..

[Flutter] widget(위젯)

1. 위젯이란? - 하나의 단위 기능 (소형 어플리케이션) 으로 볼 수 있다. - 프로그램의 유지보수 효율성을 위해서 위젯 단위로 프로그램을 짜고 별도 관리 할 수 있다. 2. VS Code widget 추출 방법 - main.dart 에서 scaffold(건설 현장에서 짓고 있는 건물 옆 작업자가 작업 할 수 있도록 하는 임시 구조물)를 클릭한 다음 컨트롤 + .(점) 을 눌른 후 widget 이름을 입력한 후 enter 를 누르면 auto generate 된다. - 아래와 같이 별도의 클래스로 작성된 것을 확인 할 수 있다. 3. widget dart 파일로 분리하기 - lib 폴더 안에 page 로 폴더를 생성한 후 위젯명.dart 파일을 생성한다. - import 'package:flutter/m..

[Flutter] 프로젝트 구조

1. android - android에 대한 native 설정 관련 - 권한설정 관련 - android > app > build.gradle 어플리케이션ID(com.회사명.어플리케이션이름) 관련 설정을 할 수 있음. 2. ios - ios에 대한 native 설정 관련 - 권한설정 관련 3. lib - flutter 구현 관련 - .dart 파일 위치 4. pubspec.yaml - 패키지 및 이미지 파일 , 폰트 설정 등 관련 5. analysis_options.yaml - linter(린터; 코드를 정확, 일정하게 작성할 수 있도록 표기) 관련 설정 6. README.md - flutter package 에 관련된 설명 자료 7. test - test 관련 8. web - web 관련