시작하기-첫 Flutter 앱 작성-part1-1단계

시작하기-첫 Flutter 앱 작성-part1

시작하기-첫 Flutter 앱 작성-part1

 

1단계: 스타터 Flutter 앱 만들기

첫 번째 Flutter 앱 시작하기의 지침을 사용하여 간단한 템플릿 Flutter 앱을 만듭니다. 프로젝트 이름을 startup_namer(flutter_app 대신)로 지정합니다.

팁: IDE에서 옵션으로 "New Flutter Project"가 표시되지 않으면 Flutter 및 Dart용 플러그인이 설치되어 있는지 확인하세요.

 

대부분 Dart 코드가 있는 lib/main.dart를 편집합니다.

 

1. lib/main.dart의 내용을 교체합니다.
   lib/main.dart에서 모든 코드를 삭제합니다. 화면 중앙에 "Hello World"를 표시하는 다음 코드로 바꿉니다.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

팁: 코드를 앱에 붙여넣을 때 들여쓰기가 비뚤어질 수 있습니다. 다음 서식 도구를 사용하여 이 문제를 해결할 수 있습니다.

• VS Code: 마우스 오른쪽 버튼을 클릭하고 Format Document을 선택합니다.
• Android Studio 및 IntelliJ IDEA: 코드를 마우스 오른쪽 버튼으로 클릭하고 Reformat Code with dartfmt를 선택합니다.
• 터미널: flutter format <filename>을 실행합니다.

2. IDE에서 설명하는 방식으로 앱을 실행합니다. 선택한 장치에 따라 Android, iOS, Windows, Linux, macOS 또는 웹 출력이 표시되어야 합니다.

설치한 장치에 따른 스타터 앱 모양

팁: 물리적 장치에서 처음 실행하는 경우 로드하는 데 시간이 걸릴 수 있습니다. 나중에 빠른 업데이트를 위해 핫 리로드를 사용할 수 있습니다. Save은 앱이 실행 중인 경우 핫 리로드도 수행합니다. flutter run을 사용하여 콘솔에서 직접 앱을 실행할 때 r 을 입력하여 핫 리로드를 수행합니다.

관찰

• 이 예제는 Material 앱을 생성합니다. 머티리얼은 모바일과 웹에서 표준이 되는 시각적 디자인 언어입니다. Flutter는 다양한 Material 위젯 세트를 제공합니다. pubspec.yaml 파일의 flutter 섹션에 uses-material-design: true 항목을 포함하는 것이 좋습니다. 이를 통해 미리 정의된 아이콘 세트와 같은 머티리얼의 더 많은 기능을 사용할 수 있습니다.
• 앱은 앱 자체를 위젯으로 만드는 StatelessWidget을 확장합니다. Flutter에서는 정렬, 패딩, 레이아웃을 비롯한 거의 모든 것이 위젯입니다.
• Material 라이브러리의 Scaffold 위젯은 기본 앱 바와 홈 화면의 위젯 트리를 보유하는 body 속성을 제공합니다. 위젯 하위 트리는 상당히 복잡할 수 있습니다.
• 위젯의 주요 작업은 다른 하위 수준 위젯과 관련하여 위젯을 표시하는 방법을 설명하는 build() 메서드를 제공하는 것입니다.
• 이 예제의 본문은 Text 하위 위젯을 포함하는 Center 위젯으로 구성됩니다. Center 위젯은 위젯 하위 트리를 화면 중앙에 정렬합니다.

참고: 앱은 스크린 리더용 시맨틱 트리를 생성합니다. 트리의 각 노드는 하나 이상의 위젯에 해당합니다. 이러한 노드는 화면 판독기에서 노드와 함께 작동하는 방법을 알려주도록 사용자 정의할 수 있습니다.

 

시작하기-첫 Flutter 앱 작성-part1-2단계

시작하기-첫 Flutter 앱 작성-part1-2단계

---

Copy icons created by Anditii Creative - Flaticon