쥐수의 공부노트

Youtube 영상을 삽입하기 위해선 다음과 같은 진행 과정을 거쳐야 한다.1. 플러그인 설정  프로젝트 경로에 있는 pubspec.yaml 파일을 찾아 dependencies: 아래 줄에 youtube_player_flutter:를 추가한다. 2. Info.plist 수정  ios -> Runner -> Info.plist에  io.flutter.embedded_views_preview    를 넣어준다.  -> 하지만 이렇게 했을 때 , 오류가 발생했다. 그래서 xcode를 열고, xcode 내에서 접근성을 주었고, 해결했다.  3. 동영상 및 비디오 컨트롤러 추가  유튜브 주소를 복사하여 해당 유튜브의 ID를 가져와 저장 후 실행.static String youtubeId = 'sip2qsg1_WI..

Navigator은 화면을 이동하고 전환할 때 사용된다.Stack 구조를 통하여 구현되며, push와 pop을 이용해 다음 화면으로 이동하거나, 이전 화면으로 이동할 수 있다.1. pushNavigator.push 메소드를 이용하여 다음 화면으로 전환할 수 있다.Navigator.push(context,MaterialPageRoute(builder:(_) => 다음화면클래스이름()))으로 사용이 가능하다. onTap: () => Navigator.push(context, MaterialPageRoute( builder: (_) => SecondView(), )),2. popNavigator.pop 메소드를 이용하여 이전 화면으로 전환할 수 있다.Navigator.pop(c..

플러터에는 버튼을 만들 수 있게 해주는 위젯들이 있다. 대표적으로 ElevatedButton, TextButton, OutlinedButton 등이 있다.1. ElevatedButton위젯의 기본 구조를 보게 되면 아주 간단하게 style(버튼 디자인), onPressed(버튼을 눌렀을 때의 액션 구성), child(버튼 내부 위젯 생성) 등을 가진다.2. TextButtonTextButton은 마치 HTML의  태그처럼 Text를 버튼처럼 누를 수 있게 해주는 것 같다.3. OutlinedButton버튼에 Outline이 생긴 것을 확인할 수 있고, shape를 통해 둥근 모서리를 적용할 수 있다. Center( child: ElevatedButton( sty..

앞선 예제들에선 Colors 를 이용하여 단색을 적용하여 진행했다. 하지만 이는 다소 밋밋하게 보일 수 있다. 하지만 그라데이션을 이용하여 세련되고 멋진 디자인을 적용할 수 있다.1. LinearGradient선형 그라데이션이다. Linear는 선, 직선 모양의 의미로 begin과 end를 수반하여 시작 방향과 끝 방향이 정해져 있는 그라데이션이다.colors의 속성에는 배열 형태로 여러 색을 부여할 수 있다. 플러터에서 Colors.색상명 뒤에 []를 사용하여 100~900까지의 백 단위의 숫자를 사용하여 색의 강도를 표현할 수 있다.gradient: LinearGradient( colors: [ Colors.blue[100] as Color, ..

Flexible과 Expanded는 반응형으로 만들 때, 즉 가능한 공간을 채울 때 사용하게 되는 위젯들이다.우리는 앞서 코딩을 할때, width와 height를 각각 숫자를 대입하여 진행했던 경우가 많다.하지만 이는 핸드폰 기기의 크기에 전혀 신경쓰지 않는 방법이므로, 좋은 방법이 아니다.예를 들어 iphone 13 pro와 iphone 13 mini를 비교해보면, 핸드폰의 크기가 다르다. 하지만 우리가 숫자를 대입하여 크기를 넣을 경우, 13 pro에서는 모두 보이는 것이, 13 mini에서는 보이지 않을 수도 있다. 따라서 우리는 2가지의 방법을 사용하게 되는데, 한가지는 MediaQuery.of(context).size를 설정하는 방식과 Flexible,Expanded를 사용하는 방식이다.  1...

Image를 보여주는 방법은 대표적으로 2가지이다.1. Asset을 이용한 방법AssetImage의 사용방법은 다음과 같다.1) 이미지 파일을 준비하여, assets/data/images 파일 안에 넣어준다.2) pubspec.yaml 파일이 있는데 assets: 부분에 경로를 추가해준다. 3) 코드를 작성하여 진행한다.2. url을 이용한 방법1) 웹에 올려진 이미지 url을 복사하여 가져온다.2) 변수에 복사한 url를 저장하여 NetworkImage(url)을 하여 이미지를 불러온다.강의를 진행한 totally님의 블로그에 속성에 대한 정리가 있어 url을 남기니, url을 통해 들어가서 한번도 확인하자BoxFit.contain이미지 비율을 왜곡시키지 않으면서 Parent 위젯의 범위에 맞게 최대로..

AlertDialog 위젯은 팝업창을 띄울때 많이 사용되는 위젯이다.AlertDialog를 나타내기 위해서는 showDialog 호출이 필요하며 context, builder 등의 속성을 명시해줘야 한다.barrierDismissible 속성을 false로 설정하면 dialog 밖에 탭을 하더라도 그것을 무시하는 역할을 한다.따라서 오로지 Dialog 내부 터치만 인식해야 할 경우에만 사용해줘야 합니다.builder 속성을 명시하여 AlertDialog 위젯을 return 해주고 AlertDialog는 크게 title(제목), content(내용), actions(작동) 부분으로 나뉘며 action 부분에 "예","아니요"등의 버튼들이 배치된다.Navigator.of(context).pop()의 의미는 ..

Align 위젯은 이름 그대로 정렬을 도와주는 위젯이다.사용방법은 아래와 같다.Align( alignment: Alignment.topLeft, child: Container( width: 100, height: 100, color: Colors.amber, ), ), Align( alignment: Alignment.topCenter, child: Container( width: 100, height: 100, ..