23 01 25 Wen

학회 6일차

설날 연휴 끝!
파이팅

오늘의 목표
📍 버튼의 종류를 알고 직접 적용해보며 코드를 실행한다.
📍 나만의 boiler plate를 만들며 배운 내용을 정리한다.

11시 clean code (책, 노션)
깔끔하고 깨끗하게 코드 짜는 법!

---

5일차 boilplate01

에서 텍스트를 적용시키는 방법
const Text ( '~~ ' ) , 로 저장 되어있던 것을,
const를 제거해줌

폰트 적용시키는 방법으로는
구글 폰트를 사용할 것인데, 원하는 폰트를 다운받아서 적용하는 방식이 아닌,
구글 폰트 상에서 Import 해줄 것임.

yaml 파일에 들어가서,

google_fonts: ^3.0.1 을 지정해주고,

main 파일에서,
Text 위젯 안에
Style: GoogleFonts.폰트이름을 해주면 된다. 그리고 그 안에는 사이즈, 색상들을 고려해주면 된다.

---

[Flutter] Material Components widgets - Layout
1.Divider
2.ListTile
3.Stepper


1) Divider - 수평, 가로의 구분선

---

example )

이런 구분선, 가로선을 의미함.
colums 기둥 사이에
children
(
Divider
height(간격 틈 사이 길이) , thickness(두께) , color(구분선 색상), indent(구분선 앞에 공간 간격), endIndent( 구분선 뒤에 공간 간격) 등을 설정해주면 된다.
)

2)ListTile -
dense 속성 - 보다 작게 만듬 / 이 속성이 true 면,

-> dense 가 참 이면 이 타일의 전체 높이와 제목 및 부제 위젯 을 감싸는 DefaultTextStyle 의 크기 가 줄어듭니다.

https://api.flutter.dev/flutter/material/ListTile-class.html
(1/25 기준으로 잘 이해하지 못함)


3)Stepper - 진행률 표시 이번 단계 > 다음 단계로 넘어갈 수 있냐 없냐 약간 구글 설문지 폼 필수라고 이해하면 됌
일련의 단계를 통해 진행률을 표시하는 머티리얼 스테퍼 위젯입니다. 스테퍼는 한 단계에서 다른 단계를 완료해야 하거나 전체 양식을 제출하기 위해 여러 단계를 완료해야 하는 양식의 경우에 특히 유용합니다.

@override
  Widget build(BuildContext context) {
    return Stepper(
      currentStep: _index,
      onStepCancel: () {
        if (_index > 0) {
          setState(() {
            _index -= 1;
          });
        }
      },

Stepper!

---

[Flutter] Buttons
1.TextButton
2.DropdownButton
3.ElevatedButton
4.FloatingActionButton
5.IconButton
6.OutlinedButton
7.PopupMenuButton

1)TextButton - 텍스트 버튼 (1/25 11:20 기준으로 잘 이해하지 못함)
링크 걸어둠. 다시 복습할 것
https://api.flutter.dev/flutter/material/TextButton-class.html

padding 을 준다는 것 -> 빈 공간(공백) 과 같은 여유를 둔다는 것임.
-> 패딩을 줄때, copyright~ 2022 soda 했던 것 처럼, 텍스트 안에 해주는 것!
그래서 (이부분 26일 목) 블로그 참고하자.


2)DropdownButton - 드롭다운 버튼 (밑으로 내려서 버튼 선택하는 것)
항목 목록에서 리스트 중 선택을 해야하는 것.
선택 목록 사항을 DropdownMenuItem 안에 넣어줌

- > 드롭다운 버튼을 통해 사용자는 여러 항목 중에서 선택할 수 있습니다. 이 버튼은 현재 선택된 항목과 다른 항목을 선택하기 위한 메뉴를 여는 화살표를 보여줍니다.

onChanged 콜백이 null이거나 항목 목록이 null 이면 드롭다운 버튼이 비활성화됩니다.
즉, 화살표가 회색으로 표시되고 입력에 응답하지 않습니다. 비활성화된 버튼은 null이 아닌 경우 disabledHint 위젯을 표시합니다.
그러나 disabledHint 가 null이고 hint 가 null이 아닌 경우 힌트 위젯이 대신 표시됩니다.


3)ElevatedButton -
이해를 잘 못함
https://api.flutter.dev/flutter/material/ElevatedButton-class.html

상승된 버튼을 사용하여 길고 바쁜 콘텐츠 목록이나 넓은 공간과 같이 대부분 평평한 레이아웃에 차원을 추가하십시오.
대화 상자나 카드와 같이 이미 승격된 콘텐츠에는 승격 버튼을 사용하지 마십시오.

상승된 버튼은 버튼을 누를 때 Material.elevation이 증가 하는 Material 위젯 에 표시 되는 레이블 하위 입니다. 레이블의 Text 및 Icon 위젯은 style 의 ButtonStyle.foregroundColor 에 표시되고 버튼의 채워진 배경은 ButtonStyle.backgroundColor 입니다.
onPressed 및 onLongPress 콜백이 null 이면 버튼이 비활성화됩니다.

4)FloatingActionButton - 줄여서 FAB 라고 씀. 플로팅 작업 버튼

제작된 스캐폴드에 끼워넣는거임.
+ ) 메뉴라고 생각하면 좋을듯.
하단 탭이 있는 경우에도 FAB 를 끼워넣기? -> 가능
bottomNavigationBar: ... 하고 ~
FABLocation ~ 중앙에 배열하고 싶어?
그럼 FABLocation.center 을 밑에다가 코드 작성하면 돼.
화면당 최대 하나의 버튼임.

onPressed 콜백이 null 이면 버튼이 비활성화되고 터치에 반응하지 않습니다.
버튼이 비활성화되었다는 표시가 사용자에게 없기 때문에 부동 작업 버튼을 비활성화하지 않는 것이 좋습니다. 플로팅 작업 버튼을 비활성화하는 경우 backgroundColor 변경을 고려하십시오 .


5) IconButton - 아이콘 버튼
아이콘 버튼은 색상(잉크)으로 채워 터치에 반응 하는 Material 위젯에 인쇄된 그림입니다.

요런 느낌
볼륨 소리 아이콘을 색상(블랙)으로 채웠고, 누를때마다 Volume 의 숫자가 커지는 위젯을 말한다.

6) OutlinedButton - 아웃라인(윤곽선) 버튼

요런 느낌

외곽선 버튼의 기본 스타일은 defaultStyleOf 에 의해 정의됩니다 . 이 개요 버튼의 스타일은 해당 스타일 매개변수로 재정의할 수 있습니다. 하위 트리의 모든 텍스트 버튼 스타일은 OutlinedButtonTheme 로 재정의할 수 있으며 앱의 모든 윤곽선 버튼 스타일은 Theme 의 ThemeData.outlinedButtonTheme 속성으로 재정의할 수 있습니다.

TextButton 또는 ElevatedButton 과 달리 개요 버튼에는 개요 모양을 정의 하는 기본 ButtonStyle.side 가 있습니다. 기본값 side은 null이 아니므로 셰이프의 OutlinedBorder.side 를 무조건 재정의합니다 . 즉, 아웃라인 버튼의 모양 과 아웃라인의 모양을 지정하려면 ButtonStyle.shape 및 ButtonStyle.side 속성을 모두 지정해야 합니다.

7) PopupMenuButton - 팝업 메뉴 버튼
누르면 메뉴가 표시되고 항목이 선택되어 메뉴가 닫히면 onSelected 를 호출합니다. onSelected 에 전달된 값은 선택한 메뉴 항목의 값입니다.

자식 또는 아이콘 중 하나를 제공할 수 있지만 둘 다 제공할 수는 없습니다. icon 이 제공되면 PopupMenuButton 은 IconButton 처럼 동작합니다 .

팝업을 누르기 전 상태

 

... 을 누른 후 뜨는 리스트

---

[Flutter] AlertDialog
1.AlertDialog

1)AlertDialog

Q. CupertinoAlerDialog 가 안 뜨면 수강 신청할 때 팝업 안 뜨는 거 아니야?
굳이 확인을 해야겠냐고!!

action "no" or "yes" 응답 매개체를 안 받으면 되잖아 > 팝업 띄우지마 뭐하러 action 을 해???

" 저장되었습니다. "

가 아니면? 그냥 X 로 수강신청 실패했다고 표현하면 되는 거 아니야?
체크표시 누름 > 수강신청 실패해 > 그냥 그 해당 과목이미지가 x 로 바껴.
체크표시 누름 > 수강신청 성공해 > 그냥 그 해당 과목이미지가 O 로 바껴.


[Flutter] SimpleDialog
1. SimpleDialog

1) SimpleDialog
-