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

안녕하세요~ totally 개발자입니다. Center 저번 시간의 Align 위젯에 이어 이번 시간에도 정렬 위젯인 Center에 대하여 다룹니다. Align에서는 다양한 방향에 대한 정렬이었다면 Center는 오직 중앙 정렬을 위해 사용되는 위젯으로서 Align보다도 사용법이 더 간단하니 바로 예제로 들어가겠습니다. 위의 예제를 보면 Center 위젯을 사용하고 child만 배치해주면 바로 중앙에 Container가 배치된 것을 확인할 수 있습니다. 다만 이 Center 위젯의 속성에 widthFactor과 heightFactor이 존재하는데 widthFactor는 child 위젯의 길이 * factor만큼 Center 위젯의 길이(width)를 지정해주며 heightFactor 역시 child 위젯의..

안녕하세요~ totally 개발자입니다. Align 오늘 다뤄볼 위젯은 Align이며 이 위젯은 이름 그대로 정렬을 도와주는 위젯입니다. Align 위젯의 사용법은 상당히 간단합니다. alignment: Alignment.topLeft 형태로만 사용하면 바로 적용되며 Alignment에는 topLeft, topRight, topCenter, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight이 사용됩니다. 이렇게 9가지의 정렬을 표시할 수 있기 때문에 정렬할 때 반드시 알고 있어야 하는 위젯 중 하나입니다. 아래에 전체 소스 코드를 첨부하였으니 참고하시면 될 것 같습니다. 감사합니다. [전체 소스 코드] [유튜브 강좌 영상] ht..

안녕하세요~ totally 개발자입니다. SingleChildScrollView 이번에 다뤄볼 위젯은 SingleChildScrollView입니다. 스크롤이 가능하도록 도와주는 위젯이며 본래 플러터를 사용해서 출력이 가능한 범위를 초과하는 경우에는 에러가 발생하는데 이것을 방지하고 스크롤이 가능하게 만들어줍니다. 위 이미지를 보면 시뮬레이터 부분에 에러가 나오고, 좌측 하단의 DEBUG CONSOLE에서도 "A RenderFlex overflowed by 159 pixels on the bottom."이라고 에러 메시지가 출력되는 것을 확인할 수 있습니다. 이와 같이 일반적으로 출력할 수 있는 범위를 초과하는 경우에는 이 초과하는 것을 스크롤 할 수 있게 해주는 위젯을 사용해야 하는데 그 중의 하나가 S..