안녕하세요~ 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..

안녕하세요~ totally 개발자입니다. AlertDialog 오늘 다뤄볼 위젯은 AlertDialog이며 플러터에서 팝업창을 띄울 때 많이 사용되는 위젯으로 바로 예제 실습으로 들어가 보겠습니다. 먼저 GestureDetector의 onTap 같이 탭을 인식하는 속성을 가진 위젯을 사용해서 AlertDialog를 띄워보도록 하겠습니다. GestureDetector 위젯을 만들어주고 onTap으로 탭을 했을 때, 그 탭의 기준은 child의 Container 위젯입니다. 34번째 onTap의 내부를 작성한 모습입니다. AlertDialog를 나타내기 위해서는 showDialog 호출이 필요하며 context, builder 등의 속성을 명시해주어야 합니다. 37번째의 barrierDismissible: ..