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

import 'package:flutter/material.dart';

/// "No Friends" empty-state screen from the Empty States UI Kit: a centred
/// title ("Better with friends"), a cheerful bread-and-jam pair illustration, a
/// short supporting line, and a circular "+" action button pinned near the
/// bottom to add the first friend.
///
/// 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 NoFriendsScreen extends StatelessWidget {
  const NoFriendsScreen({super.key});

  static const Color _ink = Color(0xFF1B3554);
  static const Color _body = Color(0xFF344B67);
  static const Color _mint = Color(0xFF46F5CD);
  static const String _font = 'Inter';
  static const String _image =
      'lib/screens/empty_states/no_friends/images/no_friends_bread_jam.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; height follows the artwork's 844:916 ratio.
            final double imgWidth =
                (constraints.maxWidth * 0.58).clamp(190.0, 300.0);
            final double imgHeight = imgWidth * (916 / 844);

            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(
                          'Better with friends',
                          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: imgWidth,
                          height: imgHeight,
                          fit: BoxFit.contain,
                          filterQuality: FilterQuality.high,
                        ),
                        const Spacer(flex: 1),
                        const Text(
                          "You haven't added any friends yet.\n"
                          'Tap the + button to find and invite people.',
                          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 mint shadow,
/// matching the kit's floating add action for this screen.
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: NoFriendsScreen._mint,
            shape: BoxShape.circle,
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: NoFriendsScreen._mint.withValues(alpha: 0.40),
                blurRadius: 18,
                offset: const Offset(0, 8),
              ),
            ],
          ),
          // Dark glyph on the bright mint button for contrast.
          child: const Icon(Icons.add, color: NoFriendsScreen._ink, size: 28),
        ),
      ),
    );
  }
}