Flutter × UI #06 ~ agexコーポレートサイトをトレースしてみた (スライダー編 part5) ~

List titleList = [
  ‘page1’,
  ‘scene2’,
  ‘item3’,
];

AnimatedSwitcher(
  duration: Duration(seconds: 1),
  child: Container(
    key: ValueKey(i), // iはタイマーで遷移させる
    width: 200,
    child: Text(
      titleList[i],
      style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
    ),
  ),
),

class ItemInfo extends StatelessWidget {
  final itemCount;
  final tIndex;

  ItemInfo({Key key, this.itemCount, this.tIndex}) : super(key: key);

  final List titleList = [
    ‘page1’,
    ‘scene2’,
    ‘item3’,
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: AnimatedSwitcher(
        duration: Duration(seconds: 1),
        child: Container(
          key: ValueKey(itemCount – tIndex), // iはタイマーで遷移させる
          width: 400,
          child: Text(
            titleList[itemCount – tIndex],
            style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

class CustomButton extends StatefulWidget {
  final onPressHandler; // tIndexを変化させるメソッドを受け取る。ボタン押下時にコールする。

  const CustomButton({Key key, this.onPressHandler}) : super(key: key);

  @override
  _CustomButtonState createState() => _CustomButtonState();
}

class _CustomButtonState extends State {
  double position = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 45,
      height: 45,
      child: Stack(
        alignment: Alignment.center,
        children: [
          AnimatedPositioned(
            right: position,  // この「position」の値を変化させることで、ボタンの移動を実現する。
            duration: Duration(milliseconds: 100),
            child: IconButton(
              icon: MouseRegion(
                onEnter: (details) => _onEnterHandler(details, context),
                onExit: (details) => _onExitHandler(details, context),
                child: Icon(
                  Icons.arrow_back_ios,
                ),
              ),
              iconSize: 30,
              onPressed: () {
                /* tIndexを変化させるメソッドをコールする */
                widget.onPressHandler();
              },
              focusColor: Colors.transparent,
              hoverColor: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }

  void _onEnterHandler(PointerEvent details, BuildContext context) {
    position = 5;
    setState(() {});
  }

  void _onExitHandler(PointerEvent details, BuildContext context) {
    position = 0;
    setState(() {});
  }
}

Row(
  children: [
    // 「アイテム説明」Widget
    ItemInfo(
      itemCount: itemCount,
      tIndex: tIndex,
    ),
     //「スライドボタン（左側）」Widget
    CustomBackButton(
      onPressHandler: _onPressBackHandler,
    ),
     //「スライドボタン（左側）」Widget
    CustomForwardButton(
      onPressHandler: _onPressForwardHandler,
    ),
  ],
)

// tIndexを-1後、タイマーをリセット
void _onPressForwardHandler() {
  tIndex = (tIndex == 1) ? widget.itemCount : tIndex = tIndex – 1;
  timer.cancel();
  timer = Timer.periodic(
    Duration(seconds: 3),
    _timerHandler,
  );
  setState(() {});
}

// tIndexを+1後、タイマーをリセット
void _onPressBackHandler() {
  tIndex = (tIndex == widget.itemCount) ? 1 : tIndex + 1;
  timer.cancel();
  timer = Timer.periodic(
    Duration(seconds: 3),
    _timerHandler,
  );
  setState(() {});
}