Flutter로 UI를 구현하다 보면 아래 그림 처럼 종종 문장 앞에 점(•)이 붙은 리스트, html에 ul과 같은 ui를 구현해야 할 때가 있습니다. Flutter에서는 직접적으로 이러한 위젯을 제공하고 있지 않고 있습니다. 그래서 이번 글에서는 사용자 정의 BulletList 위젯을 만들어보겠습니다.
Bullet List의 기본 구조
먼저, BulletList 위젯은 주어진 문자열 리스트를 받아 각 항목에 점을 붙여 화면에 표시하는 역할을 합니다. 이를 위해 StatelessWidget을 상속한 클래스를 생성하고, List 타입의 데이터를 받아 이를 화면에 표시하도록 설계할 것입니다.
구현 코드
import 'package:flutter/material.dart';
class BulletList extends StatelessWidget {
final List<String> strings;
BulletList(this.strings);
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.fromLTRB(16, 15, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: strings.map((str) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'\u2022', // Bullet point character
style: TextStyle(
fontSize: 16,
height: 1.55,
),
),
SizedBox(
width: 5, // Spacing between bullet and text
),
Expanded(
child: Container(
child: Text(
str,
textAlign: TextAlign.left,
softWrap: true,
style: TextStyle(
fontSize: 16,
color: Colors.black.withOpacity(0.6),
height: 1.55,
),
),
),
),
],
);
}).toList(),
),
);
}
}코드 설명
strings: BulletList 위젯은 생성자에서 문자열 리스트(List)를 받아 이를 화면에 표시합니다.
Container: Container 위젯은 BulletList의 전체 레이아웃을 잡는 데 사용됩니다. 이 컨테이너는 alignment 속성을 Alignment.centerLeft로 설정하여 내용이 좌측 정렬되도록 합니다. 또한, padding을 통해 컨테이너 안의 여백을 설정합니다.
Column: 문자열 리스트의 각 항목을 열 방향으로 배치하기 위해 Column 위젯을 사용했습니다. crossAxisAlignment를 CrossAxisAlignment.start로 설정하여 모든 항목이 왼쪽으로 정렬되도록 했습니다.
Row: 각 문자열 항목은 점(•)과 함께 표시되며, 이를 위해 Row 위젯을 사용하여 점과 텍스트를 가로로 나란히 배치했습니다.
Text: 점은 Text 위젯으로 구현되며, 유니코드 값 \u2022를 사용하여 점(•)을 출력합니다.
SizedBox: 점과 텍스트 사이의 간격을 만들기 위해 SizedBox 위젯을 사용했습니다.
Expanded: 텍스트가 화면의 가로 공간을 모두 사용할 수 있도록 Expanded 위젯을 사용했습니다. 이로 인해 텍스트가 자동으로 줄바꿈되며, 필요에 따라 여러 줄로 나뉘어 표시됩니다.
활용 방법
이 위젯은 어디에서나 손쉽게 사용할 수 있습니다. 예를 들어, 아래와 같은 코드로 BulletList를 화면에 표시할 수 있습니다:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bullet List Example'),
),
body: BulletList([
'첫 번째 항목입니다.',
'두 번째 항목은 좀 더 길어져서 화면에 줄바꿈이 필요할 수 있습니다.',
'세 번째 항목은 매우 짧습니다.',
]),
);
}위 코드를 실행하면 세 개의 항목이 점(•)과 함께 화면에 표시됩니다.
결론
BulletList 위젯은 Flutter에서 간편하게 사용자 정의된 목록을 만드는 방법을 보여주는 좋은 예입니다. 이 위젯은 어디에서든 재사용할 수 있으며, 필요에 따라 텍스트 스타일이나 레이아웃을 쉽게 조정할 수 있습니다. Flutter의 유연한 위젯 시스템 덕분에 복잡한 레이아웃도 단순하고 효율적으로 구현할 수 있습니다.
이 위젯을 통해 여러분의 Flutter 앱에 더 나은 사용자 경험을 제공해 보세요!
참고 글
