[Flutter] Widget / 위젯 - 쿠퍼티노 디자인 ( + future, await )

 

import 'package:flutter/material.dart'; // 머테리얼
// 머테리얼은 material.io/design/ 참고

import 'package:flutter/cupertino.dart'; // 쿠퍼티노
// 쿠퍼티노는 developer.apple.com/design/ 참고

 

기본적으로 머테리얼 디자인 기반으로 많이 사용하긴 하는데,

좀 더 아이폰스러운 디자인을 적용하려면 쿠퍼티노 디자인을 사용하면 된다.

 

flutter/cupertino.dart 패키지에는 다양한 쿠퍼티노 디자인용 UI 위젯이 준비되어 있다.

Cupertino로 시작하는 이름의 클래스들이 이에 해당되며, 사용 방법이 머테리얼 위젯과 비슷하므로 쉽게 적용할 수 있다.

 

// State 클래스

bool _isOn = false;

return Scaffold(
      appBar: CupertinoNavigationBar( // 머테리얼의 AppBar에 대응
        middle: Text('쿠퍼티노 디자인') // 머테리얼 AppBar의 title 프로퍼티에 대응.
      ),
      body: Column(
        children: <Widget> [
          CupertinoSwitch( // 머테리얼의 Switch에 대응
            value: _isOn,
            onChanged: (bool value) {
              setState(() {
                _isOn = value;
              });
            },
          ),
          CupertinoButton( // 머테리얼의 ElevatedButton에 대응
            borderRadius: BorderRadius.circular(16.0),
            color: Colors.orange,
            child: Text('쿠퍼티노 AlertDialog'),
            onPressed: () {
              _showCupertinoDialog();
            },
          ),
          CupertinoButton(
            child: Text('쿠퍼티노 Picker'),
            onPressed: () {
              _showCupertinoPicker();
            },
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _text = 'World';
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
    
    
    
    
_showCupertinoDialog() {

    showDialog(
      context: context,
      builder: (context) => CupertinoAlertDialog(
        title: Text('제목'),
        content: Text('내용'),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('Cancel'),
          ),
          CupertinoDialogAction(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(context).pop(); // 다이얼로그 닫기
            },
          ),
        ],
      ),
    );

  }

  _showCupertinoPicker() async {

    // 0부터 9까지의 숫잘 ㅣ스트 생성
    final _items = List.generate(10, (i) => i);
    var result = _items[0]; // 기본값 0

    await showCupertinoModalPopup(
      context: context,
      builder: (context) => Container(
        height: 200.0, // 피커의 높이는 200
        child: CupertinoPicker(
          children: _items.map((e) => Text('No. $e')).toList(), //0 부터 9까지 숫자 Text
          itemExtent: 50.0, // 항목 1개의 높이 50
          onSelectedItemChanged: (int value) { // 완료버튼이 없고, 선택한 뒤 바깥쪽을 클릭하면 호출됨.
            result = _items[value]; // 화면을 바꿀 용도가 아니기에 setState없음.
          },
        ),
      ),
    );
    print(result); // 콘솔에 출력만 할 것임.
  }

CupertinoNavigationBar 위젯은 머테리얼의 AppBar위젯에 대응한다.

leading(왼쪽), middle(가운데), trailing(오른쪽) 프로퍼티를 갖고 있다.

 

CupertinoSwitch 위젯은 머테리얼의 Siwtch와 사용 방법이 동일하다 (참고로 쿠퍼티노는 체크박스나 라디오 버튼 없다)

 

CupertinoButton 위젯은 머테리얼의 ElevatedButton 위젯에 대응한다.

 

CupertinoAlertDialog 위젯의 기본적인 사용 방법은 머테리얼의 AlertDialog와 같다.

 

CupertinoPicker는 iOS에서 자주 사용되는 피커이다. 이건 대응이라고 하기엔 애매하다.

showCupertinoModalPopup() 함수는 Future 타입을 반환하기 때문에 await 키워드를 사용하여 피커가 닫힐 때까지 대기한 후 result 변수의 값을 출력한다. await 키워드를 사용하려면 메서드 선언 시 async 키워드를 사용해야 한다.

future, await에 대한 내용은 여기를 참고하면 좋다.

 

---

글이 많았던 관계로, 예제 코드 실행 화면을 이곳에..

---

 

나도 아직 개념이 덜 잡히긴 했지만..

future<X> a = xxx() 하면 , 여기서 블럭되는게 맞는 것 같고..

a에 리턴값 결과가 들어가는건 아니며, 이는 a.then을 통해 값을 알아낼 수 있는거고,

이를 조금 더 간단하게? 표현식 작성할 수 있는 것이 await와 async인 것 같다.

 

---

 

서적 : 오준석의 플러터 생존코딩