플러터:화면 하나 만들기

개요[편집 | 원본 편집]

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

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

화면 하나 만들기(구글식 디자인)[편집 | 원본 편집]

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("쌓고, 정렬하고, 배치함"),
        ],
      ),
    );
  }
}

이해를 위한 추가 설명[편집 | 원본 편집]


요소	설명	비고
모든 것은 위젯.	기본적으로 클래스에서 기본이 되는 클래스를 상속, 함수(위젯)를 오버라이드해 사용한다. Widget build(BuildContext context) { 에서 Widget은 build 함수의 리턴 타입이 Widget이라는 의미. BuildContext context는 BuildContext 타입의 변수 context를 선언한다는 의미. 꼭 이름이 context가 아니어도 되는데, 관례상 이렇게 쓴다. 부모 위젯에 대한 것, 위젯의 위치에 대한 정보들이 여기에 담긴다.	// 화면 폭 정보 가져오기 double width = MediaQuery.of(context).size.width;
MaterialApp	구글에서 주로 사용하는 디자인 형식이다. 없어도 되지만.. 전체적인 디자인 테마, 페이지 라우트, 따위를 관리하기에 기본적으로 사용한다. AppBar, FloatingActionButton, Drawer, Card, IconButton 등 Material 스타일의 위젯 제공.
Scaffold	화면의 기본적인 뼈대. 다음과 같은 속성을 갖는다. AppBar (상단 바) body (화면의 메인 내용) FloatingActionButton (둥근 액션 버튼) Drawer (옆에서 나오는 메뉴) BottomNavigationBar (하단 네비게이션 바) SnackBar 표시하기 위한 구조 제공 bottomSheet, persistentFooterButtons 등

플러터:화면 하나 만들기

개요[편집 | 원본 편집]

화면 하나 만들기(구글식 디자인)[편집 | 원본 편집]

이해를 위한 추가 설명[편집 | 원본 편집]

둘러보기 메뉴

검색