[Flutter] 01. 프로젝트 생성 및 위젯

김형준·2024년 2월 3일

SizedBox Widget container flutter icon image project text

Flutter

목록 보기

2/3

1. 프로젝트 생성

Flutter 개발을 위한 과정을 거쳤으니 이제 프로젝트를 생성하고 앱을 만들어봅니다.

1-1. New Flutter Project

Android Studio를 열면, 이전 포스트에서 적었듯이, 처음 하시는 분은 제 화면과 다르게 나올텐데 그냥 New Project 옆에 있는 New Flutter Project를 클릭하시면 됩니다.

Next 눌러주시고,

Project name을 설정한 후, 멀티플렛폼 앱을 만들기 위한 포스트이기 때문에 Platforms의 Linux, MacOS, web, windows 체크를 해제한 후 Android와 IOS만 체크한 상태로 Create를 누릅니다.
(Project name에 대문자가 포함되면 안됩니다.)

생성 시 어질어질한 코드 하나가 나오게 되는데, 이 코드가 작성된 파일이 main.dart로, 코딩하게 될 파일입니다.

1-2. main.dart

main.dart 파일은 생성한 프로젝트 폴더의 lib 폴더 안에 있습니다.
좌측 폴더들 사이에서 lib 폴더를 찾고 그 안의 main.dart를 클릭하시면 됩니다.

만약 main.dart 폴더 혹은 lib 폴더가 안 보인다면 2가지 방법이 있습니다.

1) 프로젝트로 변경하기

좌측에 열린 부분이 Android로 열려있어서 그렇습니다.
위에 Android를 클릭하고 Project로 변경하여 주시면 됩니다.

2) 상위 폴더 열기

프로그램의 좌측 상단에 있는 File을 클릭 후 Open을 누릅니다.
이후 프로젝트 폴더의 상위 폴더를 열어보시면 뜨게 됩니다.

1-3. Run

main.dart 파일을 열었으면, 기초적으로 작성되어있는 코드를 실행해봅시다.

프로그램 우측 상단에 휴대폰 모양과 Flutter 아이콘이 그려진 main.dart 등등이 있습니다.

휴대폰 모양: 코드를 실행시킬 Flutter Device를 선택합니다.
Flutter 아이콘: 무슨 코드를 실행할지 선택합니다.
초록색 삼각형: 코드를 실행시킵니다.

디폴트 값으로 딱히 설정되어있지 않은 휴대폰 모양을 클릭 후 Chrome (web)을 선택합니다. 이 설정으로 하게 될 경우 코딩한 내용이 Chrome 웹에서 확인할 수 있게 됩니다.

아무 코드도 건들지 않은 체 초록색 삼각형 모양을 눌러 코드를 실행시켜봅시다.

실행시키면 이런 화면이 뜨게 되는데, Flutter에서 기본적으로 제공한 코드입니다.
웹에서 보여주지만, 엄연한 어플리케이션입니다.

여기까지 실행된다면, 프로젝트 생성과 실행까지 잘 되는 것입니다.

보통 코드 수정 후 저장만 하면 이 웹페이지에서 핫 리로드가 동작합니다.
(핫 리로드: 앱을 한 번만 실행해도 소스코드가 변경될 때 자동 반영되는 기능)
만약 핫 리로드가 동작하지 않는다면 코드를 수정하였을 때 수동으로 실행을 계속 시켜주셔야 합니다.

2. 준비

2-1. 시작을 위한 준비

먼저 analysis_options.yaml 파일을 엽니다.

이후 rules: 부분의 아래에

prefer_typing_uninitialized_variables : false
prefer_const_constructors_in_immutables : false
prefer_const_constructors : false
avoid_print : false

이 코드를 작성합니다.

그리고 다시 main.dart 파일로 돌아와서

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

위의 코드 4줄을 제외한 모든 내용을 지웁니다.

2-2. 위젯 추가를 위한 준비

위젯 추가에 앞서 먼저 제일 아래에

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home:
      )
    );
  }
}

이 코드를 붙여넣습니다.
(stless를 작성 후 Tap키를 눌러 완성하여도 상관없습니다.)

home: 아래에 Widget을 추가해야 합니다.
가장 기초적인 위젯 4개를 먼저 추가해보겠습니다.

3-1. 글자(Text) 위젯

글자를 추가하기 위해서는 Text를 사용해야 합니다.
home: 아래에 Text('내용')을 입력 후 저장합니다.

그럼 글자가 떠있는 것을 확인할 수 있습니다.
글자의 디자인은.. 아직은 다루지 않으니 넘어가도록 합니다.

3-2. 아이콘(Icon) 위젯

Flutter에서는 기본적으로 제공하는 아이콘들이 있습니다.
https://api.flutter.dev/flutter/material/Icons-class.html
이 아이콘을 사용해봅시다.

기본 코드는 Icon(아이콘이름)입니다.
위 링크에 있는 기본 제공 아이콘을 이용하려면,
Icon(Icons.~~)로 적으면 됩니다.

저는 Icon(Icons.wifi)를 예시로 들었습니다. 코드 작성 후 저장을 하면 디바이스에 아이콘이 떠있습니다.

3-3. 이미지(Image) 위젯

이미지 위젯의 경우 살짝의 설정이 필요합니다.
먼저 좌측의 프로젝트 폴더를 우클릭해줍니다.

그리고 New - Directory를 눌러 폴더를 생성합니다.
폴더의 이름은 assets로 해야합니다.
이 폴더 안에 코드에서 불러올 이미지를 넣을겁니다.

경로만 넣으면 이미지를 불러올 수 있다면 좋겠지만, assets라는 폴더를 사용하겠다 라는 선언을 해주어야합니다.

pubspec.yaml 파일에 들어가서 flutter:아래에

assets:
  - assets/

를 작성해줍니다.

이후 다시 main.dart 파일로 넘어와,
Image.asset('경로')를 home: 아래에 작성하면 이미지가 나오게 됩니다.

3-4. 박스(Container) 위젯

마지막으로 박스 위젯입니다.
박스는 Container( 속성 )을 통해 생성할 수 있습니다.
예시로 Container( width: 50, height: 50, color: Colors.teal )으로 작성해보겠습니다.

작은 네모가 나올 것 같았지만 화면 전체를 덮는 네모가 생겼습니다.
크기를 지정했는데 크게 나온 이유는 컨테이너의 시작 부분을 지정해주지 않았기 때문입니다.

크기를 지정하기 위해서는 부모와 자식의 관계를 코딩하듯이하면 됩니다.
부모 속성을 가진 위젯인 Center()를 사용하겠습니다.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

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