플러터:화면 하나 만들기

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
   2. 플러터:안드로이드 스튜디오
2. 플러터:실행
3. 플러터:개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
   6. 플러터:그래프 그리기(fl chart)
   7. 플러터:데이터 저장(간단한 데이터)
   8. 플러터:인증(Firebase 인증)(미완)
   9. 플러터:인증(OAuth2)(미완)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리(미완)
6. 플러터:DB연결
   1. 플러터:Firebase(미완)
   2. 플러터:MySQL(미완)
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
8. 플러터:배포
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:라이브러리
    1. 플러터:logger

개요

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

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

• 기본적으로 위젯을 상속하여 위젯을 만들고,
• build 함수를 오버라이드 하여 작성함.

화면 하나 만들기(구글식 디자인)

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 등