20230805 TIL

Today 요약

[✅] 프로그래머스 문제 1문제 

[✅]  flutter 강의 6개

---

배운 점

 

1) reduce 복습

• 배열의 요소들을 하나씩 순회하면서 주어진 콜백함수를 실행

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 출력값은 10입니다. (1 + 2 + 3 + 4)

2) onTap showAboutDialog()

• 앱에 대한 정보가 다이얼로그로 뜨는 것 (어플 이름, 버전, 아이콘 등)
• View Licenses 클릭시 새 화면으로 이동되는데 현재 사용중인 모든 오픈소스 소프트웨어 관련 라이선스가 포함되어 있음
• drawer가 있는 경우 이를 직접 호출하는 대신 AboutListTile 사용 고려

showAboutDialog function - material library - Dart API

void showAboutDialog(
{required BuildContext context,
String? applicationName,
String? applicationVersion,
Widget? applicationIcon,
String? applicationLegalese,
List<Widget>? children,
bool useRootNavigator = true,
RouteSettings? routeSettings,
Offset? anchorPoint}
)

3) AboutListTile()

• showAboutDialog와 함께 정보 표시 

AboutListTile class - material library - Dart API

 

4) CupertinoDatePicker

• ios 스타일의 날짜 선택기 위젯

CupertinoButton(
    onPressed: () => _showDialog(
      CupertinoDatePicker(
        initialDateTime: date,
        mode: CupertinoDatePickerMode.date,
        use24hFormat: true,
        // This shows day of week alongside day of month
        showDayOfWeek: true,
        // This is called when the user changes the date.
        onDateTimeChanged: (DateTime newDate) {
          setState(() => date = newDate);
        },
      ),
    ),

CupertinoDatePicker class - cupertino library - Dart API

5)showTimePicker / showDateRangePicker

5) ShowDatePicker

Future<DateTime?> showDatePicker(
{required BuildContext context,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,
DateTime? currentDate,
DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
SelectableDayPredicate? selectableDayPredicate,
String? helpText,
String? cancelText,
String? confirmText,
Locale? locale,
bool useRootNavigator = true,
RouteSettings? routeSettings,
TextDirection? textDirection,
TransitionBuilder? builder,
DatePickerMode initialDatePickerMode = DatePickerMode.day,
String? errorFormatText,
String? errorInvalidText,
String? fieldHintText,
String? fieldLabelText,
TextInputType? keyboardType,
Offset? anchorPoint,
ValueChanged<DatePickerEntryMode>? onDatePickerModeChange}
)

• 머터리얼 디자인 날짜 선택기
• helpText : 대화상자 상단레이블 표시
• cancelText : 취소버튼 레이블
• confirmText : 확인버튼 라벨 

showDatePicker function - material library - Dart API

6)ShowTimePicker

Future<TimeOfDay?> selectedTime = showTimePicker(
  initialTime: TimeOfDay.now(),
  context: context,
);

7) ShowDateRangePicker 

showDateRangePicker function - material library - Dart API

showDateRangePicker(
    context: context,
    firstDate:firstDate,
    lastDate: lastDate,
  );

• 날짜 시작일과 마지막날을 함께 저장할 수 있는 위젯 
• 만약 기존 앱 테마가 showDateRangePicker 상단의 버튼이 안보이게 될 시 테마를 아래와 같이수정해준다

showDateRangePicker(
	context:context,
    firstDate:firstDate,
    lastDate:lastDate,
    builder:(context,child){
    	return Theme(
        	data : ThemeData(
            	appBarTheme: AppBarTheme(
                	foregroundColor:Colors.white,
                    backgroundColor:Colors.blue,
                )
            )
        )
    }
)

8) CheckboxListTile()

CheckboxListTile(
	value: value,
    onChanged: onChanged,
),

• ListTile인데 마지막에 체크박스가 달려있다

 

9) Checkbox / CheckboxListTile 

 bool _state = false;

  void _onStateChanged(bool? newValue) {
    if (newValue == null) return;
    setState(() {
      _state = newValue;
    });
  }

CheckboxListTile(
    value: _state,
    onChanged: _onStateChanged,
    title: const Text("체크체크체크"),
    activeColor: Colors.black,
  ),

10) SwitchListTile / SwitchListTile.adaptive / Switch / Switch.adaptive / SupertinoSwitch

• 위의 체크박스와 동일시하게 사용가능 
• ios/android 느낌의 두개가 주어지고 adaptive를 사용하여 유저의 기기에 따라 표현방법을 다르게도 변경 가능하다

11) CupertinoAlerDialog / AlertDialog

• 알림창 , 유저가 내용을 읽고 버튼을 무조건 누르기를 원할시 사용 
• ios / android  
• actions  버튼을 넣을수  있다 

12) showCupertinoModalPopup

• showCupertinoDialog와 다르게 모달 밖을 클릭시 자동으로 모달이 닫힌다 dialog는 버튼 클릭시 pop해줘야함

13) CupertinoActionSheet

• 익숙한 ios 버전의 bottom sheet 태그로 쉽게 구현 가능
• action 버튼 동일 사용하면  된다

 ListTile(
    title: const Text("Log out"),
    textColor: Colors.red,
    onTap: () => showCupertinoModalPopup(
      context: context,
      builder: (context) => CupertinoActionSheet(
        title: const Text("로그아웃하시나요?"),
        actions: [
          CupertinoActionSheetAction(
            onPressed: () ={},
            child: const Text("아니오"),
          ),
          CupertinoActionSheetAction(
            isDestructiveAction: true,
            onPressed: () ={},
            child: const Text("넹"),
          ),
        ],
      ),
    ),
  ),