안녕하세요~ 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 미니 또는 프로 ..

안녕하세요~ totally 개발자입니다. Image, AssetImage, NetworkImage 오늘 다뤄볼 위젯은 Image입니다. Image는 대표적으로 AssetImage와 NetworkImage로 나뉩니다. AssetImage는 이미 로컬 스토리지에 저장되어 있는 이미지를 활용하는 방법이고, NetworkImage는 웹사이트에 올려진 url을 이용하여 이미지를 표시합니다. 이 2가지 방법을 모두 실습해보도록 하겠습니다. AssetImage 먼저 AssetImage입니다. 사용법은 아래와 같습니다. Step1: 이미지 파일 준비 (assets/images/ 보통 이 경로로 저장해두면 되며 변경 가능합니다) Step2: 프로젝트 폴더에 보면 pubspec.yaml이라는 파일이 있는데 여기에 asse..