플러터 flutter 프로젝트 생성하고 위젯으로 글씨, 이미지 삽입, 그림 넣기, 박스 만들기

1. Project 생성

1) flutter new project 생성

파일-new futter project 혹은 안드로이드 스튜디오 시작화면에서 + 누르기

(1) project location : SDK 압축 푼 경로로 작성

(2) lint 끄려면 analysis_options.yaml 에서 rules 수정

 

2. 기본 틀

구글에서 제공하는 기본 위젯 세팅삭제

1) 삭제

void main 빼고 전부 삭제

NP : class 지정시 무조건 첫 글자는 대문자로 작성

 

2) STL + TAB

statelesswidget을 자동으로 생성해주는 단축키이다.

3) 참고-MaterialApp

void main 에서 Widgets4 클래스를 부르고, 여기서 MaterialApp 동작을 수행하는 원리.

return으로 MaterialApp을 하고 그 App 안에서 위젯들을 부르면 된다.

 

3. 위젯

(1) 아이콘

home: Icon (Icons.shop)

 

(2) 이미지

-이미지 저장할 디렉토리 생성

-dart 파일

home: Image.asset('주소')

이건 컴터 내장파일이고 Image.network하면 서버이미지.

-pubspec.yaml 파일

flutter: + uses-material-design : true 있는 부분을 찾아 아래 코드 추가

assets:

  - 디렉토리명 (파일명까지 안적어도 디렉토리 내에서 알아서 찾아줌)

 

 

(3) 글자

home : Text ('본문')

 

(4) 박스

home : Container ()

컨테이너의 경우, 위치를 지정해주지 않으면 너비를 지정해주어도 어디부터 그 너비만큼인지를 모르는 상황.

home: Container(color: Colors.red),

따라서 Center 위젯 등 안에서 container를 지정해주면 됨. 이때, 위젯안의 위젯은 child를 이용.

return MaterialApp(
    home: Center(
      child: Container(width: 50, color: Colors.blue),
    )
);

 

참고로, container 대신 Sizedbox 써도 괜찮다.