정리 - rlatkddbs99/Flutter GitHub Wiki

프론트 : 시각적으로 보이는 것; 백엔드 : 사용자가 필요로 하는 정보를 저장 및 관리

http : 통신규약, 데이터를 요청하는 방법 규정 브라우저가 대신 해서 메시지를 받고 보내줌 html : 문서와 이미지등 많은 정보 xml : html과 비슷하지만 데이터를 표현 json : xml보다 사용하고 해석하기 쉬움, 데이터 타입 표현 가능(key, value 형식) api : json을 보내주는 서버(데이터만)

프레임 워크 : 어떠한 서비스를 만들때 사용되는 기본 틀 dartpad : dart전용 온라인 IDE, dart코드를 만들어서 실행시킬 수 있는 환경

dart : main부터 시작 변수

list 변수 : 많은 데이터를 한번에 저장하는 경우 []로 표현. ,로 구분 , 여러 데이터 타입 함께 사용 가능 <열거형> generic List 변수명 = ["문자열","문자열","문자열"] -> 열거형 타입에 맞는 변수명만 가능 인덱스번호를 사용해서 접근 가능

타입추론 : 변수의 데이터를 보고 데이터타입을 추론해서 자동으로 써줌 var로 변수를 생성하면 타입추론을 해서 만듦

변수명.runtimeType -> 변수의 d.t is 예약어 -> print(변수명 is d.t) 변수가 해당d.t.가 맞으면 true

sdk (SoftWare Development Kit) 소프트웨어 제작시 필요한 개발 도구 프로그램(IDE) 디버깅 프로그램, 문서, API등이 들어가 있음

위젯 : ui를 만들어주는 모든 구성, 트리구조 핸드폰 상단 노치 때문에 잘리는 현상 -> 내가 사용하는 위젯은 SafeArea에 들어오게 해야한다 속성 (child에는 위젯데이터타입만 들어갈 수 있다. SafeArea(child: Text("hi))

Center 위젯 자식의 위젯을 가운데로 위치, 데이터타입이 위젯인것만 들어감

icon : 화면상에 아이콘을 보여줄 때 사용 데이터타입이 IconData인 것만 들어감

column 위젯 : 세로로 위젯을 나열할때 사용 자식들을 가질수 있는 위젯(children) 속성 : children에 데이터 타입이 List인 것만

column(
	children:[
		Text("widget1"),
		Text("widget2),
	]
)

ctrl + . -> 위젯감싸기

row위젯 : 가로로 위젯 나열 속성 children

ListTile : 제목과 소제목형식 leading 속성 : listtile앞에 위젯을 두고 싶을때 trailing 속성 : listtile뒤에 위젯을 두고 싶을 때

padding위젯 : 간격띄우기 child속성 : 위젯 데이터 padding 속성:edgeinsets.방향(간격)

위젯의 속성 위젯마다 각각 원하는 설정을 할 수 있는 특수한 것 위젯마다 사용할 수 있는 속성이 다름 일반적으로 자식위젯 사용시 child속성이름값 사용 속성마다 들어갈 수 있는 데이터 타입이 정해져있다

sizedBox 위젯 : 자식에게 사용할 수 있는 공간을 정함 width, height 속성

Container 위젯 : 자식위젯에게 사용할 수 있는 공간을 정함 예쁘게 자식위젯을 포장할 때(색상,둥글게,그림자 등) decoration 속성을 사용 안할 땐 color속성이 바깥에 있어도 되지만 사용하게 되면 무조건 decoration 속성안에 있어야함

Image.network위젯 네트워크의 데이터를 사용해서 이미지 사용 Image.network("이미지url") ->String 형태로만

Flutter, pubspec.yaml lib -> main.dart 코드 소스가 작업되는 장소 pubspec.yaml -> 프로젝트가 사용하는 이미지, 폰트 등의 자원들을 등록하는 출입국사무소 같은 역할 장치에 저장되있는 이미지를 사용한다면 등록과정이 반드시 필요함 작업할 때 다른 사람의 작업물 코드를 등록할 때 패키지 의존성관리 역할

이미지 위젯 Image.network : 네트워크에서 이미지 가져오기 .asset : 내저장소에서 이미지 가져오기 .memoty, .file -> 나중에

Image.asset -> pubspec.yaml에 등록되어 있는 이미지를 사용할 때 사용하는 위젯 사용방법 yaml파일에 assets부분을 주석해제, 폴더를 새로 만듦, 그안에 image폴더 만들고 원하는 이미지 드래그앤드롭 yaml파일에 원하는 이미지 경로 설정

crtl + d 여러 위젯 한번에 코딩 CircleAvatar : 동그란 아바타 만들기 backgroudImage : NetworkImage("src") -> 동그란 이미지 만들기

Cilpovar : 이미지에 맞춰 자른다 CilpRRect: 영역에 벗어나는거 자름 이미지를 넣을 때 프로바이더 이미지를 넣을 수 있으면 NetworkImage, 위젯이면 Image. Container로 자르기 cilpBehavior : Clip.antiAlias -> 내 자식도 영역을 무조건 따라와줘 또는 shape : BoxShape.circle 로 주고 Clip주기

화면 크기에 벗어난 데이터를 보여주면 overflow발생 Scroll -> 컬럼과 로우는 스크롤 안돼, 리스트뷰 사용

ListView 스크롤 방향 기본값은 세로 바꾸려면 scrollDirection을 바꿔

로렘입숨 : 쓸데없는 더미 텍스트 ..글자가 들어가면 어떤 모습일지 알고싶을 떄 사용 SingleChildScrollView : 자식객체에 스크롤 기능을 만들어줌, 방향설정 가능

PageView : 한 번에 한 위젯만 보여주고, 다음 위젯은 넘겨야만 보여줄 떄

PageView(
	children:[
	Text("1번"),
	Text("2번"),
	Text("3번"),
	],
)

머티리얼앱 : 디자인을 쉽게 할 수 있도록, 어플전체에 자동으로 기반, 건물을 짓기위한 땅 스캐폴드 : 머티리얼앱을 따라다님 , 건물의 철근 둘다 최상단 위젯

앱 바 : 앱의 헤더 -> 스캐폴드에 넣음

appBar: AppBar(
	title : text(""), ->제목
	backgroundColor: Colors.red -> 색상
	centerTitle: false ->글자 왼쪽으로, 가운데가 기본값
	backgroundColor: Colors.transparent ->배경색 없애기
	elevation: 0 -> 배경색, 그림자 없애기
	foregroundColor: 전경색 
	leading: 앞에 위젯 넣기
	actions: [    -> 뒤에 위젯 넣기, 리스트형태로
		위젯, 위젯, 위젯
	]
),

BottomNavigaionBar : 앱들의 스크린 네비게이션 scaffold에 넣어서 사용, 필수속성 값은 items이다. items의 갯수는 두개가 넘어야한다

bottomNavigaionBar : BottomNavigationBar(
	items: [
		BottomNavigaionBarItem(icon: Icon(Icons.abc),label: '홈'),
		BottomNavigaionBarItem(icon: Icon(Icons.abc),label: '검색'),
	]
)

FAB : 스캐폴드에 넣어서 사용, 필수속성값은 onPressed이며 function을 줘야한다.

floatingActionButton: FloationgActionButton(
	onPressed: () {},
	child: Icon(Icons.add), ->중간에 넣기
	mini = true, ->작게
	elevation : 0, ->그림자 없애기
	backgroundClolor: Colors.black -> 배경색
)

ContactTile('이름','번호','이미지 url') -> 리스트타일과 똑같은 효과

커스텀 위젯 내가 표현하고자 하는 디자인요소를 명확히 선언 가능 내가 자주쓰는 위젯을 따로 빼서 관리가능 코드 유지보수 및 관리에 용이

파일명은 UpperCamelCase로 매개변수로 전달해야 할 데이터 타입도 명확히 할 것

TextField : 사용자에게 입력받기

TextField(
	decoration: InputDecoration(      //데코레이션
		label: Text("제목"),   //라벨달기
		labelStyle: TextStyle(color:Colors.green),   //라벨 스타일 변경
		hintText: "example",    //hint주기
		fillColor: Colors.blue,	//그냥 쓰면 안바뀌어   ->왜? 원래 색깔이 없음 그래서 filled속성이랑 같이 써
		filled: true	//fillColor색상으로 채우기
	), 
	cursorColor: Colors.purple,	//커서 색깔 바꾸기
)

어떻게 입력을 받을까?

입력될 때 마다 변수에 저장
Controller 배정(담당자 배정)

이벤트와 핸들러 이벤트 : 입력, 터치 등 다양한 사용자의 행동 핸들러 : 그 행동에 맞춰서 어떻게 처리해야할지 정함 둘은 같이 바인딩해줘야 해

이벤트 종류 입력 -> onChanged, onInserted 등 (이벤트) var 변수명 = 새로운 값 -> 저장 (핸들러)

눌렀다 -> onPressed, onTap (이벤트) 기능실행 (핸들러)

두번 눌렀다 -> onDoubleTap (이벤트) 기능실행 (핸들러)

실패하였다 -> onFailed, onError(이벤트) 기능실행(핸들러)

Event Handler == 함수 ->

예시

TextField(
	 onChanged: (value) {  //함수. 이벤트에 대해서 어떤 핸들러(기능)을 할 것인가?
		print(value);    //; 중요
	}
),

결과 -> TextField에 입력하는게 이벤트가 되어 터미널에서 출력된다

or main.dart에서 함수 핸들링하기 overriding 위에 함수선언

void _handleOnChanged(String value) {
	print(value);
}

TextField(
	onChanged: _handleOnChanged<
),

같은 결과

함수? 어떠한 행동을 하고 결과를 나한테 넘겨주는 ㅓㄳ

함수의 선언과 호출 선언(정의) : 함수 만들기 호출 : 함수 실행

void(리턴값 지정 ex)Stinrg,int 등) 함수명(){ 코드 블록 //실행할 내용 }

void 함수: 반환 안해. return 불필요, 실행만 하고 결과 안줘 int 함수 : int 형 데이터를 결과로 내줌, return DataType맞춰서; String, List, bool 등등

void printmsg(){
	print("안녕");
	print("hi");
}

void main(){
	printmsg();	//함수 실행	
}

결과 -> 안녕 hi

함수의 기본 특성 함수는 특수한 임무를 가지고 있게 만들기 미리 정의 해놓으면 호출만 하면되는 간편함 독립적인 메모리 공간 사용 -> 함수안의 변수를 main에서 못 사용하잖아 함수에 데이터 전달 가능(매개변수), 매개변수의 개수 맞춰주기

매개변수 ex)

void printmsg(String yourName){  //매개변수로는 String형태만
	print("안녕"+yourname);
	
}

void main(){
	printmsg("이름");	//함수 실행	
}

결과 -> 안녕 이름

변수와 텍스트 같이출력 print("ㄱㄱㄱ $출력하려는 변수명 ㄱㄱㄱ"); -> 수식 가능 ${3+2}

TextButton위젯 : 텍스트가 버튼 ElevatedButton : 강조하고 싶은 버튼 OutlinedButton : 테두리가 나타나는 버튼 IconButton : 아이콘에 버튼을 넣음, padding 기본 적용

TextButton(
	
)

정리 - rlatkddbs99/Flutter GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️