flutter(3) - 플러터 앱페이지 기본 코드 이해하기

// 가장 먼저 해야할 일로 flutter 패키지를 불러와야 한다.
// i 입력 -> tab -> fm 입력하면 자동완성
import 'package:flutter/material.dart';

// 앱의 시작점
void main() => runApp(MyApp());
// runApp: 최상위 함수로 위젯을 arg로 가져야 한다. 
// 모든 위젯은 arg를 갖는다.

// stl 입력 후 tab하면 자동완성
// 앱을 만들기 위해 flutter/material 기능을 가지고 있는 위젯 MaterialApp이 리턴 실제적으로 모든 위젯을 감싸고 있다. 
class MyApp extends StatelessWidget {
  const MyApp ({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First app', // 앱을 총칭하는 기본 타이틀
      theme: ThemeData( // 앱의 기본적인 테마
        primarySwatch: Colors.blue // 앱에서 기본적으로 사용할 색의 견본, 특정 색의 음영을 기본으로 사용하겠다.
      ),
      home: MyHomePage(), // 가장 먼저 화면에 보여지는 경로
    );
  }
}

// 커스텀 위젯을 만들 때는 stl일지 stf일지 결정
class MyHomePage extends StatelessWidget {
  const MyHomePage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold( // 앱화면에 다양한 요소들을 그릴 수 있게 도와주는 빈 도화지
      appBar: AppBar( // 화면 가장 위에 바
        title: Text('First app'),
      ),
      body: Center( // 본격적인 앱 화면을 만드는 곳 // 중앙 정렬
        child: Column( // 요소를 세로로 배열
          children: [
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      ),
    );
  }
}