stamp_folder_widget #

English | 简体中文

A reusable Flutter package for rendering a stylized stamp folder artwork with a rounded back panel, a frosted front pocket, and three configurable stamp images.

Features #

• Reusable Flutter package API
• Configurable overall size
• Configurable front pocket colors
• Configurable back panel colors
• Configurable external stamp image source, position, size, rotation, and tint
• Supports AssetImage, NetworkImage, and other ImageProvider sources
• Example app included

Installation #

dependencies:
  stamp_folder_widget: ^1.0.0

For local development:

dependencies:
  stamp_folder_widget:
    path: ../stamp_folder_widget

Usage #

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

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

  @override
  Widget build(BuildContext context) {
    final stamps = StampFolderWidget.buildDefaultStamps(
      imageProvider: const AssetImage('assets/example.webp'),
    );

    return Center(
      child: StampFolderWidget(width: 760, stamps: stamps),
    );
  }
}

You can customize the artwork with size, panel colors, labels, and stamp layout:

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

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

  @override
  Widget build(BuildContext context) {
    final baseImage = const AssetImage('assets/example.webp');
    final stamps = StampFolderWidget.buildDefaultStamps(
      imageProvider: baseImage,
    );
    final customizedStamps = [
      stamps[0],
      stamps[1].copyWith(
        leftFactor: 0.41,
        tint: const Color(0x3378A66A),
      ),
      stamps[2].copyWith(
        rightFactor: 0.16,
        topFactor: 0.245,
      ),
    ];

    return Center(
      child: StampFolderWidget(
        width: 820,
        title: 'STAMP',
        subtitle: 'Collection',
        frontPanelColors: const [
          Color(0xFFF7F0E3),
          Color(0xFFE8DFC7),
          Color(0xFFF7F2EA),
        ],
        backPanelColors: const [
          Color(0xFFF8F2E6),
          Color(0xFFF1E7D6),
          Color(0xFFFBF7F0),
        ],
        stamps: customizedStamps,
      ),
    );
  }
}

Main API #

• StampFolderWidget
• StampFolderStampData

Configurable Parameters #

Widget Size #

• width: outer widget width
• height: outer widget height
• aspectRatio: overall layout ratio when height is not fixed
• padding: inner spacing around the artwork

Folder Appearance #

• frontPanelColors: gradient colors for the frosted front pocket
• backPanelColors: gradient colors for the rear panel
• title: main label on the front pocket
• subtitle: secondary label on the front pocket
• labelColor: text and leaf decoration color
• showLeafDecoration: whether to show the leaf decoration

Stamp Configuration #

Pass exactly 3 StampFolderStampData items to stamps.

Each StampFolderStampData supports:

• imageProvider
• leftFactor
• rightFactor
• topFactor
• widthFactor
• heightFactor
• rotation
• tint
• fit
• borderRadius

Notes #

• The widget expects exactly 3 stamp items when stamps is provided.
• If fewer than 3 panel colors are passed, the package automatically resolves them into a usable gradient set.
• The package no longer bundles a built-in stamp image. Provide your own image source from the host app.
• The example app in example/lib/main.dart shows a complete package usage setup.

Development #

flutter analyze
flutter test