[영상] 코딩애플 플러터

옥수수의 코딩이야기·2022년 10월 19일
0

유튜버 영상 정리

목록 보기
5/8
post-thumbnail

0강 플러터 설치

https://codingapple.com/unit/flutter-install-on-windows-and-mac/?id=19933

  1. Flutter SDK 다운
  2. Android studio 다운 후 플로그인 플러터 설치(아톰원 다크 설치)
  3. Projects에서 sdk manager 누름 sdk tools에서 Android sdk command-line tools 설치

윈도우 환경변수 등록
환경변수 편집 => 환경변수 => path 편집 => 아까 푼 flutter 안의 bin 폴더 경로 적어야함(복붙) 확인

맥 환경변수
터미널 => 님 터미널 이름이 zsh면
터미널에
touch ~/.zshrc
open ~/.zshrc
입력합니다. 

님 터미널 이름이 bash면
touch ~/.bash_profile
open ~/.bash_profile
입력합니다 
=> (편집기)export PATH="$PATH:플러터폴더경로넣으셈/bin"

  1. 터미널 flutter doctor 입력(세팅 확인 및 설치)
  2. 안드로이드 스튜디오 => new flutter project
  3. 플러터 경로 잘 입력
  4. 프로젝트 이름, 플랫폼 고르기
  5. Main.dart에서 코드 짜기 시작

한글 오류 뜨는 거 해결하고 시작


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: 입력할 수 있는 것 자동완성

profile
프론트엔드 공부중 기억은 블로그가 대신합니다.

0개의 댓글