Meterial 디자인 vs Cupertino 디자인

Material Design (안드로이드 기본 디자인) : 구글에서 제공하는 디자인 가이드를 따른다.

Material 디자인을 위해 아래의 라이브러리를 import해야한다.

import 'package:flutter/material.dart';

전형적인 안드로이드 앱의 모습

 

 

Cupertino Design (아이폰 기본 디자인) : 애플에서 제공하는 디자인 가이드를 따른다.

Cupertino 디자인을 위해 아래의 라이브러리를 import해야한다. 

import 'package:flutter/cupertino.dart';

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

class CupertinoPage extends StatefulWidget {
  @override
  _CupertinoPageState createState() => _CupertinoPageState();
}

class _CupertinoPageState extends State<CupertinoPage> {
  bool _switch = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CupertinoNavigationBar(
          middle: Text('쿠퍼티노 UI'),
        ),
        body: Column(
          children: <Widget>[
            CupertinoButton(
              child: Text('쿠퍼티노 버튼'),
            ),
            CupertinoSwitch(
                value: _switch,
                onChanged: (bool value) {
                  setState(() {
                    _switch = value;
                  });
                })
          ],
        ));
  }
}

 

두 라이브러리를 모두 import하여 안드로이드 디자인과 아이폰 디자인의 기능을 프로그래밍 할 수 있다.