Flutter- 필수 Widget 정리

Column

행을 의미한다. 서로를 위 아래에 두고 싶을 때, column을 사용한다.

이 경우 하나의 Column에 두개의 child가 들어있는 형태로, 위에 child는 Hey,Selena를 표시하고 아래 child는 Welcome back을 표시한다. 코드는 아래와 같다.(사진의 파란색 박스는 내가 보기 편하게 임의로 표시한 것이다)

Column(
    crossAxisAlignment: CrossAxisAlignment.end, // Column의 MainAxisAlignment는 수직 CrossAxisAlignment는 수평
    children: [
      // column에 들어가 있는 children들은 한칸씩 아래로 쌓임
      const Text(
        "Hey, Selena",
        style: TextStyle(
          color: Colors.white,
          fontSize: 28,
          fontWeight: FontWeight.w800,
        ),
      ),
      Text(
        "Welcome back",
        style: TextStyle(
          color: Colors.white
              .withOpacity(0.7), // withOpacity = 투명도
          fontSize: 18,
        ),
      ),
    ],
)

또한 위의 사진에서 텍스트들이 모두 오른쪽으로 정렬이 되어있다. 이는 crossAxistAlignment 설정을 end로 주었기 때문이다. Column의 경우 Main, Cross의 방향은 다음과 같다.

• MainAxisAlignment: 수직
• CrossAxistAlignment: 수평

Row

말 그대로 열을 의미한다. 서로를 옆에 둘 때 사용한다.

색상

Colors

미리 정의된 다양한 색상을 찾아서 사용할 수 있다.

const Text(
	"Hello World",
    style: TextStyle(
    	color:Colors.red, // 이미 정의된 색 사용
    ),
)

- withOpacity(value): Colors.red.withOpacity(0.5)와 같은 형식으로 사용하며, 0~1까지 투명도를 선택할 수 있다.

(1: 불투명, 0: 투명) 

Color

색상 코드를 이용해서 색상을 지정할 수 있다.

home: Scaffold(
    backgroundColor: const Color(0xFF181818),
    ...
)

0xFF 뒤에 색상 코드를 붙이는 방식으로 색상을 입력할 수 있다.

Color.fromRGBO

home: Scaffold(
    backgroundColor: const Color.fromRGBO(204, 170, 36, 61),
    ...
)

RGBO를 직접 명시해줄 수도 있다.

Padding

Center(
  child: Container(
    color: Colors.amber,
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ),
));

Padding을 설정할 부분을 Padding widget으로 둘러싼 후, padding 설정을 준다. 이때 패딩 위젯으로 둘러싸는 것은 code action(노란 전구 버튼)을 사용하면 쉽게할 수 있다.

padding은 EdgeInsets 클래스로 설정해주며 다음과 같은 종류가 존재한다.

EdgeInsets.all()

상하좌우에 padding 값을 일괄 적용한다.

EdgeInsets.all(5)
// left, right, top, bottom 의 padding 값은 모두 5가 적용이 된다.

EdgeInsets.only()

left, right, top, bottom 의 padding 값을 선택하여 적용한다.

EdgeInsets.only(left: 10, bottom: 5)

EdgeInsets.symmetric()

horizontal(left, right), vertical (top, bottom)의 padding 값을 적용한다.

dgeInsets.symmetric(vertical: 5, horizontal: 10)
//left, right의 padding 값은 10 
//top, botton의 padding 값은 5가 적용이 됨

아이콘 추가

Column(
  child: const Icon(  // Icon 위젯으로 아이콘을 가져올 수 있음
    Icons.euro_rounded,
    color: Colors.white,
    size: 98,
  )
)

기존에 Column에 Text 위젯으로 글자를 표시하듯이, Icon 위젯으로는 아이콘(그림)을 표시할 수 있다. Text 위젯을 사용하는 것과 사용방식은 유사하다. 단지 글자가 아닌 이미지를 넣어주는 기능일 뿐이다.

위젯 위치 이동

Transform.translate(
  offset: const Offset(8, 15), // x, y 방향으로 8,15 이동
  child: const Icon(
    Icons.euro_rounded,
    color: Colors.white,
    size: 98,
  ),
)

Transform.translate의 offset을 이용하여 위젯을 이동할 수 있다.