👀 pub get

이렇게 추가를 해주고 쩌기 우측 상단의 파란 pub get을 눌러주면 알아서 세팅을 다 해줍니다.

추가한 걸 사용하고 싶다면 사용할 dart 파일에

이렇게 패키지를 추가해줍니다.

👀 버튼

✔ multiple floating button

flutter_speed_dial은 이걸 위한 의존성 어쩌구이다.
pub get 예시에 나와있는 게 이걸 위한 것이니 따라서 해보도록.

_MyHomePageState 클래스에 Widget 안의 Scaffold에 속한 floatingActionButton을 요걸로 바꿔주면 된다.

원래 보통 플로팅버튼이 이렇게 생겼다면	Widget?라는 밑의 저게 멀티플 어쩌구 구현한 것

Widget? 구현 자세히 보기
(onTap은 각 버튼 눌렀을 때 작동할 거 따로 구현해서 넣기)

버튼 펼치기 전	버튼 펼친 후	shape: CircleBorder(),를 설정 버튼에만 추가

아래는 사진이랑 똑같은 복붙용

📌 코드

  Widget? multipleFloatingButton() {
    return SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      visible: true,
      curve: Curves.bounceIn,
      backgroundColor: Colors.deepPurple[100],
      children: [
        SpeedDialChild(
          child: const Icon(Icons.settings_sharp, color: Colors.deepPurple,),
          shape: CircleBorder(),
          backgroundColor: Colors.deepPurple[100],
          label: "설정",
          labelBackgroundColor: Colors.deepPurple[50],
          labelStyle: const TextStyle(
            fontWeight: FontWeight.w500,
            color: Colors.black54,
            fontSize: 13.0
          ),
          onTap: () {}
        ),
        SpeedDialChild(
          child: const Icon(Icons.add, color: Colors.deepPurple,),
          backgroundColor: Colors.deepPurple[100],
          label: "할 일 추가",
          labelBackgroundColor: Colors.deepPurple[50],
          labelStyle: const TextStyle(
            fontWeight: FontWeight.w500,
            color: Colors.black54,
            fontSize: 13.0
          ),
          onTap: () {},
        )
      ],
    );
  }

📌 코드 설명

• 왠지 모르겠지만 SpeedDialChild는 아래쪽에 나열될 수록 실제에선 위에 뜬다.
  펼쳐지는 시작 버튼과 가까운 순인가 보다.

• 처음에 묘하게 동그란 사각형으로 버튼이 만들어지길래 똥그라고 싶은데!!! 하고 엄청 검색했는데 뭔가 제대로 된 설명 사이트를 발견 못해서 그냥 내가 이것저것 넣어보다가 대충 SpeedDialChild 안에 shape: CircleBorder(),를 넣어주면 된다는 걸 습득했다.

• Icon() 안에서는 컬러 세부 설정? 이 안 된다. Colors.deepPurple[900] 이런 게 안 되고 딱 Colors.deepPurple 까지만 된다.

✔ 체크박스

아래와 같은 기교를 부리면 취소선과 이탤릭체도 가능

📌 코드

value: _checkBoxValue 이런 거 미리 선언 해놓고 쓰는 경우가 많음

Checkbox(
  activeColor: Colors.black45,
  checkColor: Colors.white,
  value: todo.isDone,
  onChanged: (value) {
    setState(() {
      todo.isDone = value!;
    });
  }
), 

✔ 스위치

비활성화	활성화

📌 코드

color 파라미터들 설정 안 하면 비활성화 시 무채색, 활성화 시 테마 컬러로 알아서 처리해준다.

Switch(
  activeColor: Colors.indigo, // 활성화 시 Thumb(콩알) 컬러
  activeTrackColor: Colors.blueAccent[100], // 활성화 시 스위치 바탕 컬러
  inactiveThumbColor: Colors.green, // 비활성화 시 콩알 컬러
  inactiveTrackColor: Colors.yellow, // 비활성화 시 스위치 바탕색
  // trackColor: MaterialStateProperty.all(Colors.yellow), // 활성화건 비활성화건 무조건 스위치 바탕색은 이것(바뀌게 하고 싶으면 쓰지마)
  // thumbColor: MaterialStateProperty.all(Colors.green), // 활성화했건 비활성화했건 무조건 Thumb 컬러는 이것(바뀌게 하고 싶으면 쓰지마)
  value: _checkBoxValue1!, // 스위치 값
  onChanged: (value) {
    setState(() {
      _checkBoxValue1 = value;
      _changetodo(value!);
    });
  },
),

👀 날짜, 시간

✔ 지금 시간 받아오기

import 'package:intl/intl.dart';

intl 패키지를 pub get

DateTime.now() // 지금 날짜, 시간 전부 받아오는 코드
DateFormat('yyyy/MM/dd HH:mm').format(DateTime.now()) // 형태 응용

✔ 표기

2023년 04월 16일 19시 52분 01초 기준 설명

날짜	시간

같은 알파벳이 여러번 반복된다 = 표시할 최소 자릿수 라고 보면 된다.
일의자리까지만 있는 수면 h 7, hh 07
그렇지만 십의자리도 있다면 알파벳 하나 쓴다고 생략하지는 않는다.

✔ DatePicker

showDatePicker라는 함수는 Future<DateTime?> 타입으로 반환한다.
아래는 날짜, 시간 연달아 결정할 수 있도록 짜본 코드

DateTime _selectedDate;
jdatePicker(DateTime.now());

/////

Future jdatePicker(jdate) async {
  _selectedDate = jdate;

  DateTime? picked = await showDatePicker(
    context: context,
    initialDate: jdate,
    firstDate: jdate,
    lastDate: DateTime(2999),
  );
  if (picked != null) { setState(() {
    _selectedDate = picked;
  });}

  TimeOfDay? tpicked = await showTimePicker(context: context, initialTime: TimeOfDay.now());
  if (tpicked != null && _selectedDate != null) {
    setState(() {
      _selectedDate = _selectedDate.add(Duration(hours: tpicked.hour, minutes: tpicked.minute));
    });
  }
}

✔ 비교

startDate.compareTo(endDate)
startDate < endDate 면 1 반환, 앞이면 -1 반환