[패캠-코딩 왕초보를 위한 앱 만들기 풀패키지] (1) padding, margin, alignment

들어가기 앞서...

패스트 캠프에서 코딩 왕초보를 위한 앱 만들기 풀패키지 강의를 들으며 정리하는 게시글이다~

우선은 초급자가 접근하기 쉬운 강의를 선택하기로 했다!

 

앱 레퍼런스 페이지 

https://fnd.io/#/kr/search?mediaType=all&term=%EC%95%BD 

fnd

 

 

---

본문으로...

• padding 과 margin을 공부해보자!

기본적으로 HomeScreen 클래스를 만들고 작업을 해주자!

padding과 margin을 적용해준 코드의 모습이다!

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My First Page'),
      ),
      body: Container(
        color: Colors.yellow,
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 50),
        margin: const EdgeInsets.symmetric(horizontal: 100, vertical: 50),
        child: const Text('center'),
      ),
    );
  }
}

padding

// padding(안쪽 여백)
// 모든 방향에 padding 100만큼! 
padding: const EdgeInsets.all(100);

// padding 수평 과 수직 을 따로 줄 수 있다.
padding: const EdgeInsets.symmetric(
	// 수평 (왼,오)
	horizontal: 100,
    // 수직 (위, 아래)
    vertical: 100,
);

margin

// margin (바깥 여백)
// 모든 방향 100 만큼!
margin: const EdgeInsets.all(100);

// margin 을 각각 따로 줄 수 있다.
margin: const EdgeInsets.symmetric(
	// 수평 (왼, 오)
    horizontal: 100,
    // 수직 (위, 아래)
    vertical: 100,
);

여기서 주의 해야하는 점이 바로, 적용되어있는 Container 의 width 과 height 가 정해져있지 않으면 사이즈 최대로 먹고, 

 

• 그리고 alignment 를 배워보자!

alignment 를 적용하면, Container 가 휴대폰의 최대 사이즈를 차지한다.

alignment.center 휴대폰 최대 사이즈를 차지하고, child 를 center 로 차지하게 만든다.

// 가운데
alignment.center
// 가운데 오른쪽
alignment.centerRight
// 가운데 왼쪽
alignment.centerLeft

// 위 가운데
alignment.topCenter
// 위 오른쪽
alignment.topRight
// 위 왼쪽
alignment.topLeft

// 아래 가운데
alignment.bottomCenter
// 아래 오른쪽
alignment.bottomRight
// 아래 왼쪽
alignment.bottomLeft

하지만 더 세밀하게 조정할 수 있는 방법이 있다! 

Alignment(double, double) 로 소수점을 넣어서 세밀하게 조정가능하다.

alignment: const Alignment(0, 0); == alignment.center
alignment: const Alignment(0, 1); == alignment.centerRight
alignment: const Alignment(0, -1); == alignment.centerLeft
alignment: const Alignment(-1, 0); == alignment.topCenter
alignment: const Alignment(-1, 1); == alignment.topRight
alignment: const Alignment(-1, -1); == alignment.topLeft
alignment: const Alignment(1, 0); == alignment.bottomCenter
alignment: const Alignment(1, 1); == alignment.bottomRight
alignment: const Alignment(1, -1); == alignment.bottomLeft

 

• 이제는 SizedBox() 위젯을 배울것이다.

SizedBox 는 자식의 크기를 지정할 수 있다.

예 ) child 에 text 가 있다면? text를 쓸수 있는 크기를 지정하는 것이다.

 

body: const SizedBox(
	width: 200,
    height: 200,
    child: Text(
    	'Flutter Hello'
    )
)

 

padding 역할만 하는 padding 위젯, alignment 역할만 하는 alignment 위젯도 있다.

// Padding
...
body: Padding(
	padding: ~,
    child: ~,
),
...

//Alignment
...
body: Alignment(
	alignment: ~,
    child: ~,
),
...

---

끝으로...

1. 단일 박스(컨테이너) 위젯작성하는 방법을 배웠다! 
2. Container, SizedBox, Center 에 대한 개념을 익히고 테스트로 코드 작성 완료했다!

---