[flutter] Row 위젯에서의 아이콘 사용하기
Row 위젯은 가로 방향으로 위젯들을 배열하는데 사용되는 Flutter의 내장 위젯입니다. Row 안에 다른 위젯들을 자유롭게 포함시켜 사용할 수 있습니다. 이번 예시에서는 Row 위젯 안에서 아이콘을 사용하는 방법에 대해 알아보겠습니다.
아이콘 위젯 가져오기
먼저 아이콘을 사용하기 위해서는 Material 디자인에 기반한 아이콘 위젯을 가져와야 합니다. 아이콘 위젯을 사용하기 위해 import 'package:flutter/material.dart';
를 추가하세요.
import 'package:flutter/material.dart';
아이콘 추가하기
이제 Row 위젯 안에서 아이콘을 추가해보도록 하겠습니다. 아래의 예시를 참고하세요.
Row(
children: [
Icon(Icons.home), // 홈 아이콘
Icon(Icons.settings), // 설정 아이콘
Icon(Icons.person), // 프로필 아이콘
],
)
위의 예시에서는 Row 위젯 안에 세 개의 아이콘을 추가했습니다. Icons.아이콘_이름
형태로 아이콘을 지정할 수 있습니다.
아이콘 스타일링하기
Row 위젯에서 아이콘을 사용할 때는 아이콘의 색상, 크기 등을 스타일링할 수 있습니다. 예를 들어, 아이콘의 크기를 조절하고 색상을 변경하고 싶다면 Icon
위젯 내부에서 size
와 color
속성을 사용하세요.
Row(
children: [
Icon(Icons.home, size: 24, color: Colors.red), // 홈 아이콘, 크기 24, 빨간색
Icon(Icons.settings, size: 24, color: Colors.blue), // 설정 아이콘, 크기 24, 파란색
Icon(Icons.person, size: 24, color: Colors.green), // 프로필 아이콘, 크기 24, 초록색
],
)
위의 예시에서는 각각의 아이콘에 사이즈와 색상을 적용하였습니다.
결론
이제 여러분은 Row 위젯을 사용하여 아이콘을 가로로 배열하는 방법에 대해 알게 되었습니다. 이를 통해 원하는 방식대로 아이콘을 배치하여 UI를 구성할 수 있을 것입니다. Flutter는 다양한 아이콘을 제공하므로 다양한 UI 요구사항을 충족시킬 수 있습니다.
자세한 내용은 Flutter 아이콘 위젯 설명서를 참고하세요.