[TAVE/Study] Do it! Flutter 6장 iOS 스타일로 플러터 앱 만들기

210929 화

어쩌다 보니... 시간이 늦어졌다.. 지금 새벽 2시 40분..ㅎ

 

쿠퍼티노 위젯

📌 플러터가 제공하는 위젯으로 기존의 iOS앱을 사용하던 사람들에게 익숙한 스타일로 디자인할 수 있다.

📌 쿠퍼티노 위젯의 이름에는 항상 'Cupertino' 접두어가 붙는다.

pubspec.yaml에 주석 달면 오류 난다. 이유는 나도 모르겠다...

 

 

쿠퍼티노 탭바

 

import 'package:flutter/cupertino.dart';

class CupertinoMain extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CupertinoMain();
  }
}

class _CupertinoMain extends State<CupertinoMain> {
  CupertinoTabBar? tabBar;

  @override
  void initState() {
    super.initState();
    tabBar = CupertinoTabBar(items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.home)),
      BottomNavigationBarItem(icon: Icon(CupertinoIcons.add)),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoTabScaffold(
          tabBar: tabBar!,
          tabBuilder: (context, value) {
            if (value == 0) {
              return Container(
                child: Center(
                  child: Text('cupertino tab 1'),
                ),
              );
            } else {
              return Container(
                child: Center(
                  child: Text('cupertino tab 2'),
                ),
              );
            }
          }),
    );
  }
}

👉🏻 initState() 함수에 TabBar를 정의한다. CupertinoIcons.add로 아이콘을 추가한다.

 

세그먼트 위젯 사용하기

 

 

📌 세그먼트 위젯: 머티리얼의 라디오 버튼처럼 여럿 중 하나를 선택할 수 있는 iOS 스타일의 위젯

👉🏻 TextEditingController로 텍스트필드를 사용한다.

👉🏻 CupertinoTextField는 iOS 스타일의 입력창이다. maxLines는 최대로 입력 가능한 줄 수이다.

👉🏻 CupertinoSwitch로 iOS 스타일의 스위치를 만든다. 

👉🏻 CupertinoButton으로 iOS 스타일의 버튼을 만든다. 

✍🏻 Map: 정수형 키와 위젯형 값을 쌍으로 한다. 

왜 이런 오류가 뜨는 걸까? CupertinoPageScaffold 가 정의되어있지 않다고 하는데 이건 그냥 안스에서 제공해주는 위젯 아닌가?? 모지???

 

 

쿠퍼티노 위젯

• CupertinoButton(버튼)
• CupertinoActivityIndicator(로딩표시기)
• CupertinoAlertDialog(알림 창)
• CupertinoActionSheet(액션시트)
• CupertinoPicker(피커)
• CupertinoNavigationBar(네비게이션바)
• CupertinoSlider(슬라이더)