How to Build a Watch Tutorial Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/tutorial_card.dart';

/// "Watch Tutorial" screen from the Wallet App UI Kit (Finco): a video card,
/// heading + supporting copy, a blue "Let's Create an account" CTA and a
/// "Sign In" link.
///
/// Self-contained, pure Flutter. Bundles its exact design font (Aileron) and
/// the kit's original play-button drawables. Fully responsive — flex spacers
/// centre the content on tall devices and a scroll fallback prevents overflow
/// on short ones. Renders standalone when pushed as a route.
class WalletWatchTutorialScreen extends StatelessWidget {
  const WalletWatchTutorialScreen({super.key});

  static const Color _ink = Color(0xFF29304D);
  static const Color _blue = Color(0xFF4F62C0);
  static const Color _muted = Color(0xFF323232);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            final double cardWidth =
                (constraints.maxWidth * 0.72).clamp(220.0, 300.0);

            return SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: constraints.maxHeight),
                child: IntrinsicHeight(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        const Spacer(flex: 3),
                        TutorialCard(width: cardWidth, onTap: () {}),
                        const Spacer(flex: 4),
                        const Text(
                          'Watch Tutorial',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: 'Aileron',
                            fontWeight: FontWeight.w700,
                            fontSize: 35,
                            height: 1.2,
                            color: _ink,
                          ),
                        ),
                        const SizedBox(height: 21),
                        const Text(
                          'If you are new on this and need\n'
                          'help, watch this short tutorial clip to\n'
                          'get started.',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: 'Aileron',
                            fontWeight: FontWeight.w400,
                            fontSize: 20,
                            height: 1.45,
                            color: _ink,
                          ),
                        ),
                        const Spacer(flex: 5),
                        _PrimaryButton(
                          label: 'Let’s Create an account',
                          onTap: () {},
                        ),
                        const SizedBox(height: 28),
                        GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {},
                          child: const Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 4,
                            ),
                            child: Text(
                              'Already have an account? - Sign In',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontFamily: 'Aileron',
                                fontWeight: FontWeight.w400,
                                fontSize: 15,
                                color: _muted,
                              ),
                            ),
                          ),
                        ),
                        const Spacer(flex: 2),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class _PrimaryButton extends StatefulWidget {
  const _PrimaryButton({required this.label, required this.onTap});

  final String label;
  final VoidCallback onTap;

  @override
  State<_PrimaryButton> createState() => _PrimaryButtonState();
}

class _PrimaryButtonState extends State<_PrimaryButton> {
  bool _pressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _pressed = true),
      onTapUp: (_) => setState(() => _pressed = false),
      onTapCancel: () => setState(() => _pressed = false),
      onTap: widget.onTap,
      child: AnimatedScale(
        scale: _pressed ? 0.98 : 1,
        duration: const Duration(milliseconds: 150),
        child: Container(
          width: double.infinity,
          margin: const EdgeInsets.symmetric(horizontal: 32),
          padding: const EdgeInsets.symmetric(vertical: 20),
          decoration: BoxDecoration(
            color: WalletWatchTutorialScreen._blue,
            borderRadius: BorderRadius.circular(15),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: WalletWatchTutorialScreen._blue.withValues(alpha: 0.30),
                blurRadius: 18,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Text(
            widget.label,
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontFamily: 'Aileron',
              fontWeight: FontWeight.w700,
              fontSize: 17,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}