Flutter - 3일차

서론

기본 문법 특히 Flutter를 사용하지 않는 문법은 모두 dartpad에서 진행한다.

기본 문법

Timer

지정한 시간 후에 어떤 코드를 실행시키고 싶을때 사용한다. DartAsync 내장 패키지에 선언되어 있어 import'dart:async'후 Time()생성자를 통해 사용하면 된다. Duration 설정으로 얼마나 지난 후에 실행할 것인지 설정할 수 있다.

• Timer.periodic(): 설정한 Durtaion을 주기로 반복해서 Timer에 설정된 구문을 실행한다.

import 'dart:async';

void main() {
  Timer.periodic(
  Duration(seconds: 2),
    (Timer timer) {
      print('2초마다 실행된다.');
    }
  );
}

• Time.cancel(): Timer를 종료하는 함수다. 아래처럼 사용할 수 있고 Timer.periodic을 하며 현재 몇번째 tick인지 받아오고싶다면 tick프로퍼티를 받아보면 된다.

import 'dart:async';

void main() {
  Timer.periodic(Duration(seconds: 2), (Timer timer) {
    int tick = timer.tick;
    print('2초마다 실행된다. 현재 Tick: $tick');

    if (tick == 3) {
      timer.cancel();
    }
  });
}

DateTime

DateTime은 날짜, Duration은 기간을 뜻한다. DateTime은 년도를 필수로 입력해야 하며 년,월,일,시,분,초,밀리초,마이크로초까지 반환하는데 나머지 값들은 option즉, 선택하면된다. 다만 주의할점은 2011년 x초 이런식으로 그 앞의 속성들을 무시할 수는 없다. 따라서 마이크로초를 알고 싶다면 앞의 모든 속성을 충족시켜주어야 한다. 월/일만 1이 기본값이고 나머지는 0이 기본값이다.

• UTC기준으로 시간을 얻고싶다면 DateTime.utc()를 사용하면된다. utc를 사용안하면 현재 국가기준 시간대로 입력되어 나온다. 더 자세한 내용은 Coordinated Universal Time(협정 세계시)을 검색하면 알 수 있다. UTC시간대는 끝에 z가 붙는다.
• .now()를 사용하면 현재시간대를 반환한다. 즉, 현재 날짜 및 시간이 출력된다. 따라서 인자값(매개변수)이 필요없다.
• .add(duration): 설정한 기간만큼 늘릴 수 있다.
• .subtract(duration): 설정한 기간만큼 줄일 수 있다.
• .isAfter(date): argument로 입력한 비교대상 DateTime이 이후의 날짜면 true 반환
• .isBefore(date): argument로 입력한 비교대상 DateTime이 이전의 날짜면 true 반환
• .isAtSameMomentAs(date): argument로 입력한 비교대상 DateTime이 같은 날짜면 true로 반환(마이크로초까지 동일해야 함)
• .toUtc(): UTC시간대로 시간대를 변경 가능하다.
• .toLocal(): UTC시간대를 현지 날짜로 변경한다.

Duration

Duration도 다양한 매개변수를 받는데 days, hours, minutes, seconds, milliseconds, microseconds 값을 반환타입으로 받을 수 있다. DateTime과는 다르게 name parameter로 되어 있어서 지정한 형식으로 반환받을 수 있다.

DateTime과 연계해서 사용하는것도 가능한데 DateTime으로 만든 instance에 .add(duration), .subtract(duration)를 통해 Duration설정이 가능하다. 그래서 Durtaion으로 설정한 만큼 기간을 늘리거나 줄일 수 있다.

따라서 코드를 모아보면 이렇게 볼 수 있다.

void main() {
  final date = DateTime.utc(
    2010,
    6,
    12,
    1,
    1,
    10,
    20,
    3,
  );

  final now = DateTime.now();

  print('local 시간대입니다. +9H: ${date.toLocal()}');
  print('utc 시간대입니다.: ${date.toUtc()}');
  print('now 이후인가요?: ${date.isAfter(now)}');
  print('now 이전인가요?: ${date.isBefore(now)}');
  print('두 날짜는 동일한가요?: ${date.isAtSameMomentAs(now)}');

  final duration = Duration(
    days: 1,
    hours: 2,
    minutes: 20,
    seconds: 10,
    milliseconds: 1,
    microseconds: 1,
  );

  print(duration);

  print('늘려질 시간은: ${date.add(duration)} 입니다.');
  print('줄여질 시간은: ${date.subtract(duration)} 입니다.');
}

font 설정

font는 이미지 설정할 때 처럼 pubsepc.yaml에 설정해주면 되는데 font는 fonts:로 따로 만들어서 설정해줘야 한다.

    - family: Sunflower
      fonts:
        - asset: 폴더 위치 지정
          weight: 해당 font 굵기 설정

사용할때는 text의 style에 TextStyle을 넣고 fontFamily에 pubspec.yaml로 적용한 font를 사용하면된다.

Text(
   'Title',
   style: TextStyle(
   color: Colors.white,
   fontFamily: '설정한 font',
   fontSize: 설정하고싶은 fontsize,
   fontWeight: FontWeight.w900
  ),
),

color

Colors.red, Colors.blue 등 다양한 색상을 지원하는데 ctrl+우클릭 으로 코드가 정의된 libarary로 이동해보면(windows 기준이다.) MaterialColor로 색상의 밝기를 간편하게 지정해서 사용할 수 있도록 해놓았다. 그래서 Colors.blue[100]같은 형태로 원하는 밝기를 가진 색상을 지정할 수 있다.

 static const MaterialColor blue = MaterialColor(
    _bluePrimaryValue,
    <int, Color>{
       50: Color(0xFFE3F2FD),
      100: Color(0xFFBBDEFB),
      200: Color(0xFF90CAF9),
      300: Color(0xFF64B5F6),
      400: Color(0xFF42A5F5),
      500: Color(_bluePrimaryValue),
      600: Color(0xFF1E88E5),
      700: Color(0xFF1976D2),
      800: Color(0xFF1565C0),
      900: Color(0xFF0D47A1),
    },
  );
  static const int _bluePrimaryValue = 0xFF2196F3;

safeArea

safeArea widget은 device에 적용되어 있는 기본 영역을 앱의 위젯이 침범하는 걸 막아준다. 즉, 디바이스에서 제공하는 뒤로가기, 홈버튼 등의 영역을 앱의 화면이 덮을 수 있게 하고싶다면 설정하면 된다. 또한 침범영역을 정할 수 있어서 설정하고 bottom 영역을 침범하고 싶다면 bottom영역만 true로 설정해주면 된다. default는 true다.

SafeArea(
        top: ,
        bottom: ,
        left: ,
        right: ,

디바이스 화면 크기 지정

MediaQuery를 이용하면 context로 화면 크기를 읽어올 수 있다.

MediaQuery.of(context).size.읽어올 높이 또는 너비

dialog

showDialog - android dialog 위젯
showCupertinoDialog - apple에서 제공하는 dialog 위젯

 showCupertinoDialog(
    context: context,
    barrierDismissible: true, // dialog 이외의 부분 터치시 dialog 종료
    builder: (BuildContext context) {}

🍟 Cupertino는 apple 본사가 있는 곳이다.

위젯

PageView

Android ViewPager다. 다른점은 어댑터를 사용하지 않아도 된다는 것.. children을 사용해서 그 안에 보여줄 위젯들을 넣고 사용하면 사용자는 슬라이드만 하면 된다.

🍕 PageController
PageView에서의 각 위젯의 인덱스를 통해 위치를 조절할 수 있는데 이때 사용하는 것이 PageController다. PageController를 PageView의 controller에 적용하고 해당 controller의 page를 가져와서 특정 코드 스니펫에 따라 page를 변경하거나 애니메이션을 줄 수 있다.

 int currentPage = controller.page!.toInt();
      ++currentPage;
      if (currentPage > 4) {
        currentPage = 0;
      }
      controller.animateToPage(currentPage,
          duration: const Duration(milliseconds: 500), curve: Curves.linear);
    });

controller의 animateToPage에는 page, duration, curve 속성이 있는데 page는 설정하고자 하는 페이지를 설정, duration에는 애니메이션될 시간을 설정, curve는 애니메이션 스타일을 지정할 수 있고 Curves로 애니메이션을 지정할 수 있다. 각 Curve효과에 대해서는 Flutter 공식 사이트를 참고하면 된다.

Align

정렬해주는 위젯이다. alignment속성을 가지고 있고 Alignment.으로 여러가지 정렬 속성을 설정해줄 수 있다.

return Align(
   alignment: Alignment.center,
   child: Container(
   color: Colors.white,
   height: 300,
   ),
);

CupertinoDatePicker

apple 에서 지원하는 DatePicker다. onDateTimeChanged 인자를 반드시 받아야 하며 콜백으로 DateTime을 리턴받을 수 있다.

• mode: 표시하고싶은 시간을 설정할 수 있다.
• dateOrder: 나타나는 시간의 순서를 설정할 수 있다.
• initilDateTime: 시작될 시간대를 정할 수 있다.
• maximumDate: 마지막으로 표시될 시간대를 정할 수 있다.
  기타 등등.. 이외에도 많은 기능을 지원하며 즉, 개발자가 맘대로 커스텀하기 좋은 위젯이라는 것.

CupertinoDatePicker(
   mode: CupertinoDatePickerMode.dateAndTime,
   initialDateTime: selectedDate,
   maximumDate: DateTime.now(),
   dateOrder: DatePickerDateOrder.ymd,
   onDateTimeChanged: (DateTime date) {
     setState(() {
       selectedDate = date;
     });
     print(date);
   },
),

DatePickerDialog

firstDate와 lastDate 속성을 required로 가지고 있어서 DateTime 타입으로 세팅해주어야 한다.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return DatePickerDialog(
      firstDate: DateTime.now(),
      // 현재 날짜를 firstDate로 설정
      lastDate: DateTime.now().add(
         const Duration(days: 365),
      ),
      // 현재 날짜로부터 1년 후를 lastDate로 설정
      initialDate: DateTime.now(), // 초기 선택 날짜를 현재 날짜로 설정
    );
  },
);