Do it 플러터 앱 프로그래밍 책 공부하기

책의 내용을 정리하면서 공부하기 위해, 글을 작성한다.

---

스캐폴드를 이용한 머티리얼 디자인 적용

머티리얼디자인은 무엇인가

material design은 구글에서 2014년부터 사용한 플랫 디자인 지침이다.

material design이 나오기 전까지는 앱마다 디자인이 달랐다. 앱 개발사별로 추구하는 디자인 철학과 설계 방식에 따라 아이콘이나 버튼을 만들었다. 개성은 있지만 통일되지 않은 UX를 줄 수 밖에 없었다.
위의 문제점을 해결 하기 위해서 material design이 나왔고, 덕분에 직관적이고 일관된 UI를 경험할 수 있게 되었다.

플러터 앱을 제작할 때, 머티리얼 디자인을 적용하려면 스캐폴드 클래스를 이용한다. 스캐폴드 클래스는 각종 위젯을 머터리얼 디자인 레이아웃으로 설계하는 것을 돕는 역할을 한다.

코드를 확인해보자.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MaterialFlutterApp(),
    );
  }
}

class MaterialFlutterApp extends StatefulWidget {
  @override
  State<MaterialFlutterApp> createState(){
    return _MaterialFlutterApp();
  }
}

class _MaterialFlutterApp extends State<MaterialFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

위와 같은 코드를 작성한 후, 에뮬레이터를 돌려 보면 아래와 같은 화면이 나온다. 그 이유는 스캐폴드 함수에 아무 내용이 없기 때문이다.

제목 줄 추가하기 (Appbar)만들기

스캐폴드 함수에 위젯을 하나씩 채워보도록 하자.

@override
Widget build(BuildContext context){
	return Scaffold(
    appBar: AppBar(title: Text('Material Design App'),),
    );
}

위의 코드를 Scaffold함수에 추가하면 아래와 같은 결과가 나온다.

오른쪽아래 떠있는듯한 버튼 만들기

floating ActionButton을 선언한 후, FloatingActionButton() 함수를 생성한다.

추가될 코드는 아래와 같다.

floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
		onPressed: (){
       }),

위젯을 여러개 만들기

현재 까지 child를 이용해 하나의 위젯만을 만들었다. 이번에는 여러 개의 위젯을 만드는 방법을 알아보자.

순서는 다음과 같다.

1. 스캐폴드 안에 body를 선언하고 그 안에 Container의 child로 Column을 지정한다.

다시 Column 안에 children을 이용해 위젯 목록을 배열의 형태로 나열할 기본 골격을 만든다.

스캐폴드 함수에 추가할 코드

body: Container(
	child: Column(
    	children: <Widget>[	
        ],
    ),
),

2. children에 위젯을 여러개 넣어보자.

body: Container(
	child: Column(
    	children: <Widget>[
        Icon(Icons.android),
        Text('android')
        ],
    ),
),

3. 세로로 정렬해보자

위젯을 가운데에 정렬하려면 Container와 Column 사이에 Center 위젯을 넣는다.
하지만 Center위젯은 가로로만 정렬이 된다. 세로로도 정렬해 위젯을 본문 한가운데에 표시하려면 Column에 mainAxisAlignment를 선언하고 MainAxisAlignment.center를 입력한다.

class _MaterialFlutterApp extends State<MaterialFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
          onPressed: (){
          }),
      body: Container(
        child: Center(
        child: Column(
          children: <Widget>[
            Icon(Icons.android),
            Text('android')
          ],
          mainAxisAlignment: MainAxisAlignment.center,
        ),
        ),
      ),
    );
  }
}