12. 플러터 시작

맥북에 플러터 + 안드로이드 설치하기 => 이슈없이 잘되서 skip

 

DeathMatchMain.dart 파일 생성

 

짜장 vs 짬뽕이라는 화면을 만들고

짜장을 눌렀을 때 다음 데스매치로 넘어가는 화면을 설계하고 싶다.

 

우선 메인화면에 색갈 씌우기

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Todo image.asset("경로~") 넣으면 이미 넣을 수 있으나 일단은 텍스트만 진행
      //
        home: Center(
          child: Container(width: 50, height: 50, color: Colors.blueAccent),
        )
      );
    }
  }

 

 

Container위젯

플러터에서의 width: 50은 50LP라는 단위를 사용하고

50LP는 1.2cm라고한다

고로 폭과 넓이가 검지손가락 정도 되는 크기가 된다는 뜻

 

Center위젯

내 자식이(Container)센터 기준으로생성되어라

라고 위치를 설정해주고 싶어서

center위젯안에 child를 넣음

근데 내가 하고싶은건

1:1비율을 위 아래로 박스를 배치하고 싶다

MaterialApp안에

home에다가 Column을 주었다

왜 이건 row가 아닌걸까 Row로 주게 되면 세로로 갈라진다

암튼

우리는 가로로 잘라진 모양이 필요해서 Column을 주었다

flex는 비율이다 그래서 1,1 을 적었다

expanded위젯은 row나 column을 쓸때 사용 하는 위젯인데 부모의 남은 부분을 전부 채워주는 것을 의미한다

지금은 1대1이어서 남은 공간이 없지만 2대 1일 경우 남는 공간이 1 존재 할테니 그 부분을 채워준다

 

alignment: Alignment(0.0,0.0),

container에서 중앙 정렬할 수 있다

Alignment.bottomCenter 하단 중앙 Alignment(0.0, 1.0)

Alignment.bottomLeft 왼쪽 하단 모서리 Alignment(-1.0, 1.0)

Alignment.bottomRight 오른쪽 하단 Alignment(1.0, 1.0)

Alignment.center 수평 및 수직 중심 Alignment(0.0, 0.0)

Alignment.centerLeft 왼쪽 끝 Alignment(-1.0, 0.0)

Alignment.centerRight 오른쪽 끝 Alignment(1.0, 0.0)

Alignment.topCenter 중앙 상단 Alignment(0.0, -1.0)

Alignment.topLeft 왼쪽 상단 Alignment(-1.0, -1.0)

Alignment.topRight 오른쪽 상단 Alignment(1.0, -1.0)

 

 

내일은 container를 누르면 다음 데스매치로 넘어가는 화면을 설계해보자