[flutter] 플러터 Column을 사용한 데이터 필터링 처리 방법

20 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 데이터를 효과적으로 필터링하여 사용자에게 보여주는 것은 중요한 과제입니다. 앱에서 데이터를 필터링하고 표시하기 위해 Column 위젯을 사용하는 방법에 대해 알아보겠습니다.

Column 위젯 소개

Column 위젯은 세로 방향으로 자식 위젯들을 배치합니다. 주로 사용되는 속성으로는 children, mainAxisAlignment, crossAxisAlignment 등이 있습니다.

데이터 필터링 처리

아래는 간단한 예시 코드이며, Column을 사용하여 데이터를 필터링하여 화면에 보여주는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List<String> dataList = ['Apple', 'Banana', 'Cherry', 'Date'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Data Filtering Example'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: dataList
              .where((data) => data.startsWith('A'))
              .map((filteredData) => Text(filteredData))
              .toList(),
        ),
      ),
    );
  }
}

위 코드에서 dataList는 원본 데이터 리스트입니다. where 메서드를 사용하여 ‘A’로 시작하는 데이터만 필터링하고, 이를 map 메서드를 사용하여 Text 위젯으로 변환하여 Column에 추가하고 있습니다.

이제 위젯을 실행하면 Column을 통해 ‘A’로 시작하는 데이터만 필터링되어 화면에 나타나게 됩니다.

결론

플러터의 Column을 사용하여 데이터를 필터링하여 화면에 표시하는 방법에 대해 알아보았습니다. Column을 이용하면 세로 방향으로 자식 위젯을 배치하고 필요한 필터링을 수행하여 데이터를 효과적으로 화면에 표시할 수 있습니다.

참고 자료: Flutter Column Class