[플러터] Hello, World! 출력하기

소요 시간: 3분 조회수: 132

프로그래밍 언어의 첫걸음은 대부분 "Hello, World!" 출력으로 시작됩니다. Flutter에서도 예외는 아닙니다. 이번 글에서는 Flutter로 "Hello, World!"를 화면에 출력하며 Flutter의 기본 개념과 위젯 사용법을 익혀보겠습니다.


Flutter의 핵심: 위젯

Flutter로 앱을 개발하려면 먼저 위젯(widget)에 대해 알아야 합니다. 위젯은 Flutter에서 UI를 구성하는 기본 단위입니다. 텍스트, 이미지, 버튼 등 모든 UI 요소는 위젯으로 표현됩니다. 복잡한 UI도 결국 여러 위젯의 조합으로 이루어져 있습니다.

텍스트 위젯 살펴보기

Flutter에서 텍스트를 화면에 출력하려면 Text 위젯을 사용합니다. 예를 들어, "Hello, World!"를 출력하려면 다음과 같이 코드를 작성할 수 있습니다.

Text("Hello, World!")

하지만 단순히 텍스트를 출력하는 것만으로는 충분하지 않습니다. 텍스트를 화면의 정 가운데에 배치하려면 Center 위젯을 사용해야 합니다. Center 위젯은 자식 위젯을 가운데로 정렬해 줍니다. 아래는 Center 위젯과 Text 위젯을 결합한 예제입니다.

Center(
  child: Text("Hello, World!"),
)

위 코드는 텍스트를 화면 정 가운데에 배치합니다.


Hello, World! 출력하기

이제 Flutter 앱을 직접 만들어 보겠습니다. 아래 단계에 따라 진행해 주세요.

1. 새 앱 생성 및 기본 코드 삭제

새 Flutter 프로젝트를 생성한 후, lib/main.dart 파일의 기본 코드를 모두 삭제합니다.

2. Flutter 머티리얼 패키지 불러오기

먼저 Flutter 머티리얼 패키지를 불러옵니다.

import 'package:flutter/material.dart';

3. 메인 함수 작성

Flutter 앱은 runApp 함수를 호출하는 메인 함수(main())로 시작됩니다. runApp 함수는 앱의 루트 위젯을 인수로 받습니다.

void main() {
  runApp(
    const Center(
      child: Text("Hello, World!"),
    ),
  );
}

4. 텍스트 정렬 및 출력

위 코드는 Center 위젯을 사용해 "Hello, World!" 텍스트를 화면 중앙에 출력합니다. Text 위젯은 입력된 문자열을 화면에 표시하는 역할을 합니다. 텍스트의 방향을 지정하기 위해 textDirection 속성을 추가할 수 있습니다.

void main() {
  runApp(
    const Center(
      child: Text(
        "Hello, World!",
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

5. MaterialApp 사용

Flutter는 머티리얼 디자인을 지원하는 위젯을 제공합니다. MaterialApp 위젯을 사용하면 앱의 구조를 더 직관적으로 만들 수 있습니다. 다음은 MaterialApp 위젯을 사용한 예제입니다.

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: "Flutter layout demo",
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter layout demo"),
        ),
        body: const Center(
          child: Text("Hello, World!"),
        ),
      ),
    );
  }
}

이 코드는 "Hello, World!" 텍스트를 화면 중앙에 배치하고, 상단에 앱바를 추가하여 앱의 느낌을 더욱 살려줍니다.


결론

이번 글에서는 Flutter에서 "Hello, World!"를 출력하면서 위젯의 기본 개념과 사용법을 배웠습니다. Flutter에서는 모든 UI 요소가 위젯으로 표현되며, 이를 조합하여 다양한 레이아웃을 구성할 수 있습니다. 다음 단계에서는 더 복잡한 UI 구성 요소를 다루며 Flutter의 강력한 기능을 탐구해보겠습니다.

인기글

플러터 리스트