[Flutter] IndexedStack 사용법 예시

IndexedStack에서 메뉴를 두 번 누를 때 특정 위치로 이동하려면 각 메뉴에 해당하는 페이지를 따로 관리하고, 누적된 누름의 상태를 확인하여 특정 위치로 이동하면 됩니다. 아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyIndexedStack(),
    );
  }
}

class MyIndexedStack extends StatefulWidget {
  @override
  _MyIndexedStackState createState() => _MyIndexedStackState();
}

class _MyIndexedStackState extends State<MyIndexedStack> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IndexedStack Example'),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          FirstPage(),
          SecondPage(),
          ThirdPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Page 3',
          ),
        ],
        onTap: (index) {
          setState(() {
            // 두 번 누르면 특정 위치로 이동
            if (_currentIndex == index) {
              // 특정 위치로 이동하는 코드를 작성하세요.
              // 여기서는 페이지 맨 위로 이동하도록 하였습니다.
              _scrollToTop();
            }
            _currentIndex = index;
          });
        },
      ),
    );
  }

  // 특정 위치로 이동하는 함수 예시 (페이지 맨 위로 이동)
  void _scrollToTop() {
    // 각 페이지에 해당하는 스크롤 컨트롤러 등을 활용하여 원하는 위치로 이동
    // 예를 들어, FirstPage에서 사용하는 스크롤 컨트롤러를 이용하여 이동 가능
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: List.generate(
          30,
          (index) => ListTile(
            title: Text('Item $index'),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Second Page'),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Third Page'),
    );
  }
}

이 예제에서는 IndexedStack를 이용하여 여러 페이지를 관리하고, BottomNavigationBar를 통해 각 페이지로 이동하게 되어 있습니다. 특정 위치로 이동하는 부분은 _scrollToTop 함수에서 원하는 동작을 수행하도록 구현할 수 있습니다.