(Flutter) Widget을 조합하여 앱 화면 구성

Flutter Chapter 1 Recap

 

Flutter 실습 예제를 위해 간단한 화면 구성을 해 보았다. Flutter로 앱의 화면을 구성하는 건 매우 특별한 방식을 사용한다. Named Parameter를 사용한 Class들로 Widget을 계속해서 생성하여 화면을 생성한다.

 

import 'package:flutter/material.dart';

class Player {
  String? name;
  // String? = name을 가질 수도 가지지 않을 수도 있음
  Player();
}

void main() {
  var nico = Player();
  runApp(const App());
  // runApp 함수는 argument로 widget 타입을 받고 있다.
  // Flutter에선 widget들을 조합하여 앱을 만드는 것이다.
  // widget은 마치 레고 블록과 같다.
}

class App extends StatelessWidget {
  const App({super.key});

  // 모든 widget은 build를 구현하고 있어야 함 (StatelessWidget도 마찬가지)
  @override
  // build는 Widget을 return해야 함. Flutter는 widget을 화면에 보여줄 것이기 때문이다.
  Widget build(BuildContext context) {
    return MaterialApp(
      // 앱의 home 화면에서 무엇을 보여줄지 선택
      // scaffold를 사용하여 앱의 구조를 지키도록 (Flutter 권장)
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Hello Flutter!"),
          centerTitle: true,
        ),
        body: const Center( // child에 있는 것들을 가운데 정렬함
          child: Text('hello world!'),
        ),
      ),
    );

    // 둘 중 하나를 return 해야 함
    // material : 구글의 디자인 시스템 (Flutter는 구글에서 만듦)
    // cupertino : 애플의 디자인 시스템

    // 클래스가 끝날 때마다 ,를 찍어 구분해 줌
  }
}

 

ㄴ> 해당 코드를 살펴보면 class를 Widget으로 선언하여 core Widget인 StatelessWidget을 상속받고 있다. (StatelessWidget은 기본적인 Widget을 화면에 뿌려주는 간단한 기능을 함)

 

- widget을 사용하기 위해서는 build 메소드를 구현해야 하며 반드시 widget을 return해야 함

- build 메소드는 BuildContext 타입의 context를 argument로 받음

- 앱이 시작될 때 가장 첫 번째로 뜨는 Widget은 해당 앱의 root이며 root는 반드시 Material 디자인과 iOS 디자인 중 하나를 결정해야 함

- build 메소드는 MaterialApp Widget을 return 하게끔 설정했음 (Material은 구글 디자인 시스템이며 Flutter는 구글이 만듦, 따라서 Material을 사용하는 게 좋다고 생각하는 듯)

- home 안에 또 다른 widget을 넣음 Scaffold는 화면의 구성 및 구조에 관한 것들을 조정할 수 있는 옵션이 많음. (appBar와 body를 사용함)

 

이렇게 Flutter를 통해서 앱 개발을 하는 기초 방법에 대해서 알아보았다. 코드의 가독성이 조금 이슈가 되고 있지만 그래도 나쁘지 않다고 생각한다...

 

---

 

중간에 짚고 넘어가는 Tiny Dart Recap

 

- class를 생성할 때마다 new를 사용해 줄 필요 없음.

 

const) Text Text(   
String data, {   
Key? key,   
TextStyle? style,   
StrutStyle? strutStyle,

- ?(none을 허락함)이 없는 것들은 required 된 argument이므로 반드시 전달할 값을 줘야 하는 필수사항임. 하지만, ?이 있는 것들은 선택사항