Flutter - Scaffold & AppBar 위젯

본글은 아래와 같이 Flutter SDK와 Android Studio / toolchain이 먼저 설치되야 한다.

그리고 Android Studio에 Flutter 와 Dart plugin을 설치하고,

AVD 를 추가하고, Flutter 프로젝트를 생성해서 아래와 같이 "Flutter Demo : Home Page"까지는 실행되었다는 전제고 글을 쓰고자 한다.

기본 예제 소스를 모두 삭제하고 아래와 같이 androi MaterialApp의 home property에 text 위젯을 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Text('hey guy!!')
));

 

Flutter에는 모든 위젯의 이름은 첫자와 각 단어를 대문자로 표기한다.

그리고 home같이 각 property는 "," 로 구분한다.

 

이제 Scaffold와 AppBar 위젯을 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
    ),
  ),
));

다음은 AppBar 위젯의 centerTitle 속성을 이용해 Text는 중앙정렬 시켜보자.

또한 Scaffold의 두번째 속성으로 body에 Text위젯으로 글을 추가해보자.

 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
      centerTitle: true,
    ),
    body: Text('Hellow Coding gongboobang')
  ),
));

 

Flutter 샘플프로젝트와 같이 Scaffold 의 body에 들어는 Text는 중앙에 위치시키도록 수정해보자.

이를 위해 Center 위젯을 아래와 같이 사용하면 된다.

 

그리고 샘플프로젝트에서 본 FloatingActionButton 위젯도 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
      centerTitle: true,
    ),
    body: Center(
      child : Text("Hello 코딩 방"),
    ),
    floatingActionButton: FloatingActionButton(
      child : Text('click'),
    ),
  ),
));

Scaffold 위젯은 아주많이 사용됨으로 아래 링크에서 좀더 자세한 사항을 확인 하는것을 추천한다.

https://api.flutter.dev/flutter/material/Scaffold-class.html

Scaffold class - material library - Dart API