Flutter × UI #08 ~ agexコーポレートサイトをトレースしてみた (ブログアイテム編 part2) ~

class BlogItem extends StatelessWidget {
  BlogItem({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomIn( // 「ZoomIn」Widgetでブログアイテムをラップする
        duration: Duration(milliseconds: 300), // durationを設定
        child: ConstrainedBox(
          constraints: const BoxConstraints.expand(
            width: 370,
            height: 380,
          ),
        
          ・
          ・
          ・

        ),
      ),
    );
  }
}

Stack(
  children: [
    Positioned(
      left: 70,
      top: 0,
      child: MouseRegion(
        onEnter: (detail) => _onEnterHandler(detail, context),
        onExit: (detail) => _onExitHandler(detail, context),
        child: Container( // アイキャッチ要素
          width: 300,
          height: 250,
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(‘lib/assets/images/eyecatch.png’),
            ),
          ),
        ),
      ),
    ),
    Positioned(
      left: 0,
      top: 180,
      child: MouseRegion(
        onEnter: (detail) => _onEnterHandler(detail, context),
        onExit: (detail) => _onExitHandler(detail, context),
        child: Container( // タイトル要素
          width: 300,
          height: 200,
          color: Colors.lightBlue[300],
          child: Center(
            child: Text(
              “Title”,
              style: TextStyle(
                color: Colors.white,
                fontSize: 40
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

void _onEnterHandler(PointerEvent details, BuildContext context) {
  // ズームイン
}

void _onExitHandler(PointerEvent details, BuildContext context) {
  // ズームアウト
}

// StatefulWidgetに変更
class BlogItem extends StatefulWidget {
  BlogItem({Key key}) : super(key: key);

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

class _BlogItemState extends State with TickerProviderStateMixin {
  AnimationController zoomController;
  Animation zoomAnimation;
  Animation zoomCurvedAnimation;

  @override
  void initState() {
    super.initState();
    zoomController = AnimationController(
      duration: const Duration(milliseconds: 50),
      vsync: this,
    );

    zoomController.addListener(() {
      setState(() {});
    });

    zoomCurvedAnimation = CurvedAnimation(
      parent: zoomController,
      curve: Curves.linear,
    );

    zoomAnimation = Tween(
      begin: 1.0,
      end: 1.03,
    ).animate(zoomCurvedAnimation);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Transform.scale(
        scale: zoomAnimation.value,
        child: ZoomIn(
        
          ・
          ・
          ・

        ),
      ),
    );
  }

  void _onEnterHandler(PointerEvent details, BuildContext context) {
    zoomController.stop();
    zoomController.forward();
  }

  void _onExitHandler(PointerEvent details, BuildContext context) {
    zoomController.stop();
    zoomController.reverse();
  }
}