[flutter] 플러터 아이콘 콘테이너

18 Dec 2023

플러터(Flutter)에서는 아이콘과 콘테이너를 사용하여 UI를 디자인할 수 있습니다. 이 글에서는 플러터에서 아이콘과 콘테이너를 어떻게 사용하는지 알아보겠습니다.

아이콘 사용하기

아이콘은 플러터에서 간단하게 사용할 수 있는 요소 중 하나입니다. 이 글에서는 Icon 위젯을 사용하여 아이콘을 추가하는 방법을 알아보겠습니다.

Icon(
  Icons.star,
  color: Colors.amber,
  size: 24.0,
)

위의 예제에서는 Icons.star를 사용하여 별모양의 아이콘을 추가하고, color 속성을 통해 아이콘의 색상을 지정하고, size 속성을 통해 아이콘의 크기를 지정하고 있습니다.

콘테이너는 UI의 레이아웃을 조절하는데 사용되는 중요한 요소입니다. 플러터에서는 Container 위젯을 사용하여 콘테이너를 추가할 수 있습니다.

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
)

위의 예제에서는 width와 height 속성으로 콘테이너의 크기를 지정하고, color 속성으로 콘테이너의 배경색을 지정하고 있습니다.

아이콘을 콘테이너 안에 넣어서 함께 사용하는 경우도 많습니다.

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  child: Icon(
    Icons.star,
    color: Colors.amber,
    size: 24.0,
  ),
)

위의 예제에서는 콘테이너 안에 Icon 위젯을 넣어 함께 사용하고 있습니다.

플러터에서는 Icon과 Container 위젯을 사용하여 간단하게 아이콘과 콘테이너를 추가할 수 있습니다. 이를 조합하여 다양한 UI를 디자인할 수 있습니다.