16장 17장

 

 

 1) DIO 

 - http 요청을 하는 일반적인 메서드들을 제공 

 - 어플리케이션에서 요청을 하고 서버에서 응답을 받아서 서로 통신을 하는데 이 때 사용되는 라이브러리 

 

 2) Json

 - 키 - 값 형태로 이루어진 데이터 객체 포맷 

 - xml도 있지만 대부분 json 형태의 데이터 포멧을 사용하여 API를 설계 

 

 3) 키보드 높이 구하기 

   - 키보드가 올라오면 해당 키보드의 크기 만큼 어플의 레이아웃이 망가져 버림 

   - 키보드의 높이를 미리 세팅해두고 키보드가 나오면 해당 크기만큼 화면 늘려서 비율 유지시켜주기 

  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;

    return Form(
      // ➊ 텍스트 필드를 한 번에 관리할 수 있는 폼
      key: formKey, // ➋ Form을 조작할 키값
      child: SafeArea(
        child: Container(
          height: MediaQuery.of(context).size.height / 2 +
              bottomInset, // ➋ 화면 반 높이에 키보드 높이 추가하기
          color: Colors.white,

 

 

4) table calendar

  - 달력을 손쉽게 만들어주는 플러그인 

class MainCalendar extends StatelessWidget {
  final OnDaySelected onDaySelected; // ➊ 날짜 선택 시 실행할 함수
  final DateTime selectedDate; // ➋ 선택된 날짜

  MainCalendar({
    required this.onDaySelected,
    required this.selectedDate,
  });

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      locale: 'ko_kr',
      onDaySelected: onDaySelected,
      // ➌ 날짜 선택 시 실행할 함수
      selectedDayPredicate: (date) => // ➍ 선택된 날짜를 구분할 로직
      date.year == selectedDate.year &&
          date.month == selectedDate.month &&
          date.day == selectedDate.day,
      firstDay: DateTime(1800, 1, 1),  // ➊ 첫째 날
      lastDay: DateTime(3000, 1, 1),   // ➋ 마지막 날
      focusedDay: DateTime.now(),
      headerStyle: HeaderStyle(  // ➊ 달력 최상단 스타일
        titleCentered: true,  // 제목 중앙에 위치하기
        formatButtonVisible: false,  // 달력 크기 선택 옵션 없애기
        titleTextStyle: TextStyle(  // 제목 글꼴
          fontWeight: FontWeight.w700,
          fontSize: 16.0,
        ),
      ),
      calendarStyle: CalendarStyle(
        isTodayHighlighted: false,
        defaultDecoration: BoxDecoration(  // ➋ 기본 날짜 스타일
          borderRadius: BorderRadius.circular(6.0),
          color: LIGHT_GREY_COLOR,
        ),
        weekendDecoration: BoxDecoration(  // ➌ 주말 날짜 스타일
          borderRadius: BorderRadius.circular(6.0),
          color: LIGHT_GREY_COLOR,
        ),
        selectedDecoration: BoxDecoration(  // ➍ 선택된 날짜 스타일
          borderRadius: BorderRadius.circular(6.0),
          border: Border.all(
            color: PRIMARY_COLOR,
            width: 1.0,
          ),
        ),
        defaultTextStyle: TextStyle(  // ➎ 기본 글꼴
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        weekendTextStyle: TextStyle(  // ➏ 주말 글꼴
          fontWeight: FontWeight.w600,
          color: DARK_GREY_COLOR,
        ),
        selectedTextStyle: TextStyle(  // ➐ 선택된 날짜 글꼴
          fontWeight: FontWeight.w600,
          color: PRIMARY_COLOR,
        ),
      ), // ➌ 화면에 보여지는 날
    );
  }
}