[flutter] 플러터(IndexedStack)에서 인덱스를 동적으로 추가 또는 삭제하는 방법은 무엇인가요?

07 Dec 2023

flutter

인덱스를 동적으로 추가하거나 삭제하기 위해서는 IndexedStack 위젯의 자식 리스트를 업데이트해야 합니다. 이를 위해 StatefulWidget을 사용해서 상태를 관리하고, setState 메소드를 호출하여 인덱스 변경시에 위젯을 다시 그려야 합니다.

예를 들어, 다음과 같이 IndexedStack 위젯과 관련한 StatefulWidget 클래스를 정의할 수 있습니다:

class DynamicIndexedStack extends StatefulWidget {
  @override
  _DynamicIndexedStackState createState() => _DynamicIndexedStackState();
}

class _DynamicIndexedStackState extends State<DynamicIndexedStack> {
  List<Widget> _children = [
    Text('Index 0'),
  ];
  int _currentIndex = 0;

  void addWidget() {
    setState(() {
      _children.add(Text('Index ${_children.length}'));
    });
  }

  void removeWidget() {
    setState(() {
      if (_children.length > 1) {
        _children.removeLast();
        if (_currentIndex >= _children.length) {
          _currentIndex = _children.length - 1;
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IndexedStack(
          index: _currentIndex,
          children: _children,
        ),
        RaisedButton(
          onPressed: addWidget,
          child: Text('Add Widget'),
        ),
        RaisedButton(
          onPressed: removeWidget,
          child: Text('Remove Widget'),
        ),
      ],
    );
  }
}

위의 예제에서는 _children 리스트로 자식 위젯들을 관리하고, _currentIndex 변수로 현재 보여지는 위젯의 인덱스를 관리합니다. addWidget 메소드는 _children 리스트에 새로운 위젯을 추가하고, removeWidget 메소드는 _children 리스트에서 마지막 위젯을 삭제합니다. 만약 현재 인덱스가 삭제된 위젯의 인덱스보다 크다면, _currentIndex 변수를 조정하여 보여지는 위젯이 변경되도록 합니다.

이제 DynamicIndexedStack 위젯을 사용하면, Add Widget 버튼을 누르면 새로운 Text 위젯이 추가되고, Remove Widget 버튼을 누르면 마지막 위젯이 삭제됩니다.

더 복잡한 동적 인덱스 처리를 위해서는 별도의 로직을 추가하여 인덱스를 관리할 수 있습니다. 위 예제는 간단한 예시일 뿐이므로, 필요에 따라 추가적인 로직을 구현하셔야 합니다.

더 자세한 내용은 Flutter 공식 문서의 IndexedStack를 참조하시기 바랍니다.