Hello World with Scaffold()

Posted on by admin

일단 Hello World를 Scaffold()를 추가로 넣어서 구현을 한다면 다음과 같습니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World!',
          ),
        ),
      ),
    ),
  );
}

home의 값으로 Center()대신에 Scaffold()가 들어가고 Scaffold()의 body의 값에 Center()를 넣어줍니다.

실행을 해보면 다음과 같이 못생겼던 글씨가 조금 예뻐졌네요. 그래도 이건 안넣어도 잘 돌아가는데 굳이 넣어야할 필요가 있을까 싶으실거에요. Scaffold()는 단지 글씨체만 예쁘게 하는건 아니구요. 앱개발에 기본적으로 필요한 컴포넌트들을 미리 구조적으로 정의해놓고 해당 키에 값만 넣으면 바로 앱이 완성되는 일종의 프레임워크 같은 기능을 합니다.

이해를 돕기 위해서 실제로 Scaffold()구조를 이용해서 간단하게 코드를 만들어 보았습니다. 아래 코드를 보시면 Scaffold()의 첫번째 속성으로 appBar가 있습니다. 모든 앱들은 상단에 타이틀이 들어가는데 그걸 손쉽게 구현할수 있도록 만들어둔 항목이구요. body는 내용이 들어가는 부분, 그리고 floatingActionButton은 둥둥 떠다니는 버튼을 구현할수 있는 항목입니다. 그리고 bottomNavigationBar가 있는데요. 이건 하단에 메뉴나 정보를 보여주고 싶을때 사용할수 있습니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('appBar'),
        ),
        body: const Center(
          child: Text('body'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
          child: const Text('float'),
        ),
        bottomNavigationBar: const Text('bottomNavigationBar'),
      ),
    ),
  );
}

이 밖에도 Scaffold() 매뉴얼을 보시면 더 많은 속성들이 있는데 나머지 속성들은 차차 다루도록 하겠습니다.

Scaffold()를 이용하면 앱을 만들기 시작할때 맨땅에 헤딩하는 것보다 개발 속도가 빠르고 모든 디바이스에서 유연하며 예쁘게 앱을 구현할수 있게 도와줍니다.

이번 시간에는 여기까지 하고 다음시간에 body에 이미지를 넣는 방법에 대해서 공부해보도록 하겠습니다. 감사합니다.

References