플러터:화면 하나 만들기 편집하기

{{플러터}}

== 개요 ==
보통 책을 보면 이미 개념이 탄탄하게 잡힌 개발자가 쓴 것들이기에... 마테리얼앱을 사용하거나 이것저것 고급 스킬들을 별 설명 없이 쓰는데, 코딩 자체가 익숙하지 않은 비전공자들에겐 차근차근 나아가는 과정이 필요하다.

> 하여, 하면을 만드는 것부터 찬찬히 살펴보자.

== 화면 하나 만들기(안드로이드 디자인) ==
<syntaxhighlight lang="dart">
import 'package:flutter/material.dart';  // 마테리얼 디자인 관련 임포트.

void main() {
  runApp(const MyApp());
}

// 앱 전체를 나타내는 위젯 (StatelessWidget) 트리 전체를 관리한다.
class MyApp extends StatelessWidget {
  // 생성자. super.key는 위젯을 구분하는 용도로 사용되는 키값.
  const MyApp({super.key});  // 없어도 되는데, 없으면 안됨. 상태관리 할 때 키를 통해 화면을 갱신함.

  @override
  Widget build(BuildContext context) {  // 빌드로 화면을 어떻게 정의할지 보여준다.
    return MaterialApp(  // 안드로이드 형태의 UI 구성성
      title: 'Stateless Demo',
      home: const HomeScreen(),
    );
  }
}
// 하나의 화면 담당.
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Basic Layout")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Text("위젯은 이렇게"),
          SizedBox(height: 20),
          Text("쌓고, 정렬하고, 배치함"),
        ],
      ),
    );
  }
}
</syntaxhighlight>

=== 이해를 위한 추가 설명 ===
{| class="wikitable"
|+
!요소
!설명
!비고
|-
|모든 것은 위젯.
|기본적으로 클래스에서 기본이 되는 클래스를 상속, 함수(위젯)를 오버라이드해 사용한다.
Widget build(BuildContext context) { 에서 

* Widget은 build 함수의 리턴 타입이 Widget이라는 의미.
* BuildContext context는 BuildContext 타입의 변수 context를 선언한다는 의미. 꼭 이름이 context가 아니어도 되는데, 관례상 이렇게 쓴다. 부모 위젯에 대한 것, 위젯의 위치에 대한 정보들이 여기에 담긴다. 
|  // 화면 폭 정보 가져오기
  double width = MediaQuery.of(context).size.width;
|-
|MaterialApp
|구글에서 주로 사용하는 디자인 형식이다.
없어도 되지만.. 전체적인 디자인 테마, 페이지 라우트, 따위를 관리하기에 기본적으로 사용한다.
|
|-
|
|
|
|}