[flutter] 플러터(expandable)을 사용하는 데이터 시각화 앱 개발 방법

04 Dec 2023

flutter

이 튜토리얼에서는 Flutter를 사용하여 Expandable 데이터 시각화 앱을 개발하는 방법에 대해 알아보겠습니다. Expandable은 사용자가 정보를 더 자세히 볼 수 있도록 확장 및 축소할 수 있는 UI 컴포넌트입니다. 이 앱은 리스트 형태로 제공되는 데이터를 보여주고 사용자는 각 항목을 선택하여 상세 정보를 확장하여 볼 수 있습니다.

1. 프로젝트 설정

먼저, Flutter 개발 환경을 설정해야 합니다. Flutter 설치 가이드를 따라하여 Flutter를 설치한 후 프로젝트를 생성합니다.

2. 데이터 모델링

데이터 모델은 앱에서 사용할 데이터를 정의하는 부분입니다. 예를 들어, 사용자 정보를 담은 User 클래스가 있다고 가정해보겠습니다.

class User {
  final String name;
  final String email;
  final String phone;

  User({required this.name, required this.email, required this.phone});
}

3. UI 디자인

UI 디자인을 위해 Flutter의 위젯을 사용합니다. ListTile은 데이터를 리스트 형태로 표시하는 데 유용한 위젯입니다. 이제 ListTile을 사용하여 사용자 정보를 표시하는 UI를 작성해보겠습니다.

ListTile(
  title: Text(user.name),
  subtitle: Text(user.email),
  trailing: Icon(Icons.keyboard_arrow_right),
  onTap: () {
    // 사용자 정보 확장 및 축소 처리
  },
)

4. Expandable 위젯 구현

이제 Expandable 위젯을 구현해야 합니다. Expandable 위젯은 사용자 정보를 확장하고 축소할 수 있는 기능을 제공합니다. Expandable 위젯은 StatelessWidget을 상속받아 구현될 수 있습니다. 다음은 Expandable 위젯의 예시입니다.

class Expandable extends StatelessWidget {
  final Widget header;
  final Widget content;
  bool _expanded = false;

  Expandable({required this.header, required this.content});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          child: header,
          onTap: () {
            setState(() {
              _expanded = !_expanded;
            });
          },
        ),
        if (_expanded) content,
      ],
    );
  }
}

5. 데이터 로딩 및 표시

마지막으로, 데이터를 로딩하고 표시해야 합니다. 데이터를 가져오는 방법은 다양하지만, 가장 간단한 예시로 미리 정의된 사용자 목록을 사용하겠습니다.

List<User> userList = [
  User(name: 'John Doe', email: 'john@doe.com', phone: '123-456-7890'),
  User(name: 'Jane Smith', email: 'jane@smith.com', phone: '987-654-3210'),
];

...

ListView.builder(
  itemCount: userList.length,
  itemBuilder: (BuildContext context, int index) {
    User user = userList[index];
    return Expandable(
      header: ListTile(
        title: Text(user.name),
        subtitle: Text(user.email),
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
      content: Text('Phone: ${user.phone}'),
    );
  },
)

이제 앱을 빌드하고 실행해보면, 사용자 목록이 확장 및 축소되는 기능이 있는 데이터 시각화 앱이 작동하는 것을 확인할 수 있습니다. 이제 필요에 맞게 앱을 커스터마이징하고 다양한 기능을 추가해볼 수 있습니다.

참고자료:

목차

1. 프로젝트 설정

2. 데이터 모델링

3. UI 디자인

4. Expandable 위젯 구현

5. 데이터 로딩 및 표시