안녕하세요~ 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의 속성에는 배열 형태로 여러 색..

안녕하세요~ totally 개발자입니다. Flexible, Expanded Flexible 이 시간에는 Flexible, Expanded 위젯에 관해 살펴보도록 하겠습니다. 이 위젯들은 반응형으로 만들 때 즉 가능한 공간을 채울 때 사용하게 되는 위젯들입니다. Flexible 위젯의 사용법과 어떤 경우에 사용하는지 알아보겠습니다. 쉬운 예시를 위해 간단하게 Column에 Row를 적용하고 그 Row에 2개의 컨테이너들을 width: 150, height: 150으로 지정하여 배치하였습니다. 위의 시뮬레이터를 보면 아시겠지만, 양끝에 공간이 남는 것을 알 수 있습니다. 만약 이 공간을 채우기 위해 width에 특정 값을 부여하는 경우에는 현재 아이폰 13 시뮬레이터지만, 만약 아이폰 13 미니 또는 프로 ..