Flutter - 기본위젯 4

새로 만든 Flutter 프로젝트  시작전 세팅을 하나해줘야한다. 

analysis_options.yaml에 들어가서 rules : 부분에 4개의 소스코드를 입력해야한다.

이코드는 lint 를 끄는 용도이다.

 

lib파일에 있는 main.dart가 메인페이지이다.

 

"앱 시작해주세요" 라는 의미아다.

MyApp 부분에  앱 메인페이지 입력을 입력하면 된다.

 

 

 

 

 

위에 4줄은 기본적으로 있어야하는 부분이기 때문에 건들지 않고 넘어가면 된다.

 

실질적인 코딩은 return ~ 부분부터 할 것이다.

 

 

 

 

 

 

Flutter에서 앱 디자인넣는 법 : 위젯 짜집기

기본위젯 4가지 : 글자 위젯, 아이콘 위젯, 이미지 위젯, 박스 위젯

 

글자 위젯 

 

 

글자를 넣을 때는 Text('원하는 글자') 형식으로 넣어준다. 

 

 

아이콘 위젯

star 부분대신에 shop 등 다른 아이콘들을 넣을 수 있다.

아이콘 넣을 때는  Icon(Icons.아이콘이름) 형식으로 넣어준다.

 

 

 

이미지 위젯

이미지를 넣을 때는 Image.asset('경로') 형식으로 넣어준다.

 

 

 

 

 

 

이미지 보관용 assets 폴더 만든다.

 

 

 

 

 

 

 

저장된 이미지를 금방 만든 assets폴더에 드래그해서  넣으면 된다.

 

 

 

 

그 후, 이미지를 쓰겠다고 등록도 해야한다.

pubspec.yaml에 들어가서 flutter를 찾아 assets폴더를  쓰겠다고 적어주고

assets/ 는 assets 안의 모든 파일을 뜻한다.

 

 

마지막으로 Image.asset('이미지 경로') 부분에 이미지 경로를 입력하면 된다.

 

박스 위젯

 

 

 

 

박스를 넣을 때는 Container()를 사용해준다.

home: Container() 또는 home: SizedBox() 

50의 단위는 LP으로 Flutter에서 사용하는 사이즈 단위이다.

위의 Container 같은 경우는 기준점이 없기 때문에 부모를 통해 결정하면 된다.

 

 

 

 

 

 

내 자식 위젯의 기준점을 중앙으로 설정 해주는 Center()

위젯 안에 위젯 -> 위젯 ( child: 위젯() )