design_widgets 0.1.0

Flutter widgets for design layers, with stacked fills, strokes and effects.

example/lib/main.dart

import 'package:flutter/widgets.dart';
import 'package:design_widgets/design_widgets.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await DesignFonts.load();
  runApp(const ExampleApp());
}

enum ExampleFont implements FontName {
  regular('Roboto', 'Regular'),
  bold('Roboto', 'Bold');

  const ExampleFont(this.family, this.style);

  @override
  final String family;

  @override
  final String style;
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      title: 'design_widgets',
      color: const Color(0xFF3B5BDB),
      debugShowCheckedModeBanner: false,
      builder: (context, _) => const ExamplePage(),
    );
  }
}

/// Every example, one under another.
class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const ColoredBox(
      color: Color(0xFFF4F6FB),
      child: Center(
        child: SingleChildScrollView(
          padding: .all(24),
          child: Column(
            spacing: 40,
            children: [GetStartedButton(), GradientBadges(), BlurredCard()],
          ),
        ),
      ),
    );
  }
}

/// A pill button: a gradient fill, an outside stroke, a highlight inside, a drop shadow and outlined text.
class GetStartedButton extends StatelessWidget {
  const GetStartedButton({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 280,
      height: 72,
      child: Stack(
        alignment: .center,
        children: [
          DesignRectangle(
            appearance: ShapeAppearance(cornerRadius: .all(36)),
            fill: [
              .linearGradient(
                stops: [
                  GradientStop(0, HexColor(0x5C7CFA)),
                  GradientStop(100, HexColor(0x3B5BDB)),
                ],
              ),
            ],
            stroke: Stroke(
              fill: [.solid(HexColor(0x1E3A8A))],
              weight: 3,
              align: .outside,
            ),
            effects: [
              .dropShadow(
                position: Position(y: 4),
                blur: 10,
                color: HexColor(0x1E3A8A, opacity: 35),
              ),
              .innerShadow(
                position: Position(y: 4),
                blur: 2,
                color: HexColor(0xFFFFFF, opacity: 45),
              ),
            ],
          ),
          DesignText(
            'Get started',
            fontName: ExampleFont.bold,
            fontSize: 28,
            textAlignHorizontal: .center,
            verticalTrim: .capHeightToBaseline,
            fill: [.solid(HexColor(0xFFFFFF))],
            stroke: Stroke(
              fill: [.solid(HexColor(0x1E3A8A))],
              weight: 2,
              align: .outside,
            ),
            effects: [
              .dropShadow(position: Position(y: 2), color: HexColor(0x172554)),
            ],
          ),
        ],
      ),
    );
  }
}

/// Linear and radial gradients placed by handles, the radial one over a solid fill.
class GradientBadges extends StatelessWidget {
  const GradientBadges({super.key});

  @override
  Widget build(BuildContext context) {
    return const Row(
      mainAxisSize: .min,
      spacing: 24,
      children: [
        SizedBox.square(
          dimension: 120,
          child: DesignRectangle(
            appearance: ShapeAppearance(
              cornerRadius: .all(28),
              cornerSmoothing: 100,
            ),
            fill: [
              .linearGradient(
                begin: GradientHandle(0, 0),
                end: GradientHandle(1, 1),
                stops: [
                  GradientStop(0, HexColor(0xFE8469)),
                  GradientStop(100, HexColor(0xF05C3A)),
                ],
              ),
            ],
          ),
        ),
        SizedBox.square(
          dimension: 120,
          child: DesignRectangle(
            appearance: ShapeAppearance(cornerRadius: .all(60)),
            fill: [
              .radialGradient(
                center: GradientHandle(0.3, 0.3),
                end: GradientHandle(1, 1),
                width: GradientHandle(-0.4, 1),
                stops: [
                  GradientStop(0, HexColor(0xFFFFFF, opacity: 60)),
                  GradientStop(100, HexColor(0xFFFFFF, opacity: 0)),
                ],
              ),
              .solid(HexColor(0x4B6BFB)),
            ],
            stroke: Stroke(
              fill: [.solid(HexColor(0x2C3FA8))],
              weight: 2,
              align: .inside,
            ),
          ),
        ),
      ],
    );
  }
}

/// A progressive layer blur: sharp at the top, blurred toward the bottom.
class BlurredCard extends StatelessWidget {
  const BlurredCard({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 326,
      height: 120,
      child: Stack(
        alignment: .center,
        children: [
          DesignRectangle(
            appearance: ShapeAppearance(
              cornerRadius: .all(16),
              cornerSmoothing: 60,
            ),
            fill: [.solid(HexColor(0x1E1E2E))],
            effects: [.progressiveBlur(endBlur: 12)],
          ),
          DesignText(
            'Progressive blur',
            fontName: ExampleFont.regular,
            fontSize: 24,
            letterSpacing: .percent(2),
            textAlignHorizontal: .center,
            fill: [.solid(HexColor(0xF5F5F5))],
            effects: [.progressiveBlur(endBlur: 6)],
          ),
        ],
      ),
    );
  }
}