Flutter - Material, Cupertino, Scaffold

 

안녕하세요 :) Zedd입니다.

Flutter스터디를 시작했어요! 

Material, Cupertino, Scaffold가 궁금해서..정리해봤습니다!

 

- Flutter에서는 화면을 그리는 모든 디자인 요소를 위젯(Widget)이라고 함

-  import 'package:flutter/material.dart';를 import하여 Material 위젯을 사용할 수 있음. 

이렇게 가장 상단에 import가 자동으로 되어있음.

 

일단 저는 Material 디자인에 대해서 깊게 알지 못합니다.

먼저 Material 디자인에 대해서 공부해볼게요! 

 

Material

---

 

Material디자인이란 플랫 디자인의 장점을 살리면서도

빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다.

2014년 구글이 안드로이드 스마트폰에 적용하면서 널리 퍼지기 시작했다.

 

그러니까 한마디로 안드로이드에서 사용하는 material 디자인 가이드..? 라고 생각하시면 될 것 같아요. 

iOS에서는 Human Interface Guidelines이 있듯이요! 

 

앞서 봤듯이  Flutter에는 

import 'package:flutter/material.dart';

Widget build(BuildContext context) {
    return MaterialApp(...)
}

이런식으로 Material 디자인의 앱을 만들고 있어요. (MaterialApp)

아무튼 이렇게 나옵니다!!

 

Cupertino

---

하지만 이 Material은 iOS에서 익숙한 UI는 아닙니다!

하지만 Flutter로 Android/iOS전부 만들 수 있는데...

UI가 iOS스러운(?) 앱을 만들고 싶을 수 있잖아요?

Flutter가 이를 지원해줍니다.

 

애플이 직접적으로 우리는 Cupertino 디자인 스타일이다!!! 라고 한거는 못찾았어요.

하지만 Flutter 사이트에서는 

iOS Style을 Cupertino라고 부르고 있어요.

(애플파크가 쿠퍼티노에 있어서 그런걸까요?🤔)

 

아무튼! Flutter에서 이런 iOS스러운 UI를 만들 수 있습니다.

import 'package:flutter/cupertino.dart';

 

이렇게 cupertino 패키지를 import하면 사용 할 수 있답니다.

그럼

왼 : Meterial 디자인 / 오 : Cupertino 디자인

오른쪽 처럼 바뀐답니다! (전체 코드는 조금 이따 나옵니다!)

 

Scaffold

---

예제 코드 하단쯤에

@override
Widget build(BuildContext context) {
    
    return Scaffold(...)
}

 이렇게 Scaffold라고 되어있는건 뭘까요?

Scaffold는 클래스인데요.

MaterialApp에서 사용되며, AppBar, BottomNavigationBar, Drawer, FloatingActionButton등과 같은 많은 기본기능을 제공한다고 해요.

한마디로 Scaffold 클래스는 Material 디자인 앱을 만들 때 뼈대가 되는 Widget이라고 합니다.

 

근데 궁금한점은....MaterialApp에서 사용된다고 했는데..

저는 CupertinoApp에서도 그냥 Scaffold가 사용이 잘 되던데 ㅠㅠㅠ 

참고로

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
          middle: Text('Cupertino Style UI', style: TextStyle(color: Colors.black))
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

 

이렇게 했어요. (CupertinoApp입니다.) 

흠...제 추측으로는..CupertinoApp이라고 꼭 Cupertino~ 친구들만 써야하는건 아닌 것 같아요.

ㅎ 잘 모르겠어요...ㅎㅎㅎ...

 

아무튼 Flutter를 본격적으로 시작하기전에

Material, Cupertino, Scaffold에 대해서 공부해봤습니다!!