Row & Column (CrossAxisAlignment) 이번엔 CrossAxisAlignment에 대해 학습합니다. 저번에 MainAxisAlignment에 대해 배웠는데, 이 기능은 주축 정렬이었습니다. 반대로 CrossAxisAlignment는 반대축 정렬의 기능을 가집니다. MainAxisAlignment 같은 경우 Row일때는 가로 정렬, Column일때는 세로정렬입니다. CrossAxisAlignment는 정확히 그 반대입니다. Row는 세로 Column일때는 가로입니다. 여기서 문제점은 반대축을 정렬하기 위해 상위 Container의 가로축인 검정색 배경 부분을 늘려야 합니다. 상위 Container의 검은색 배경을 늘리기 위해 위젯 코드를 변경해 보겠습니다. import 'pac..

Row & Column (MainAxisAlignment) 저번에 Column Widght에 mainAxisAlignment의 Center 속성을 사용했었습니다. ManAxisAlignment는 주축 정렬을 하는데 사용하는 위젯이었습니다. 이번엔 MainAxisAlignment의 모든 속성을 전부 사용해 보겠습니다. 저번에 만들었던 HomeScreen의 SafeArea코드에 적용해보겠습니다. MainAxisAlignment의 속성을 Start로 두면 하위의 위젯들의 변동이 없습니다. 왜냐하면, 이미 주축이 시작부분으로 되어 있으니까요. end로 하면 위젯들이 아래부터 채워질겁니다. 당연히 center로 설정을 하면 위젯들이 가운데로 올거고, spaceBetween으로 설정한다면 1개의 Container마..

Row & Column Flutter에서 스크린 단 분리를 할때 StatelessWidget을 상속받아서 만들어왔었다. 이걸 일일이 작성하기 귀찮아서 Flutter는 stless 키워드를 차면 자동 완성을 해준다. class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Placeholder(); } } 위의 템플릿을 이용해 아래와 같이 작성해왔었는데 스크린 단의 클래스를 디렉터리에 따로 모아서 하는게 더 편하므로, HomeScreen 클래스를 따로 만들어 준다. void main() { run..

Hello World 앱 만들기 runApp() : 플러터의 진입 포인트 MaterialApp() : 어플리케이션의 시작 Scaffold() : 화면 정의, backgorundColor : 화면의 배경색 정의 Center() : 컨텐츠의 중앙 위치 Text() : 텍스트, TextStyle : 말그대로 텍스트 스타일 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( /* Scaffold - 페이지 작성, 어플리케이션 화면 - Body */ home: Scaffold( backgroundColor: Colors.black, body: Center( child: Text( 'Hello World',..

💡 Mac Settings Download Flutter SDK Link Get Started - Install - MacOS - Download Zip - Uncompress 원하는 폴더로 이동 (난 Documents - SDK에 저장) cd ./Documents/SDK/flutter/bin vi ~/.zshrc (bash Shell인 경우 ~/.bash_profile) export PATH="$PATH:/Users/space/Documents/SDK/flutter/bin" echo $PATH & which flutter Download Xcode iOS Build Tool AppStore - Download Xcode sudo xcode-select --switch /Applications/Xcode..