깡샘의 플러터&다트 프로그래밍 13-2

CupertinoApp

Cupertino는 iOS를 만든 애플의 디자인이다.

---

쿠퍼티노 디자인 적용 예시

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const ch13_2());
}

class ch13_2 extends StatelessWidget {
  const ch13_2({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false, //오른쪽 상단 DEBUG표시 삭제
      theme: const CupertinoThemeData(  
        brightness: Brightness.dark, //전체 배경색 지정
      ),
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text('Cupertino Title'), //Material의 AppBar
        ),
        child: ListView(
          children: <Widget>[
            CupertinoButton(
              onPressed: () {},
              child: const Text('click'),
            ),
            const Center(
              child: Text('helloworld'),
            )
          ],
        ),
      ),
    );
  }
}

---

Platform API 활용하기

앱이 동작하는 플랫폼을 인식 가능(dart:io에서 제공하는 Platform 이용)

• isAndroid: 안드로이드 식별
• isFuchsia: 푸크시아 식별
• isIOS: iOS 식별
• isLinux: 리눅스 식별
• isMacOS: macOS 식별
• isWindows: 윈도우 식별

---

플랫폼별 디자인 적용해보기

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

void main() {
  runApp(const ch13_2());
}

class ch13_2 extends StatelessWidget {
  const ch13_2({super.key});

  Widget platformUI() {
    if (Platform.isIOS) {
      return CupertinoApp(
        debugShowCheckedModeBanner: false,
        theme: const CupertinoThemeData(
          brightness: Brightness.light,
        ),
        home: CupertinoPageScaffold(
          navigationBar: const CupertinoNavigationBar(
            middle: Text('Cupertino Title'),
          ),
          child: ListView(
            children: <Widget>[
              CupertinoButton(
                onPressed: () {},
                child: const Text('click'),
              ),
              const Center(
                child: Text('helloworld'),
              )
            ],
          ),
        ),
      );
    } else if (Platform.isAndroid) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Material Text'),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {},
                child: const Text('Click'),
              ),
              const Center(
                child: Text('hello world'),
              )
            ],
          ),
        ),
      );
    } else {
      return const Text('unknown debvie');
    }
  }

  @override
  Widget build(BuildContext context) {
    return platformUI();
  }
}