Flutter 如何在索引堆栈之间实现幻灯片转换？

我正在尝试用幻灯片过渡从堆栈上平滑过渡到另一个堆栈上。我将索引设置为计数器，每次按下按钮，它都会递增并移动到下一个堆栈。是否有方法在索引堆栈中的每个堆栈之间创建幻灯片转换

int _counter = 0;

void _incrementCounter() {
    setState(() {

  _counter++;
    }
);
}



   child: IndexedStack(
              index: _counter,
              children: <Widget>[

            Container(

                color: Colors.grey,
                alignment: Alignment.center, // where to position the child
                child: Container(
                  child: Card(
                    elevation: 8.0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Stack(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            "Stack 1",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
            ),
            Container(

                color: Colors.grey,
                alignment: Alignment.center, // where to position the child
                child: Container(
                  child: Card(
                    elevation: 8.0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Stack(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            "Stack 2",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),

                      ],
                    ),
                  ),
                )
            ),
            Container(

                color: Colors.grey,
                alignment: Alignment.center, // where to position the child
                child: Container(
                  child: Card(
                    elevation: 8.0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Stack(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            "Stack 3",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),

                      ],
                    ),
                  ),
                )
            ),
            Container(

                color: Colors.grey,
                alignment: Alignment.center, // where to position the child
                child: Container(
                  child: Card(
                    elevation: 8.0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Stack(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(
                            "Stack 4",
                            style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),

                      ],
                    ),
                  ),
                )
            ),
          ],
        ),
      ),

  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter(),
    tooltip: 'Next page',
    child: Icon(Icons.arrow_forward),
  ),
);

int\u计数器=0；
void _incrementCounter（）{
设置状态（）{
_计数器++；
}
);
}
子：IndexedStack(
索引：_计数器，
儿童：[
容器(
颜色：颜色。灰色，
alignment:alignment.center，//子对象的位置
子：容器(
孩子：卡片(
标高：8.0，
形状：圆形矩形边框(
边界半径：边界半径。圆形（8.0），
),
子：堆栈(
儿童：[
填充物(
填充：常数边集全部（16.0），
子：文本(
“堆栈1”，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.bold，
),
),
),
],
),
),
)
),
容器(
颜色：颜色。灰色，
alignment:alignment.center，//子对象的位置
子：容器(
孩子：卡片(
标高：8.0，
形状：圆形矩形边框(
边界半径：边界半径。圆形（8.0），
),
子：堆栈(
儿童：[
填充物(
填充：常数边集全部（16.0），
子：文本(
“堆栈2”，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.bold，
),
),
),
],
),
),
)
),
容器(
颜色：颜色。灰色，
alignment:alignment.center，//子对象的位置
子：容器(
孩子：卡片(
标高：8.0，
形状：圆形矩形边框(
边界半径：边界半径。圆形（8.0），
),
子：堆栈(
儿童：[
填充物(
填充：常数边集全部（16.0），
子：文本(
“堆栈3”，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.bold，
),
),
),
],
),
),
)
),
容器(
颜色：颜色。灰色，
alignment:alignment.center，//子对象的位置
子：容器(
孩子：卡片(
标高：8.0，
形状：圆形矩形边框(
边界半径：边界半径。圆形（8.0），
),
子：堆栈(
儿童：[
填充物(
填充：常数边集全部（16.0），
子：文本(
“堆栈4”，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.bold，
),
),
),
],
),
),
)
),
],
),
),
浮动操作按钮：浮动操作按钮(
按下时：\ u incrementCounter（），
工具提示：“下一页”，
子：图标（图标。向前箭头），
),
);

---

这是我目前拥有的代码编辑后的帖子

尝试使用

PageController

而不是

IndexedStack

---

签出尝试使用

PageController

而不是

IndexedStack

---

退房

你能给我们看看你到目前为止得到了什么吗？你能给我们看看你到目前为止得到了什么吗？