안녕하세요~ totally 개발자입니다. Youtube Video 오늘은 플러터에 유튜브 동영상을 삽입하는 방법에 대하여 알아보겠습니다. 이 유튜브 동영상 삽입을 위해서는 플러그인을 사용해야 하는데 진행 과정은 아래와 같습니다. 1. 플러그인 설정 2. Info.plist 수정 3. 동영상 및 비디오 컨트롤러 추가 먼저 플러그인 설정부터 확인해보도록 하겠습니다. 1. 플러그인 설정 우선 프로젝트 경로에 있는 pubspec.yaml 파일을 찾고 dependencies: 아래 줄에 youtube_player_flutter: 을 추가해줍니다. 2. Info.plist 수정 ios -> Runner -> Info.plist에 5,6번째 줄처럼 io.flutter.embedded_views_preview 넣어줍니..

안녕하세요~ totally 개발자입니다. Navigator 오늘 다룰 부분은 Navigator로 화면을 이동하고 전환할 때 사용됩니다. Navigator는 스택(Stack) 구조를 통하여 구현되며 제일 간단하게 다음 화면으로 이동, 이전 화면으로 이동 이 2가지를 먼저 이해하면 됩니다. 그 2가지는 push와 pop입니다. push를 사용하는 것이 다음 화면으로 이동, pop을 사용하면 현재 화면을 꺼내기 즉 이전 화면으로 돌아가는 형태가 됩니다. 바로 예제로 들어가보도록 하겠습니다. 첫 번째 스크린입니다. Navigator.push 메소드를 이용하면 다음 화면으로 전환할 수 있는데, 그 구조는 18-23번째 줄처럼 Navigator.push(context, MaterialPageRoute(builder..

안녕하세요~ totally 개발자입니다. Icon 오늘 다룰 부분은 Icon, 아이콘을 표시하는 위젯으로 사용법이 매우 간단하고 쉽기 때문에 바로 예시로 들어가보도록 하겠습니다. 14번째 줄을 보시면 AppBar 위젯에 leading 속성을 추가하고 Icon 위젯을 배치했습니다. Icon의 사용법은 어떤 아이콘을 사용할 것인지만 명시해주면 끝입니다. 물론 size와 color를 추가하는 등 스타일을 적용할 수 있습니다. 이 뒤로 가기 아이콘을 활용해서 이 아이콘을 눌렀을 때, 뒤로 가기 즉 종료하기 위한 팝업을 띄워보도록 하겠습니다. 먼저 AlertDialog 위젯을 별도로 분리해서 선언해줍니다 (아래 참고). 이미 AlertDialog를 다루었기 때문에 간단히 설명하면 title, actions의 속성..

안녕하세요~ totally 개발자입니다. ElevatedButton, TextButton, OutlinedButton 오늘은 버튼을 만들 수 있게 해주는 위젯들(ElevatedButton, TextButton, OutlinedButton)에 대해서 살펴보겠습니다. 먼저 ElevatedButton 위젯부터 살펴보겠습니다. ElevatedButton ElevatedButton 위젯의 기본 구조를 보면 아주 간단하게 style, onPressed, child 등을 가지며 style로 버튼을 디자인할 수 있고, onPressed 기능을 통해 버튼을 눌렀을 때의 액션을 구성할 수 있고, child 속성을 통해서 버튼 내부 위젯을 생성할 수 있습니다. 이번에는 TextButton도 추가해보겠습니다. TextButt..

안녕하세요~ totally 개발자입니다. Text, TextStyle 오늘 다룰 부분은 글씨를 나타내는 Text 위젯과 그 Text 위젯에 style을 입힐 수 있게 도와주는 TextStyle입니다. 플러터에서 Text 위젯을 사용할 때 거의 반드시 사용되는 속성으로 많이 사용되는 것들 위주로 알아보도록 하겠습니다. 기본 Text 위젯만 사용한 화면으로 이렇게 버튼 컨테이너 안에 GET STARTED라는 글씨가 크기에 비해 다소 작아보입니다. 이럴 때 조금 더 가독성을 좋게 만들고 보기 좋은 디자인으로 만들기 위해 TextStyle을 사용해줍니다. TextStyle에는 많은 속성이 있지만 많이 사용되는 것들을 위주로 정리하면 fontFamily (폰트 지정), fontWeight (폰트 굵기 지정), f..

안녕하세요~ totally 개발자입니다. Gradient 오늘 살펴볼 부분은 그라데이션을 적용하는 방법입니다. 많은 에플리케이션을 보면 화려하고 멋진 그라데이션을 적용한 것을 볼 수 있습니다. 바로 예제를 통해 확인해보도록 하겠습니다. 일반적으로 단색을 적용하면 위처럼 다소 밋밋하게 보일 수 있습니다. 조금 더 세련된 디자인을 위해서는 그라데이션을 적용하면 됩니다. LinearGraident 먼저 살펴볼 그라데이션은 LinearGradient입니다. 아래 예제를 살펴보겠습니다. LinearGradient(선형 그라데이션)을 적용한 모습입니다. linear는 선, 직선 모양의 의미로 begin과 end를 수반하여 시작 방향과 끝 방향이 정해져 있는 그라데이션이며 colors의 속성에는 배열 형태로 여러 색..