Flutter에서 Hello World 앱 만들기

여러분, 지난 달부터 저는 Google의 Flutter를 탐색해 왔는데 좀 흥미롭습니다. 내 말은 네이티브가 좋지만 엄청난 지원으로 더 짧은 시간에 더 복잡한 UI를 원하는 경우 Flutter가 좋은 선택인 것 같지만 Facebook의 React Native도 있지만 아직 많이 탐색하지는 않았습니다.

오늘은 Dart 언어를 사용하여 Flutter에서 간단한 Hello World 앱을 만드는 방법을 살펴보겠습니다.

DART 체크아웃의 경우 공식 - https://dart.dev/guides
Flutter 설정용 - https://flutter.dev/docs/get-started/install

메인 다트

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Center(
            child: Text("Hello World"),
          ),
        ),
      ),
    );
  }
}

Flutter에서는 모든 것이 위젯(Flutter 팀 또는 다른 개발자가 미리 만든 구성 요소)의 형태입니다.

우리는 머티리얼 패키지에 미리 만들어진 수많은 위젯을 얻습니다. 그래서 flutter 팀에서 이러한 위젯을 사용하기 위해 material.dart 파일을 포함시켰습니다.

앱의 시작점이 되는 기본 기능을 정의해야 합니다.

정의된 모든 값이 앱의 수명 주기 동안 일정하게 유지되는 상태 비저장 위젯입니다. 상태 비저장 위젯은 데이터가 동일하게 유지되고 사용자 상호작용에서 변경되지 않는 화면을 만드는 데 사용됩니다.

Stateless 위젯을 확장하는 클래스(여기서는 MyApp)의 이름을 제공해야 합니다. 즉, Stateless 위젯의 하위이며 Stateless 위젯에서 속성과 메서드를 상속합니다.

그런 다음 빌드 함수를 정의하고 현재 클래스를 참조하는 컨텍스트를 내부에 전달하고 Widget을 반환하도록 정의한 대로 이 빌드 함수에서 위젯을 반환합니다.

첫 번째 위젯은 Google에서 제공하는 재료 레이아웃을 앱에 제공하는 MaterialApp 위젯입니다.

다음으로 MaterialApp의 홈 속성에 정의된 안전 영역 및 Scaffold 위젯이 있으며 Scaffold 위젯은 흰색 배경의 앱에 빈 화면을 제공합니다. 안전 영역은 장치 화면에 정의된 안전 영역 내에 앱의 콘텐츠를 가져옵니다.

Scaffold의 본문에서 우리는 Center 위젯을 사용했고 자식을 화면 중앙에 배치하고 Center 위젯 내부에 Text 위젯을 정의합니다. 따라서 여기에 정의된 텍스트를 중앙에 배치하라는 것입니다.

이 위젯에 대한 자세한 내용은 여기에서 확인하세요.
MaterialApp - https://api.flutter.dev/flutter/material/MaterialApp-class.html
안전한 지역 - https://api.flutter.dev/flutter/widgets/SafeArea-class.html
발판 - https://api.flutter.dev/flutter/material/Scaffold-class.html
센터 - https://api.flutter.dev/flutter/widgets/Center-class.html
텍스트 - https://api.flutter.dev/flutter/dart-html/Text-class.html

여기에서 이 특정 위젯에서 사용할 수 있는 모든 속성과 메서드를 확인할 수 있습니다.

이제 다음을 사용하여 앱을 실행하십시오.

flutter run

앱은 다음과 같이 표시됩니다.

Flutter에서 첫 번째 애플리케이션을 시작하기 위한 기본 아이디어를 얻으셨기를 바랍니다.