Choe's In coding...

플러터는 크로스플랫폼을 지원한다.

따라서 플러터로 개발하다 보면

각 플랫폼에 맞게 처리를 해줘야하는 상황이 있다.

물론 한가지로 통일해 짜도 좋지만

디테일을 살리기 위해선 각자 처리해주는것이 좋다.

그렇다면 플러터에선 어떤식으로 플랫폼을 구분할 수 있을까?

방법은 간단하다.

dart:io 를 이용하면된다.

import 시켜준뒤

import 'dart:io' show Platform;

Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows

해당 데이터들은 bool 값을 가지고 있다.

따라서 동작 코드에 조건문을 걸어 사용하면된다.

if (GetPlatform.isIOS) {
  showCupertinoDialog(
    context: context,
    builder: (context) => CupertinoAlertDialog(
      title: const Text("Dialog Title"),
      content: const Text("This is my content"),
      actions: [
        CupertinoDialogAction(
          isDefaultAction: true,
          child: const Text("Yes"),
          onPressed: () => Get.back(),
        ),
        CupertinoDialogAction(
          child: const Text("No"),
          onPressed: () => Get.back(),
        )
      ],
    ),
  );
} else {
  showDialog(
      context: context,
      builder: (context) => AlertDialog(
            title: const Text("Dialog Title"),
            content:
                const Text("This is my content"),
            actions: [
              TextButton(
                child: const Text("Yes"),
                onPressed: () => Get.back(),
              ),
              TextButton(
                child: const Text("No"),
                onPressed: () => Get.back(),
              )
            ],
          ));
}

현재 만들고 있는 앱은 IOS와 Android 두가지만 타겟으로 하기떄문에 위와같이 간단하게만 짜줬다.

또 상태관리를 위해 Getx를 사용중인데 마침 또 이런것도 지원해 이용했다.

날이 쌀쌀하다~

실내는 뜨듯하다..

노곤노곤해지는 환절기이다.

얼른 구상중인 개인 프로젝트를 진행하고싶지만 노트북이 많이 버벅이기 때문에,,,

맥북으로 넘어사는대로 진행해야겠다.

이번시간에는 ListView.builder이다. 기존 ListView와 다른점은 좀더 많은 양의 데이터를 처리할때 효과적이다.

이번에 만든 앱이다. 크게 appbar와 body-ListView.bulider로 구성되어있다.

우선적으로 ListView에 사용될 이미지를 assets 시켜주자

https://github.com/icodingchef/listview_lecture - 유튜브 코딩셰프님의 자료이다.

이미지 assets가 완료되었으면

첫 화면에 뿌려질 페이지를 STF위젯으로 만들어준다.

appbar 구성이며 별거없다. body 부분과 일체감을 주기위해 배경색과 elevation을 다음과같이 지정했다.

 var titleList = [
    'Dentist',
    'Pharmacist',
    'School teacher',
    'IT manager',
    'Account',
    'Lawyer',
    'Hairdresser',
    'Physician',
    'Web developer',
    'Medical Secretary'
  ];

  var imageList = [
    'assets/1.png',
    'assets/2.png',
    'assets/3.png',
    'assets/4.png',
    'assets/5.png',
    'assets/6.png',
    'assets/7.png',
    'assets/8.png',
    'assets/9.png',
    'assets/10.png'
  ];

  var description = [
    '1.There are different types of careers you can pursue in your life. Which one will it be?',
    '2.There are different types of careers you can pursue in your life. Which one will it be?',
    '3.There are different types of careers you can pursue in your life. Which one will it be?',
    '4.There are different types of careers you can pursue in your life. Which one will it be?',
    '5.There are different types of careers you can pursue in your life. Which one will it be?',
    '6.There are different types of careers you can pursue in your life. Which one will it be?',
    '7.There are different types of careers you can pursue in your life. Which one will it be?',
    '8.There are different types of careers you can pursue in your life. Which one will it be?',
    '9.There are different types of careers you can pursue in your life. Which one will it be?',
    '10.There are different types of careers you can pursue in your life. Which one will it be?'
  ];

ListView에 사용될 데이터들이다. 이미지들의 경로만 다를 수 있고 나머진 복붙하여주면 된다.

클래스내에 작성해주자

body 부분이다.

여기서 return 시켜주는 GestureDetector는 각 타일을 눌렀을때 실행되는 onTap 함수를 위해 사용되었으며 Card를 통해 아이템을 뿌려준다.

Card 부분을 보면 크게 Row로 2개 그리고 2번째 Row에는 Colum으로 3개를 그리고있다.

코드와 같이 Text, SizedBox, Text 위젯 3개로 구성되며 3번째 Text위젯은 사이즈 조절을 위해 SizedBox로 감싸줬다. 이렇게 3가지 위젯을 Padding을 감싸줬다.

showDialog 구현해보자

GestureDetector - onTap 안에 탭하면  showPopup을 실행하고 인자값을 전달한다.

인자값을 이용하여 Dialog를 리턴시켜주며

강의를 듣고 따라할때마다 점점 손에 익숙해지는것 같다.

이정도 레벨은 그냥 강의 소리만 들으면서 클론코딩 할 수 있는 정도이다.