지금까지 만들어본 앱은 Android Studio를 통해 만들어서 사용했다. 초보자의 입장에선 화면을 디자인할 때 드롭앤 드롭이 너무나 편하게 느껴졌다. 그래서 WPF를 사용하지 않고 Winform을 사용한 것이기도 하다.
그러나 Flutter에서 Android, iOS, Mac, Windows, Linux, Web 와 같이 다양한 OS에서 지원된다는 점이 너무나 매력적이었다.
그러나 코드만의 디자인 구성은 너무나 어려웠고,, 한 달째 제자리걸음 중이다.

기본 구성

만들고자 하는 화면

코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello World",
      theme: ThemeData(
          // 앱의 기본적인 기본 테마를 지정하는 것
          primarySwatch:
              Colors.blue // Swatch는 견본을 의미함, 즉 특정 색의 음영들을 기본 색상으로 지정해서 사용한다는 의미
          ),
      home: MyHomePage(), //앱이 정상적으로 실행되었을 때 가장 먼저 화면에 보여지는 경로
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 다양한 요소들을 배치하도록 도와주는 빈 도화지
      appBar: AppBar(
        title: Text("HI"),
      ),
      body: Center(
        // child 자식 위젯
        child: Column(
          // Column() 자신의 위젯내의 모든 요소들을 세로로 위치한다
          children: [
            Text("첫번째 줄"),
            Text("두번째 줄"),
            Text("세번째 줄"),
          ], // [] 안에 세로로 정렬할 위젯들 나열
        ),
      ),
    );
  }
}

코드 설명

main()

void main() => runApp(MyApp());
프로그램이 실행될 때 제일 먼저 실행되는 메서드이다.
=>는 코드를 간결하게 쓰기 위한 것으로 main()가 다른 함수를 호출한다는 의미로 사용되었다.

runApp()함수는 플러터 최상위 함수이다. 최상위 함수이기 때문에 한 번만 호출하면 된다.
반드시 위젯을 argument로 가져야 한다. (Widget 요소가 반드시 들어와야 한다.)

class MyApp extends StatelessWidget

MyApp은 커스텀 위젯이다.
MyApp은 MaterialApp()을 return 하고 있다. 플러터 프레임워크가 지원하는 디자인 테마를 사용할 수 있다.

StatelessWidget은 변하지 않는 화면을 구성할 때 사용한다. 때문에 조금이라도 화면이 변하거나 백그라운드에서 작업하는 것이 있다면 StatefulWidget을 사용하면 된다.

title은 해당 앱의 이름이라고 설명을 들었는데.(예를 들면 최근 탭에 표시되는 이름) iOS, Android에서는 해당 텍스트가 표시되지 않았다. (다만 Web에서는 해당 문구가 title로 표시되었다.)

theme을 통해 앱의 기본적인 테마를 지정한다.
primarySwatch의 색상을 통해 기본적인 색상을 정한다. 안드로이드 스튜디오를 통해 앱을 만들 때 기본 색상을 정하는 것과 같다고 보면 될 것 같다.

home 앱이 실행될 때 기본적으로 표시될 화면을 말한다. 본 코드에서는 MyHomePage()로 새로운 클래스를 만들었지만 저기에 바로 작성해도 문제는 없다.
가능한 함수는 짧게! 하기 위해 분리해놓았는데 확실히 보기 편하다.

class MyHomePage extends StatelessWidget

위에선 앱의 제일 기본적인 데이터들을 정했다면 이제 정말 화면을 구성해야 한다.

Scaffold를 통해 새로운 도화지를 만들어준다. 다양한 요소들을 배치할 수 있다.

      appBar: AppBar(
        title: Text("HI"),
      ),

AppBar()를 통해 AppBar 위젯을 가져오고 그 안에 필요한 것들을 지정해 준다. 상단에 타이틀 텍스트를 지정해 주기 위해 Text 위젯을 가져온 것을 볼 수 있다.

그 후 body영역을 위 전체 코드들과 같이 지정해 준다.
Column()은 자신의 위젯 내 모든 요소들을 세로로 위치시킨다. 세로로 위치시킬 것들을 children 안에 배열해 주었다.