플러터 컨테이너 위젯, 단위 lp와 cm 호환

 

1. 컨테이너 위젯

박스를 그리고 싶을 땐 sizedbox나 container를 사용한다. 그런데, container에서 width나 height을 그냥 지정하면 전체 화면이 다 컨테이너로 잡힌다. 이는 어디서부터 width 나 height로 볼건지 그 시작점이 명확하지 않아서 발생하는 일이다. 따라서 Center로 해당 컨테이너를 감싸는 등의 방식을 통해 기준점을 잡아줄 수 있다.

 NP 1. 컨테이너 width, height 처럼 너비나 높이를 지정할 때는 기준점을 잡아준다.

 

예시 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Container(width : 500, height : 500 color : Colors.green),
      )
    );
  }
}

코드 실행 결과

2. 단위

컨테이너 박스 등의 위젯 안에서 사용하는 width : 100 에서 단위는 lp다. 이때 100 1p는 2.4cm로, 플러터 기준으로 정한 숫자의 4분의 1이 cm라고 보면 된다. 따라서 만일 특정 cm길이로 앱을 구현하고 싶다면 어림잡아 4를 곱하고 뒤에 0을 붙여주면 된다. (혹은 40을 곱하면 됨)

 

NP 2. 구현하고자 하는 cm 단위에 40을 곱해 너비, 높이를 지정하자.

예를들어, 5cm 너비의 박스를 만들고 싶다면 width : 5 * 4 * 10 (== 200), width : 200으로 설정한 후 세부적으로 원하는 너비만큼 조정 들어가면 기준이 생겨서 구현하고자 하는 모습을 더 쉽게 찾을 수 있다.  

 

3. 위젯 간의 관계

 

NP 3. child 붙였나 확인하기! (하위 위젯 오류뜨는 경우)

하위 위젯을 만드는 경우, 혹시 밑줄이 그어지거나 오류가 뜬다면 child를 붙였는지 확인해보자.

 

위젯 안의 위젯은 자식 요소로 간주하기 때문에 child나 (자식이 여러 요소들로 이뤄져 있다면) 리스트 형식을 빌려 children [ ]; 으로 작성한다. (단, 모든 위젯 안에 반드시 child를 붙여야 하는 것은 아니다.)