플러터 앱 만들기 따라하기 - 이름 리스트 출력하기 Part 1

플러터 문서 번역 앱 제작 프로젝트입니다.

플러터 공식 온라인 문서에서 제공되는 예제들을 따라해봅니다.

왕초보를 위한 플러터 앱 제작 강좌입니다.

프로그래밍을 할줄 몰라도 따라만 하면 플러터로 앱을 만들 수 있습니다.

복잡한 이론따위는 언급하지 않습니다.

오로지 앱 결과물이 나올 수 있도록 따라해 봅시다.

여러가지 예제를 따라하다보면 응용력이 생기기 때문이죠.

저도 그렇게 배워가고 있습니다.

(사실 저도 플러터 왕초보이기 때문이죠.^^)

화면에 회사의 이름 리스트를 출력하는 간단한 앱을 만듭니다.

보통 윈도우가 편하실 것이므로 윈도우 + 안드로이드 스튜디오 조합으로 진행하겠습니다.

(캡쳐는 맥북에서 한것인데 어파치 안드로이드 스튜디오 캡쳐라 OS는 크게 관계는 없습니다.)

1. 플러터 프로젝트를 만듭니다. 플러터는 기본 프로젝트를 생성하면 카운터 앱이 기본으로 생성되는데요. 처음부터 시작하기 위해 ㅣlib\main.dart 내용을 모조리 지워줍니다.

2. 화면 중앙에 "HelloWorld"를 표시하기 위해 아래와 같은 코드를 작성하여 줍니다.

https://flutter.dev/docs/get-started/codelab#step-1-create-the-starter-flutter-app

// 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(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Welcome to Flutter',

      home: Scaffold(

        appBar: AppBar(

          title: Text('Welcome to Flutter'),

        ),

        body: Center(

          child: Text('Hello World'),

        ),

      ),

    );

  }}

3. 빌드하여 아래와 같이 화면이 나오면 성공입니다. (안드로이드 화면만 표시하였습니다.)

처음 빌드에는 시간이 많이 걸릴텐데 이후에는 "핫리로드"라고 하는 기능에 의해 빠르게 화면이 갱신됩니다. 요건 SwiftUI와 비슷하네요.

공식 문서에는 주저리주저리 설명이 많은데 저는 건너 뛰겠습니다. 제 포스팅은 실제 앱을 빌드하는데 목적이 맞춰서 있어서요. 딱 필요한 부분만 언급할께요.

4.