Dart - IndexedStack

IndexedStack란?

앱 안에서 위젯 간의 간편한 이동을 도와주는 class로 생각하면 좋을 거 같다.
채널을 변환하는 티비와 유사하며, 한 번에 하나의 하위 항목만 보여주지만 모든 항목의 상태를 유지해준다.

어떻게 생성할까?

IndexedStack 위젯 내에서 이동을 워하는 위젯의 항목을 묶어주면 된다.
<에시를 통해 확인 해보자>

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'IndexedStack',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('IndexedStack')),
      body: Center(
        child: IndexedStack(
          index: index,
          children: [
            // Index = 0
            Container(
              width: 400,
              height: 400,
              color: Colors.amber,
              alignment: Alignment.center,
              child: Text(
                '0',
                style: TextStyle(fontSize: 100),
              ),
            ),
            // Index = 1
            Container(
              width: 400,
              height: 400,
              color: Colors.purple,
              alignment: Alignment.center,
              child: Text('1', style: TextStyle(fontSize: 100)),
            ),
            // Index = 2
            Container(
              width: 400,
              height: 400,
              color: Colors.red,
              alignment: Alignment.center,
              child: Text('2', style: TextStyle(fontSize: 100)),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh_rounded),
        onPressed: () {
          setState(() {
            if (index == 2) {
              index = 0;
            } else {
              index = index + 1;
            }
          });
        },
      ),
    );
  }
}

실행 결과 화면