How to Build a No Events Empty State in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// "No Events" empty-state screen from the Empty States UI Kit: a centred title
/// ("Nothing to do"), a hand-highlighting-a-calendar illustration, a short
/// supporting line, and a circular "+" action button pinned near the bottom to
/// create the first event.
///
/// Self-contained, pure Flutter. Bundles its design font (Inter) and the kit's
/// original illustration (converted to WebP). 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 NoEventsScreen extends StatelessWidget {
  const NoEventsScreen({super.key});

  static const Color _ink = Color(0xFF1B3554);
  static const Color _body = Color(0xFF344B67);
  static const Color _blue = Color(0xFF4476FF);
  static const String _font = 'Inter';
  static const String _image =
      'lib/screens/empty_states/no_events/images/no_events_calendar.webp';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            // Illustration scales to the viewport width within a sensible
            // range; the artwork is square (812:812).
            final double imgSize =
                (constraints.maxWidth * 0.58).clamp(190.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: 2),
                        const Text(
                          'Nothing to do',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: _font,
                            fontWeight: FontWeight.w500,
                            fontSize: 21,
                            height: 1.2,
                            color: _ink,
                          ),
                        ),
                        const Spacer(flex: 1),
                        Image.asset(
                          _image,
                          width: imgSize,
                          height: imgSize,
                          fit: BoxFit.contain,
                          filterQuality: FilterQuality.high,
                        ),
                        const Spacer(flex: 1),
                        const Text(
                          'You have no events scheduled yet.\n'
                          'Tap the + button to create your first one.',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: _font,
                            fontWeight: FontWeight.w500,
                            fontSize: 16,
                            height: 1.37,
                            color: _body,
                          ),
                        ),
                        const Spacer(flex: 3),
                        const _AddButton(),
                        const SizedBox(height: 34),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

/// Circular "+" button with a pressed-scale animation and a soft brand-blue
/// shadow, matching the kit's floating add action.
class _AddButton extends StatefulWidget {
  const _AddButton();

  @override
  State<_AddButton> createState() => _AddButtonState();
}

class _AddButtonState extends State<_AddButton> {
  bool _pressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _pressed = true),
      onTapUp: (_) => setState(() => _pressed = false),
      onTapCancel: () => setState(() => _pressed = false),
      onTap: () {},
      child: AnimatedScale(
        scale: _pressed ? 0.94 : 1,
        duration: const Duration(milliseconds: 150),
        child: Container(
          width: 64,
          height: 64,
          decoration: BoxDecoration(
            color: NoEventsScreen._blue,
            shape: BoxShape.circle,
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: NoEventsScreen._blue.withValues(alpha: 0.35),
                blurRadius: 18,
                offset: const Offset(0, 8),
              ),
            ],
          ),
          child: const Icon(Icons.add, color: Colors.white, size: 28),
        ),
      ),
    );
  }
}