첫 번째 Flutter 앱 만들기

새 프로젝트

Flutter는 Google에서 만든 오픈 소스 모바일 애플리케이션 개발 프레임워크입니다. 이를 통해 개발자는 단일 코드베이스를 사용하여 Android 및 iOS용 고품질 교차 플랫폼 모바일 앱을 만들 수 있습니다.

이 블로그 게시물에서는 첫 번째 Flutter 앱을 만드는 과정을 살펴보겠습니다. 시작하기 위해 이해해야 하는 기본 개념을 다루고 자체 프로젝트의 시작점으로 사용할 수 있는 간단한 예제 앱을 제공합니다.

Flutter 시작하기첫 번째 앱을 만들기 전에 모든 것이 설정되었는지 확인하겠습니다. 컴퓨터에 Flutter를 다운로드하여 설치해야 합니다. Flutter 설명서에서 이 작업을 수행하는 방법에 대한 지침을 찾을 수 있습니다.

Flutter가 설치되면 터미널에서 다음 명령을 실행하여 새 프로젝트를 만들 수 있습니다.

flutter create my_first_app

이렇게 하면 현재 디렉터리에 myfirstapp라는 이름의 새 Flutter 프로젝트가 생성됩니다.

기본 Flutter 앱

이제 프로젝트가 설정되었으므로 코드를 살펴보겠습니다. Flutter 앱은 최신 객체 지향 프로그래밍 언어인 Dart로 작성됩니다. 프로젝트에서 lib/main.dart 파일을 열면 다음 코드가 표시되어야 합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to my first app!'),
        ),
        body: Center(
          child: Text('Hello, world!'),
        ),
      ),
    );
  }
}

Flutter 앱의 기본 구조입니다. 분석해 보겠습니다.

import 'package:flutter/material.dart';

이 줄은 필요한 Flutter 라이브러리를 가져옵니다.

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

이 함수는 우리 앱의 진입점입니다. MyApp 위젯의 인스턴스로 runApp 함수를 호출하기만 하면 됩니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to my first app!'),
        ),
        body: Center(
          child: Text('Hello, world!'),
        ),
      ),
    );
  }
}

이것이 우리 앱의 핵심입니다. StatelessWidget 클래스를 확장하는 MyApp이라는 새 위젯을 정의합니다. 이 위젯의 ​​build 메서드에서 우리는 앱의 최상위 위젯인 MaterialApp 위젯의 새 인스턴스를 반환합니다.

MaterialApp 위젯은 앱 제목 및 홈페이지와 같은 일부 기본 기능을 제공합니다. 이 경우 제목을 ‘My First App’으로 설정하고 홈 페이지를 새로운 Scaffold 위젯으로 설정했습니다.

Scaffold 위젯 앱의 기본 레이아웃을 제공합니다. 상단에 AppBar가 있고 중앙에 본문이 있습니다. 이 경우 AppBar 제목을 ‘Welcome to my first app!’으로 설정했습니다. 본문은 ‘Hello, world!’라는 텍스트를 표시하는 단일 하위 Text 위젯이 있는 Center 위젯입니다.

실행

앱 실행이제 앱을 만들었으니 실행할 차례입니다. 이렇게 하려면 프로젝트 디렉토리에서 터미널 창을 열고 다음 명령을 실행합니다.

flutter run

모든 것이 올바르게 설정되었으면, 시뮬레이터 또는 연결된 기기에서 앱이 실행됩니다.

댓글 남기기

Up ↑

%d 블로거가 이것을 좋아합니다: