[flutter] 03 앱 개발의 시작, 프로젝트 생성

새 프로젝트 만들기

Organization : 내이름 등 유니크한걸로 넣어주자. 나중에 바꾸려면 번거로우니 주의.

 

첫 시작

아래 코드를 입력하면 시뮬레이터에 사진과 같은 앱이 만들어진다. 플러터로 앱 만들기 첫 시작이다.

void main() {

  runApp(
      MaterialApp(home:Scaffold(body:Center(child: Text('Hello Flutter'),),),)
  );

}

 

 

 

우클릭, reformat with dart... 클릭시 다음과 같이 자동 정렬된다

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    ),
  );
}

이 때 항상 콤마(,)를 넣어주는 습관을 갖자. 넣었을 때 에러나는 상황도 간혹 있지만, 대부분의 경우 쉼표를 넣는 것이 리포맷으로 정렬할 때 도움이 된다. 쉼표를 넣는 규칙이 있는데 이것은 클래스를 배워야 이해가 갈 것이다. 지금 단계에서는 쉼표를 넣어주자. 

 

세미콜론(;)은 없으면 에러가 난다. 실수하고 싶어도 실수할 수 없는 부분이다. 어떤 명령이 끝나는 부분에 반드시 넣어줘야 함. 위 코드를 예시로 들면, runApp( ~~~~ ) 괄호 안에 있는 부분 영역까지 돌고 명령이 종료가 되는 것이다.

 

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Strong Guy')),
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    ),
  );
}

Scaffold라는 위젯이 갖고 있는 속성 중 하나인 appBar는 앱의 타이틀 역할을 한다.

위 코드와 같이 스카폴드 위젯 아래에 앱바라는 속성을 넣었다. 타이틀은 텍스트로 Strong Guy를 넣었다.

그 결과물은 아래처럼 앱의 상단에 텍스트가 들어가게 되었다. 저 부분이 appBar 영역이다.

안드로이드는 플랫폼 특성 상 디폴트가 좌상단 정렬이고, 반면 iOS는 디폴트가 가운데정렬이다.

'화면은 대충 이런 방식으로 꾸미는구나' 라고 생각하며 쓰다보면 자연스럽게 늘게 될 것이다

 

 

 

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.orangeAccent,
        appBar: AppBar(title: Text('Strong Guy')),
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    ),
  );
}

backgroundColor라는 속성 코드를 위 코드 내용과 같이 넣어서 앱에 색을 넣었다. 아래 사진처럼 바디영역에 색이 들어갔다. 사실, 타이틀영역에도 색은 들어가지만 appBar 속성에 가려졌다.

 

 

 

 

앱에 이미지도 띄울 수 있다. 온라인과 로컬 모두 가능하다. unsplach.com이라는 사이트는 라이센스가 무료인 이미지를 제공해주는 앱사이트이다. 위 사이트에서 하나 가져와보자. 앱 타이틀에 맞는 strong guy 이미지를 검색해서 우클릭하고 이미지 주소를 복사하자. 

 

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.orangeAccent,
        appBar: AppBar(title: Text('Strong Guy')),
        body: Center(
          child: Image(image: NetworkImage('https://images.unsplash.com/photo-1647456788971-90ac7066de4b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3Ryb25nJTIwZ3V5fGVufDB8fDB8fHww'))
        ),
      ),
    ),
  );
}

 

child 속성에서 기존에 있던 텍스트를 지우고 이미지를 넣었다. 네트워크이미지를 치고 괄호 안에 '복사한 주소'를 넣으면 아래와 같은 결과물이 나온다. 이미지 링크 등 기본적인 속성은 구글에서 검색하면 잘 나온다.

 

 

 

위 사진을 네트워크가 아닌 앱에 저장된 상태로 띄우기 위해서는 다음과 같은 작업이 필요하다.

첫번째로, 내가 생성한 프로젝트의 폴더에 들어가서 적당한 위치에 사진을 넣어준다.

이 연습의 경우 images 라는 폴더를 만들고 그 안에 위 사진을 strong_guy라는 파일명으로 저장했다.

 

 

 

다음은 이미지파일이 프로젝트 안에 들어왔다는 것을 명시하기 위해 pubspec.yaml파일을 안드로이드 스튜디오에서 열어준다. 

 

uses-material-design: true

위 라인 아래에 같은 레벨로 아래 코드를 작성해 준다. 그 다음 펍스펙을 저장해준다. 

assets:
  - images/

 

이때 띄어쓰기가 굉장히 중요하다.

[assets:] 의 경우 두 칸 띄워주고 [- images/]의 경우 네 칸 띄워준다

펍스펙을 수정하면 무조건 습관적으로 Pub Get을 눌러주자. 

 

 

 

이 화면을 다시 보면서 마무리하자.

여기까지 만들어본 앱 페이지는

Scaffold 라는 전체 페이지 구조 아래에서

Appbar가 상단 일부분(회색 영역)을 차지하고 있다.

Appbar 안에는 Text로 내용이 채워져 있다.(Strong Guy)

 

Body영역은 위쪽 일부를 제외한 나머지 영역 전부를 차지하고 있다.(주황색 영역)

Body의 Center 안에 Image로 근육질의 남자 사진이 불러와져 자리를 차지하고 있다.

이 때 사진은 가장 마지막에 로컬 이미지를 불러오는 방법으로 코딩했다.

 

이런식으로 Scaffold가 하나면 한 페이지, 열 개면 열 페이지가 만들어지는 것이다.