0강 플러터 설치
https://codingapple.com/unit/flutter-install-on-windows-and-mac/?id=19933
윈도우 환경변수 등록
환경변수 편집 => 환경변수 => path 편집 => 아까 푼 flutter 안의 bin 폴더 경로 적어야함(복붙) 확인
맥 환경변수
터미널 => 님 터미널 이름이 zsh면
터미널에
touch ~/.zshrc
open ~/.zshrc
입력합니다.
님 터미널 이름이 bash면
touch ~/.bash_profile
open ~/.bash_profile
입력합니다
=> (편집기)export PATH="$PATH:플러터폴더경로넣으셈/bin"
한글 오류 뜨는 거 해결하고 시작
1강 :기본 위젯4개 알면 기초 끝
시작하기 전에 Lint 관련 워닝 무시하는 법
// (analysis_options.yaml)
rules:
prefer_const_constructors: false
avoid_print: false
prefer_typing_uninitialized_variables: false
prefer_const_constructors_in_immutables: false
스페이스바 2개가 있어야함
main.dart 파일
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp()); //앱 시작해주세요
}
이 코드를 제외하고 다 지움
MyApp 메인페이지 만들기
stless라고 치고 탭키 누르면 저거 자동완성
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Text('안녕'),
);
}
}
플러터에서 앱 디자인 넣는 법 : 위젯 짜집기
위젯은 대문자로 시작을 하고 소괄호가 붙음 ex)Text()
이미지 위젯 Image.asset(‘경로~~’) assets/dog.png
: assets 파일 생성 후 이미지 추가함
pubspec.yaml 파일 중간에 모든 이미지 파일 가져 올 수 있음
//pubspec.yaml
flutter:
assets:
- assets/
아이콘 위젯 Icon(Icons.아이콘이름) - 플러터 홈페이지에 이름 있음
박스 위젯 Container() / Sizedbox()
: 스타일 줄 땐(스타일: 값)
flutter의 사이즈 단위는 LP임 (50LP==1.2cm)
내 자식의 위젯을 정 가운데로 해주세요 Center()
MaterialApp(
home: Center(
child: Container(width : 50, height : 50, color: Colors.blue)
)
)
2강 : 가로세로 배치하는 법과 Scaffold
MaterialApp(): 구글에서 제공하는 ui를 사용할 수 있음
Cupertino():아이폰 관련 위젯
Scaffold(): 앱을 상중하로 나눠주는 위젯
(참고) Material Design 쓰려면 일단 pubspec.yaml 파일에 이런 항목이 켜져있어야합니다.
flutter:
uses-material-design: true
MaterialApp(
home: Scaffold(
appBar: 상단에 넣을 위젯,
body: 중단에 넣을 위젯,
bottomNavigationBar: 하단에 넣을 위젯,
)
);
MaterialApp(
home: Scaffold(
appBar: AppBar( title: Text('앱제목') ),
body: Text('안녕'),
bottomNavigationBar: BottomAppBar( child: Text('하단바임 ㅅㄱ') ),
)
);
Row(): 가로
Column(): 세로
mainAxisAlignment : 정렬
crossAxisAlignment)
.spaceEvenly 는 모든 여백 동일
.spaceBetween 은 좌우 끝에 우선 배치
.spaceAround는 모든 여백 동일인데 좌우 마지막 여백은 절반만큼
.start는 시작 부분에 다 모여
.end는 끝 부분에 다 모여
.center는 중간에 다 모여
body: Container (
color: Colors.grey,
height : 400, //높이 넣어야 세로정렬 가능할듯
child : Row (
crossAxisAlignment: CrossAxisAlignment.start, // 세로정렬
children: const [
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
],
),
),
오류 밑줄 지우는 법
//analysis)options.yaml
perfer_const_literals_to_create_immutables : false
ctrl+space: 입력할 수 있는 것 자동완성