서론
플러터 앱을 만들기 위해서는 우선 플러터 앱이 어떠한 구조로 되었는지 이해하는 것이 중요합니다. 그래야 구조적으로 정돈된 앱을 만들 수 있고, 앱을 사용하는 사용자에게도 불편하지 않은 앱을 만들 수 있기 때문입니다. 플러터 앱이 어떠한 구조로 되어 있는지 설명하겠습니다.
플러터의 기본, 위젯
플러터는 기본적으로 위젯 구조입니다. 플러터 앱안에 존재하는 모든 것은 위젯입니다. 마치 레고를 조립하듯이 위젯들을 조립하는 방식으로 모든 앱의 구성 요소들을 만듭니다. 아래에서 설명하는 모든 구성요소들 또한 위젯입니다.
Scaffold
Scaffold widget은 앱을 만들기 위한 빈 화면이며, 가장 기본적인 요소입니다. 이 Scaffold 내부에 다른 위젯들을 추가하는 방식으로 플러터 앱을 만들어 나갑니다. 아래에서 설명하는 위젯들은 모두 이 Scaffold widget의 내부에 존재합니다.
AppBar
AppBar는 Scaffold 내부에서 상단에 위치하며, 앱을 만들 때에 필요한 가장 기본적인 구성요소입니다. AppBar에는 앱의 타이틀, 뒤로 가기 버튼 같은 것들이 들어갈 수 있습니다.
Container
AppBar의 아래에는 앱의 Main body라고 할 수 있는 Container 가 들어갑니다. Container 안에는 앱을 구성하는 대부분의 컨텐츠들이 들어가게 됩니다. 아래에서 설명하는 widget들은 Container 내부에 들어가는 widget들입니다.
Column
Column 은 Container 내부에서 컨텐츠들를 수직으로 배치할 수 있도록 하는 widget입니다. 이 위젯은 직접적으로 사용자의 눈에 보이지는 않지만, 다른 위젯의 위치를 정해줍니다.
Row
Row widget은 컨텐츠들을 가로로 배치할 수 있도록 해줍니다. Column 안에 들어갈 수 있는 위젯입니다.
Text
Column widget 이나 Row widget 안에 들어 갈 수 있고, 글자를 입력할 수 있는 위젯입니다.
Icon widget
플러터에[서 기본적으로 제공하는 아이콘을 넣을 수 있는 위젯입니다.
Image widget
Image 파일을 첨부할 수 있는 위젯입니다.
Network Image
URL 주소로 부터 이미지를 불러오는 위젯입니다.
플러터 앱의 예시
플러터 앱은 아래와 같이 여러 위젯을 조립하는 방식으로 만들어진다.
class MyFirstFlutterWidget extends StatelessWidget {
MyFirstWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: const Text('My AppBar Example'),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.navigate_next),
tooltip: 'Next page',
onPressed: () {
openPage(context);
},
),
],
),
body: const Center(
child: Text(
'This is my first app',
style: TextStyle(fontSize: 24),
),
),
);
}
}