flutter - KeyedSubtree 사용

[정의]

KeyedSubtree는 Flutter에서 사용되는 위젯으로, 특정 키를 가진 서브트리를 나타낸다. 이는 주로 상태를 유지하면서 위젯 트리를 재구성할 때 사용 되어 지는데  KeyedSubtree는 위젯 트리의 특정 부분이 재구성될 때, 해당 부분의 상태를 유지하기 위해 사용된다.

 

KeyedSubtree는 다음과 같은 상황에서 유용하다.

• 위젯 트리의 구조가 변경될 때 특정 서브트리의 상태를 유지하고 싶을 때
• 위젯 트리의 일부를 재사용하거나 변경할 때 키를 통해 이를 식별하고 관리하고 싶을 때

[예제] 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('KeyedSubtree 예제')),
        body: ReorderableListExample(),
      ),
    );
  }
}

class ReorderableListExample extends StatefulWidget {
  @override
  _ReorderableListExampleState createState() => _ReorderableListExampleState();
}

class _ReorderableListExampleState extends State<ReorderableListExample> {
  final List<String> items = List<String>.generate(10, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          final String item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
        });
      },
      children: List.generate(items.length, (index) {
        return KeyedSubtree(
          key: ValueKey(items[index]),
          child: ListTile(
            key: ValueKey(items[index]),
            title: Text(items[index]),
          ),
        );
      }),
    );
  }
}

 

• ReorderableListView 위젯을 사용하여 리스트 항목을 드래그 앤 드롭으로 재정렬할 수 있게 하는 클래스를 만든다.
•  items 리스트는 초기 데이터로 10개의 항목을 가지고 있다. 
• onReorder 콜백 함수는 항목이 재정렬될 때 호출되며, 항목의 위치를 업데이트하는 역할.
•  List.generate를 사용하여 리스트의 각 항목을 생성한다. 
• 각 항목은 KeyedSubtree로 래핑되며, ValueKey를 사용하여 고유하게 식별하고, 이렇게 하면 항목이 재정렬될 때도 각 항목의 상태가 유지된다.