[Flutter] Flutter 기본 위젯

 

 

프로젝트 초기 생성 시 여러 파일들과 main.dart 파일도 함께 생성된다.

기본적으로 이해를 돕기 위해 프로젝트 생성 시 샘플 코드가 들어 있지만 쓸모가 없기 때문에 void main() 함수 블럭 하위의 모든 코드를 삭제한다.

 

깔끔하다.

 

main 함수 블럭 아래에 stless를 입력한 후 Flutter Stateless Widget을 선택한다.

- dart 언어는 main 함수 내에 작성된 코드가 실행된다.

 

생성된 클래스의 이름을 지정해준다.

 

return 구문 뒤의 Container를 MaterialApp으로 바꿔주면 메인페이지에 대한 기본 세팅은 끝난다.

 

 

텍스트 위젯

- Text('텍스트')

 

아이콘 위젯

- Icon(Icons.아이콘 이름)

 

이미지 위젯

- Image.asset('경로')

- 이미지를 넣고자 한다면 프로젝트 경로 상에 이미지를 보관할 폴더를 생성후  "pubspec.yaml" 파일을 열어 아래 사진과 같은 구문의 주석을 풀어 생성한 이미지 리소스의 경로를 입력한다. 영어 해석이 가능하다면 pubspec.yaml 파일의 주석으로 친절하게 설명이 적혀 있으니 참고한다.

 

박스 위젯

- Container() 혹은 SizedBox() => 용도는 같음

대충 다음과 같이 작성 후 구동 되는 것을 확인해보기 위해 앱을 실행해본다.

control(맥은 command) + shift + p를 눌러 명령 팔레트를 연 후 flutter:Selecet Device 입력, 실행시키고자 하는 디바이스로 실행시킨다(control + F5).

 

- 내 자식 위젯의 기준점을 중앙으로 설정해주기 위해 Container를 child로 지정후 Center()로 감싸주면 Container 위젯이 화면 정중앙에 위치하게 된다.

 

잘 실행된다.