AR삽질러

Flutter 기초 - Widget Stack (15)  Widget Stack - Stack위젯은 자식 위젯들을 겹쳐서 배치할 수 있게 해주는 위젯으로 Stack의 자식들은 기본적으로 왼쪽 상단 모서리에서 시작하여 쌓고 다른 위젯과 달리 각 자식 위젯들은 서로의 위치를 고려하지 않고 독립적으로 배치된다. - Stack은 가장 먼저 선언된 Container가 가장 아래에 위치하고 이후 선언된 위젯들은 위로 쌓이게 된다. Stack - Align - Align위젯은 Stack내에서 특정한 위치에 자식을 배치하고자 할때 사용되며 Stack전체 공간 내에서 자식 위젯의 정확한 위치를 조정하고 alignment속성을 통해서 결정한다. Stack - Align - alignment - alignment속성은 A..

Flutter 기초 - Widget 비율 (14) Flexible, Expanded - Flutter에서 Container공간 내의 공간비율을 조정할 때 사용되며 두 위젯은 비슷한 기능을 수행하지만 공간 할당 방식에서 약간의 차이가 존재한다. 1. Flexible - 자식 위젯에게 남은 공간을 어떻게 분배할지 결정한다. - Flexible의 속성을 통해서 제어가 가능하다. - 여러 자식간의 크기 비율을 조금더 세밀하게 조정하고 싶을 경우 사용Flexflex값이 다른 위젯 들과 비교해 공간의 분배 비율을 결정한다.Fit기본값은 FlexFit.loose로 자식 위젯이 필요한 만큼의 공간만 차지하게 되어 할당된 공간을 최대한 채우도록 강제한다.  2. Expanded - fit속성을 FlexFit.tight..

Flutter 기초 - SingleChildScrollView (13)  SingleChildScrollView - 단일 자식 위젯에 스크롤 기능을 추가할 수 있도록 해주는 위젯으로 수직 스크롤과 수평 스크롤 두가지 사용방식이 있다. 1. SingleChildScrollView  (Vertical Scroll) - 수직 스크롤은 Column위젯과 함께 사용되며 목록, 이미지, 텍스트 등의 요소들을 수직 방향으로 스크롤할 수 있도록 한다. - SingleChildScrollView의 기본 스크롤 방향으로 Column위젯을 사용해 위젯을 수직으로 나열한다.import 'package:flutter/material.dart';void main() { runApp(MaterialApp( home: ..

Flutter 기초 - Widget상하 좌우 배치 (12) Column과 Row는 수직 및 수평 방향으로 자식 위젯들을 정렬하고 배치하는데 사용된다. 1. Column - 자식들을 수직 방향으로 배열한다. mainAxisSizeColumn높이를 결정한다.MainAxisSize.minMainAxisSize.maxmainAxisAlignment주축(수평)에 대한 자식 위젯들의 정렬 방식을 결정한다.MainAxisAlignment.startMainAxisAlignment.endMainAxisAlignment.centerMainAxisAlignment.spaceBetweencrosAxisAlignment교차 축(수직)에 대한 자식 위젯들의 정렬 방식으로 결정한다.CrossAxisAlignment.startC..

Flutter 기초 - Container, Center Widget (11)import 'package:flutter/material.dart';void main() { runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Study to Container'), ), body: CustomContainer(), ), ), );}class CustomContainer extends StatelessWidget { const CustomContainer({super.key}); @override Widget build(BuildContext conte..

Flutter 기초 - MaterialApp, Scaffold (10) 1. MaterialApp - 앱의 최상위 레벨에 위치하며 Material Design앱을 만드는데에 필요한 여러 설정과 기능을 제공한다.네비게이션Navigator를 이용해 화면간의 라우팅 관리를 한다.(홈 화면, 상세 화면 등)테마전체 애플리케이션에 일관된 테마(색상, 폰트, 아이콘 스타일 등)를 적용해 앱의 외관을 통일할 수 있다.로케일다국어 지원을 위한 로케일 설정void main(){ runApp(MaterialApp( home: Scaffold( ), ))} - main함수에서 시작해 MaterialApp 위젯을 앱 전체를 감싸 MaterialApp 위젯이 최상위 컨테이너 역할 을 수행한다. - h..

Flutter 기초 - Hot restart, Hot reload (9) Hot restart - 앱을 재시작하는 형태로 앱의 모든 상태가 초기화 되고 변경사항을 반영할 수 있다.작동 방식전체 앱을 다시 컴파일하여 기존의 상태를 초기화후 앱을 다시 실행한다. 앱 빌드 시간이 걸리지만 Hot Reload보다 포괄적인 코드 적용이 가능하다.사용 시기전역 변수, 초기화 코드, 앱의 실행 흐름을 변경했을때 필요하며 Hot Reload에서 해결되지 않는 문제가 발생했을 때 유용하다.한계애플리케이션의 상태가 완전히 초기화되어 데이터나 이전 상태는 모두 반영되지 않는다. Hot reload - 앱을 재실행하지는 않지만 코드의 변경 사항을 반영하는 기능으로 앱의 상태를 유지한 상태로 코드의 수정사항을 확인해 빠른 개..

Flutter Reusable Cards 재사용가능한 위젯 const CurrencyCard( name: 'Euro', code: 'EUR', amount: '6 428', icon: Icons.euro_rounded, isInberted: false, ), Transform.translate( offset: const Offset(0, -20), child: const CurrencyCard( name: 'Bitcoin', code: 'BTC', amount: '9 785', icon: Icons.currency_bitcoin, isInberted: true, ), ), Transform.translate( offset: const Offset(0, -40), child: const CurrencyCa..

Flutter Cards import 'package:flutter/material.dart'; import 'package:toonflix/widgets/Button.dart'; void main() { runApp(const App()); } class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: const Color(0xFF181818), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 28), child: ..

Flutter Reusable Widgets 코드의 재사용성을 높이고 일관성 있는 디자인을 구현하기 위해서 재사용 가능한 위젯을 효과적으로 활용하는것이 좋다. 기존에 구현한 Transfet옆에 같은 기능을 하나 더만들기 위해서 Transfer의 Container를 복사해서 붙여넣어주고 Request라고 Text를 수정해준다. Container( decoration: BoxDecoration( color: Colors.amber, borderRadius: BorderRadius.circular(45)), child: const Padding( padding: EdgeInsets.symmetric( vertical: 18, horizontal: 45, ), child: Text( 'Request', styl..