EP.22 Introduction Page Using Flutter

January 23, 2022

Overview

Today we build an squid game themed introduction page using simple animation library and using Flutter

Source Code

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';

class IntroPage extends StatefulWidget {
  const IntroPage({Key? key}) : super(key: key);

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

enum AniProps { translateY, opacity }

class _IntroPageState extends State<IntroPage> {
  @override
  Widget build(BuildContext context) {
    final imageHeight = MediaQuery.of(context).size.height / 1.5;

    return Scaffold(
      body: Stack(
        children: [
          PlayAnimation<double>(
            tween: Tween(begin: 0.05, end: 1),
            duration: const Duration(seconds: 2),
            builder: (context, child, value) {
              return Positioned(
                height: imageHeight,
                width: MediaQuery.of(context).size.width,
                child: Opacity(
                  opacity: value,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black,
                      borderRadius: BorderRadius.circular(12),
                      image: const DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                          'https://images.unsplash.com/photo-1634152962476-4b8a00e1915c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8c3F1aWQlMjBnYW1lc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60',
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
          PlayAnimation<MultiTweenValues<AniProps>>(
            tween: getTween(imageHeight, 40, 15),
            duration: const Duration(milliseconds: 500),
            builder: (context, child, value) {
              return Positioned(
                top: value.get(AniProps.translateY),
                height: 50,
                width: MediaQuery.of(context).size.width,
                child: Opacity(
                  opacity: value.get(AniProps.opacity),
                  child: const Text(
                    "Welcome to",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              );
            },
          ),
          PlayAnimation<MultiTweenValues<AniProps>>(
            tween: getTween(imageHeight, 80, 55),
            duration: const Duration(milliseconds: 500),
            delay: const Duration(milliseconds: 500),
            builder: (context, child, value) {
              return Positioned(
                top: value.get(AniProps.translateY),
                height: 50,
                width: MediaQuery.of(context).size.width,
                child: Opacity(
                  opacity: value.get(AniProps.opacity),
                  child: const Text(
                    "SQUID GAMES",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              );
            },
          ),
          PlayAnimation<MultiTweenValues<AniProps>>(
            tween: getTween(imageHeight, 120, 110),
            duration: const Duration(milliseconds: 500),
            delay: const Duration(seconds: 1),
            builder: (context, child, value) {
              return Positioned(
                top: value.get(AniProps.translateY),
                height: 50,
                width: MediaQuery.of(context).size.width,
                child: Opacity(
                  opacity: value.get(AniProps.opacity),
                  child: const Text(
                    "Are you brave enough? Continue if you dare!",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 22,
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ),
              );
            },
          ),
          PlayAnimation<MultiTweenValues<AniProps>>(
            tween: getTween(imageHeight, 200, 190),
            duration: const Duration(milliseconds: 500),
            delay: const Duration(seconds: 2),
            builder: (context, child, value) {
              return Positioned(
                top: value.get(AniProps.translateY),
                height: 50,
                width: MediaQuery.of(context).size.width,
                child: Opacity(
                  opacity: value.get(AniProps.opacity),
                  child: Container(
                    alignment: Alignment.center,
                    margin: const EdgeInsets.symmetric(horizontal: 20),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      border: Border.all(color: Colors.red),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: const Text(
                      'Continue',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 22,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  getTween(imgHeight, begin, end) {
    return MultiTween<AniProps>()
      ..add(
          AniProps.translateY,
          Tween(begin: imgHeight + begin, end: imgHeight + end),
          const Duration(seconds: 1))
      ..add(AniProps.opacity, Tween(begin: 0.0, end: 1.0),
          const Duration(seconds: 1));
  }
}