Flutter는 UI 개발을 위한 훌륭한 프레임워크로, 다양한 위젯을 사용하여 예쁘고 동적인 인터페이스를 구현할 수 있습니다. 이 중에서도 Row 위젯은 가로로 요소를 배열하는 데에 사용되며, 이미지를 포함한 요소들을 배치하는 데에도 많이 이용됩니다. 이번 글에서는 Row 위젯에서 이미지를 사용하는 방법에 대해 알아보겠습니다.
이미지 위젯 생성하기
먼저, Flutter에서 이미지를 위젯으로 사용하기 위해서는 Image 위젯을 이용해야 합니다. Image 위젯은 네트워크나 로컬에 저장된 이미지 파일을 화면에 표시해주는 역할을 합니다. 다음은 Image 위젯의 생성과 함께 네트워크 상의 이미지를 사용하는 예제입니다.
Image.network(
'https://example.com/image.jpg',
width: 100,
height: 100,
),
위 예제에서는 Image.network 생성자를 이용해 https://example.com/image.jpg 경로에 있는 이미지를 표시하는 Image 위젯을 생성했습니다. width와 height 매개변수를 이용하여 이미지의 크기를 지정할 수 있습니다.
Row 위젯에서 이미지 사용하기
이제 Image 위젯을 포함한 요소들을 Row 위젯 안에 배치해보겠습니다. 다음은 Row 위젯 안에 이미지와 텍스트를 함께 사용하는 예제입니다.
Row(
children: [
Image.network(
'https://example.com/image1.jpg',
width: 100,
height: 100,
),
Text(
'Hello!',
style: TextStyle(fontSize: 20),
),
],
),
위 예제에서는 Row 위젯의 children 속성에 Image 위젯과 Text 위젯을 배열하였습니다. 이렇게 하면 이미지와 텍스트가 가로로 나란히 표시됩니다.
요소 간 여백 추가하기
Row 위젯에서 이미지와 텍스트 사이에 여백을 추가하고 싶다면 mainAxisAlignment 속성을 이용할 수 있습니다. 다음은 이미지와 텍스트 간에 20픽셀의 여백을 추가하는 예제입니다.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.network(
'https://example.com/image1.jpg',
width: 100,
height: 100,
),
SizedBox(width: 20),
Text(
'Hello!',
style: TextStyle(fontSize: 20),
),
],
),
위 예제에서는 mainAxisAlignment 속성을 MainAxisAlignment.spaceBetween로 설정하여 이미지와 텍스트 요소를 가능한 범위 내에서 가로로 정렬합니다. 그리고 SizedBox 위젯을 이용하여 이미지와 텍스트 사이에 20픽셀 크기의 여백을 추가했습니다.
이렇게 해서 Row 위젯에서 이미지를 사용하는 방법을 알아보았습니다. Flutter의 다양한 위젯을 이용하면 보다 다양하고 동적인 UI를 구현할 수 있으니, 창의적으로 활용해보시기 바랍니다.