[Flutter] 프로젝트 만들기

프로젝트 생성

Flutter SDK와 안드로이드 스튜디오 설치가 완료된 후, 프로젝트를 생성하는 방법에 대해서 알아보도록 하겠습니다.🤔

안드로이드 스튜디오를 실행하면 다음과 같은 화면이 나옵니다.
(저는 이미 my_first_app 이라는 이름으로 프로젝트를 생성하여 Projects 목록에 보여지고 있습니다.)

먼저, Flutter 플러그인을 다운받아야 하므로 Plugins 탭에서 'Flutter'를 검색하여 install 해줍니다.

설치가 완료되면 다시 Projects 탭으로 돌아가서, 'New Flutter Project'를 클릭합니다.
그리고, Flutter SDK path는 자신이 압축 해제한 Flutter SDK가 있는 경로를 선택하고, 'Next' 버튼을 눌러줍니다.

이제 위에서부터 순서대로,

1. Project name : 프로젝트 이름 정하여 입력 (대문자는 사용 불가)
2. Project location : 해당 프로젝트를 어디에 저장할지 선택
3. Description : 프로젝트 요약 설명
4. Project type : 어떤 타입으로 만들것인지 선택
5. Organization : 소속 기관 url 입력
6. Android language : 안드로이드 개발 언어 선택
7. iOS language : iOS 개발 언어 선택
8. Platforms : 어느 플랫폼으로 개발을 진행할지 선택

를 입력한 후 'Finish' 버튼을 누르면 프로젝트 생성이 완료됩니다.👍
(결과적으로 프로젝트 이름을 정하기만 했을 뿐, Description과 Organization 내용을 지워주고 그대로 'Finish' 버튼을 눌렀습니다!🔥)

---

프로젝트 구성

프로젝트 생성이 완료되면, 수 많은 폴더와 파일들이 들어있는 것을 볼 수 있습니다.
먼저, 프로젝트 내용 중에서 주목해야 할 두 파일에 대해서 알아보겠습니다.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

해당 파일은 lib 폴더 내부에 있는 main.dart 내용 입니다. (중간에 주석 처리된 부분이 많을 뿐 내용은 별로 없습니다.😅)
Flutter의 main.dart는 리액트의 App.js, 뷰의 App.vue와 같은 역할이라고 설명할 수 있습니다.
다시 말해서, 컴포넌트 중 최상위의 역할을 하는 틀이라고 볼 수 있습니다.

간단하게, 프로젝트 내부 내용을 수정하지 않은 상태에서 프로젝트를 실행하여 확인해보도록 하겠습니다.

상단의 '📱no device selected' 라고 표시된 드롭다운 메뉴에서, 'Chrome (Web)'을 선택하고 초록색 실행버튼을 누르면, console 창이 뜨고 잠시 후에 크롬이 실행되면서 다음과 같은 화면을 확인할 수 있습니다.

pubspec.yaml

name: my_first_app
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.15.1 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

해당 파일은 pubspec.yaml 파일로 패키지를 관리하는 역할이라고 할 수 있습니다. (이 또한 주석 처리된 부분이 많을 뿐, 내용이 많지 않은 상태입니다.)
Flutter의 pubspec.yaml은 Node.js의 package.json과 같은 역할이라고 할 수 있습니다.
이 부분은 추후에 lint를 설정하거나, 외부 라이브러리를 사용하는 연습을 할 때 더욱 자세히 다뤄보도록 하겠습니다.

---

Next

이로써, Flutter 개발을 위한 기초 세팅이 끝이 났습니다. (간단하네요.👍)
다음에는 Flutter 어플리케이션의 Widget이라는 개념에 대해 학습하도록 하겠습니다.
간단하게, 상단의 App bar와 가운데 내용, 그리고 하단의 Nav bar를 삽입하는 연습을 할 예정입니다.
그리고 나서 스스로 만들어 볼 어플리케이션에 대한 주제를 기획하는 시간을 갖도록 하겠습니다!

끝🔥