How to Build an Order Success Screen in Flutter (Full Code + Preview)
Checkout ends the moment the payment clears, but the shopper still needs three facts fast: it worked, which order it is, and when the box arrives. This tutorial builds StyleCart's Order Placed screen in Flutter — a 168px painted badge with a green tick inside a confetti burst, two rounded meta cells carrying the order ID and the arrives-by date, a summary card whose product thumbnails overlap by 20px, and a pinned footer that ranks Track order above Continue shopping.
What you'll build
- ✓A 168×168 CustomPaint badge: soft green disc, solid green circle, stroked white tick, eight confetti shards fired outward at fixed angles
- ✓A two-up meta row of Order ID and Arrives-by cells sharing width through Expanded
- ✓A summary card with three 56px thumbnails stacked in a Stack at 20px offsets, each ringed in a 2px white border
- ✓An order line pairing '4 items · $372.69' with the masked card that paid for it
- ✓A pinned footer that separates Track order (filled coral) from Continue shopping (outlined ink)
Step-by-step build
Create the file
Add a new file at lib/ecom_order_success/ecom_order_success_screen.dart in your Flutter project.
Register the bundled fonts
No external packages — this is pure Flutter. It does bundle its design font (Manrope), so drop the font file into fonts/ and declare it in pubspec.yaml:
flutter:
fonts:
- family: Manrope
fonts:
- asset: fonts/Manrope-Regular.ttfBuild it, piece by piece
Here's how the screen goes together. Each block below is a real slice of the code with a plain-English explanation — paste them in order, or grab the whole file from the next section.
Tokens, three callbacks, and the thumbnail manifest
import 'dart:math' as math;
import 'package:flutter/material.dart';
/// StyleCart — Order Placed.
///
/// The celebratory confirmation after a successful checkout: a painted success
/// check inside a burst of confetti, the order ID + estimated arrival, a compact
/// summary card with stacked item thumbnails, and two CTAs — track the order or
/// keep shopping.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// Airbnb-style tokens, own light theme + SafeArea, bundled webp. The check and
/// confetti are CustomPainters (no emoji glyph, no network). Exposes callbacks
/// only.
class EcomOrderSuccessScreen extends StatelessWidget {
const EcomOrderSuccessScreen({
super.key,
this.onTrack,
this.onContinue,
this.onViewOrder,
});
final VoidCallback? onTrack;
final VoidCallback? onContinue;
final VoidCallback? onViewOrder;
static const String _font = 'Manrope';
static const Color _canvas = Color(0xFFFFFFFF);
static const Color _ink = Color(0xFF222222);
static const Color _muted = Color(0xFF6A6A6A);
static const Color _brand = Color(0xFFFF385C);
static const Color _surface = Color(0xFFF2F2F2);
static const Color _imageBg = Color(0xFFF5F5F5);
static const Color _hairline = Color(0xFFEBEBEB);
static const String _dir = 'lib/screens/ecommerce/ecom_order_success/images';
static const List<String> _thumbs = <String>['p01.webp', 'p02.webp', 'p03.webp'];
`EcomOrderSuccessScreen` is a `StatelessWidget` exposing `onTrack`, `onContinue` and `onViewOrder` and nothing else — the confirmation is a terminal state, so there is nothing on it to mutate. Note that `_brand` `#FF385C` coral is declared here but the success badge is painted green inside `_SuccessBurstPainter` instead; the shop's identity colour marks actions, while completion gets the colour people already read as 'done'. `_thumbs` lists three webp filenames and `_dir` points at a bundled asset folder, so the card renders offline with no network call and no placeholder flicker. `dart:math` is imported as `math` purely for the confetti's `cos`/`sin`.
A scrolling body above a footer that never moves
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.light(useMaterial3: true),
child: Scaffold(
backgroundColor: _canvas,
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
padding: const EdgeInsets.fromLTRB(28, 16, 28, 20),
children: <Widget>[
const SizedBox(height: 24),
Center(
child: SizedBox(
width: 168,
height: 168,
child: CustomPaint(painter: _SuccessBurstPainter()),
),
),
const SizedBox(height: 28),
const Text(
'Order placed!',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _font,
fontSize: 26,
fontWeight: FontWeight.w800,
letterSpacing: -0.5,
color: _ink,
),
),
const SizedBox(height: 8),
const Text(
'Thanks, Aria — we’ve received your order and the '
'store is getting it ready.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _font,
fontSize: 14.5,
fontWeight: FontWeight.w500,
height: 1.5,
color: _muted,
),
),
const SizedBox(height: 24),
_metaRow(),
const SizedBox(height: 16),
_summaryCard(),
],
),
),
_actions(),
],
),
),
),
);
}`build` wraps everything in `Theme(data: ThemeData.light(useMaterial3: true))` so the screen keeps its own light palette even if the host app runs dark — a confirmation dropped into an unknown theme should not gamble on contrast. The `SafeArea` holds a `Column` whose first child is `Expanded(child: ListView(...))` and whose second is `_actions()`: the celebratory content scrolls when a small phone runs out of room, while the buttons stay welded to the bottom. Padding of `fromLTRB(28, 16, 28, 20)` gives generous 28px side gutters, and the headline is 26px `w800` at `letterSpacing: -0.5` with the thank-you line beneath it at 14.5px, `height: 1.5`.
Order ID and arrival date as equal cells
Widget _metaRow() {
return Row(
children: <Widget>[
Expanded(
child: _metaCell('Order ID', '#SC-48213', Icons.tag_rounded),
),
const SizedBox(width: 12),
Expanded(
child: _metaCell(
'Arrives by', 'Thu, 18 Jun', Icons.local_shipping_outlined),
),
],
);
}
Widget _metaCell(String label, String value, IconData icon) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(icon, size: 18, color: _brand),
const SizedBox(height: 10),
Text(
label,
style: const TextStyle(
fontFamily: _font,
fontSize: 11.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.2,
color: _muted,
),
),
const SizedBox(height: 2),
Text(
value,
style: const TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
],
),
);
}`_metaRow` puts two `_metaCell` calls in `Expanded` wrappers with a 12px gap, so each takes exactly half the width no matter how long '#SC-48213' or 'Thu, 18 Jun' turns out to be. Inside a cell the stack is icon, label, value: an 18px `Icons.tag_rounded` or `Icons.local_shipping_outlined` tinted `_brand`, then the label at 11.5px `w600` with `letterSpacing: 0.2` in `_muted`, then the value at 15px `w800` in `_ink`, separated by only 2px. That tight pairing is what makes label and value read as one unit. The `_surface` `#F2F2F2` fill with `BorderRadius.circular(16)` needs no border — the tint alone separates the cells from white.
Overlapping thumbnails and the receipt line
Widget _summaryCard() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _hairline),
),
child: Row(
children: <Widget>[
SizedBox(
width: 96,
height: 56,
child: Stack(
children: <Widget>[
for (int i = 0; i < _thumbs.length; i++)
Positioned(
left: i * 20.0,
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: _imageBg,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: _canvas, width: 2),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'$_dir/${_thumbs[i]}',
fit: BoxFit.cover,
),
),
),
),
],
),
),
const SizedBox(width: 14),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'4 items · \$372.69',
style: TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
SizedBox(height: 3),
Text(
'Paid with Visa •••• 4291',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w500,
color: _muted,
),
),
],
),
),
GestureDetector(
onTap: onViewOrder,
child: const Text(
'View',
style: TextStyle(
fontFamily: _font,
fontSize: 13.5,
fontWeight: FontWeight.w700,
color: _brand,
),
),
),
],
),
);
}The summary card is white with a `_hairline` border rather than a tint, so it sits visually below the two filled meta cells. The thumbnail cluster is a fixed `SizedBox(width: 96, height: 56)` holding a `Stack`; a `for` loop positions each 56px tile at `left: i * 20.0`, so three tiles overlap into 96px instead of 168px. Each tile carries `Border.all(color: _canvas, width: 2)` at radius 12 with the image clipped at radius 10 — the white ring is what separates one thumbnail from the one behind it. Beside them, '4 items · \$372.69' and 'Paid with Visa •••• 4291' answer what was bought and what paid for it, and a `GestureDetector` turns 'View' into a coral text link to the full order.
Two exits, ranked by what happens next
Widget _actions() {
return Container(
decoration: const BoxDecoration(
color: _canvas,
border: Border(top: BorderSide(color: _hairline)),
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 14, 20, 14),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 56,
child: FilledButton(
onPressed: onTrack,
style: FilledButton.styleFrom(
backgroundColor: _brand,
foregroundColor: _canvas,
minimumSize: const Size.fromHeight(56),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text(
'Track order',
style: TextStyle(
fontFamily: _font,
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
),
const SizedBox(height: 10),
SizedBox(
height: 52,
child: OutlinedButton(
onPressed: onContinue,
style: OutlinedButton.styleFrom(
foregroundColor: _ink,
side: const BorderSide(color: _ink, width: 1.3),
minimumSize: const Size.fromHeight(52),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text(
'Continue shopping',
style: TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
),
],
),
),
),
);
}The footer `Container` draws a single top `BorderSide` in `_hairline` and wraps `SafeArea(top: false)` inside itself, so the white extends under the home indicator while the buttons stay clear of it. The `FilledButton` reading 'Track order' is 56px tall in `_brand` coral; the `OutlinedButton` reading 'Continue shopping' is 52px with a 1.3px `_ink` side. The 4px height difference reinforces the fill: tracking is what a shopper does in the next thirty seconds, while more shopping is the slower, optional path — two filled buttons would flatten that. Each button sets both a `SizedBox` height and `minimumSize: Size.fromHeight(...)`, which forces full width without a `double.infinity` wrapper.
Firing the confetti shards
/// Paints a success badge: a soft green disc, a solid green circle, a bold white
/// check, and a scatter of brand/green confetti shards bursting outward.
class _SuccessBurstPainter extends CustomPainter {
const _SuccessBurstPainter();
static const Color _green = Color(0xFF2E9E5B);
static const Color _greenSoft = Color(0xFFE7F4EC);
static const Color _brand = Color(0xFFFF385C);
static const Color _amber = Color(0xFFF5A623);
@override
void paint(Canvas canvas, Size size) {
final double w = size.width;
final Offset c = Offset(w / 2, size.height / 2);
final double r = w * 0.26;
// Confetti shards around the badge (deterministic — golden-stable).
const List<List<double>> shards = <List<double>>[
<double>[-1.0, 0, 0], // angle(rad), radiusScale, colorIndex
<double>[0.5, 0, 1],
<double>[2.1, 0, 2],
<double>[3.0, 0, 0],
<double>[3.9, 0, 1],
<double>[4.7, 0, 2],
<double>[5.6, 0, 0],
<double>[1.3, 0, 2],
];
final List<Color> palette = <Color>[_brand, _green, _amber];
for (int i = 0; i < shards.length; i++) {
final double ang = shards[i][0];
final double dist = r * (1.55 + (i % 3) * 0.22);
final Offset p =
Offset(c.dx + dist * math.cos(ang), c.dy + dist * math.sin(ang));
final Paint sp = Paint()..color = palette[shards[i][2].toInt()];
canvas.save();
canvas.translate(p.dx, p.dy);
canvas.rotate(ang);
if (i.isEven) {
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromCenter(center: Offset.zero, width: 9, height: 5),
const Radius.circular(1.5),
),
sp,
);
} else {
canvas.drawCircle(Offset.zero, 3.4, sp);
}
canvas.restore();
}`_SuccessBurstPainter` draws the confetti first, so the badge later covers any shard that strays inward. Eight shards are hard-coded as `[angle, radiusScale, colorIndex]` triples — deterministic rather than `Random`, so the screenshot is identical on every run and in golden tests. The middle value is 0 in every row and unused: distance actually comes from `r * (1.55 + (i % 3) * 0.22)`, which fans the shards into three concentric bands. For each one the canvas is saved, translated to the point and rotated by that same angle, so a shard leans the way it flew. Even indices draw a 9×5 `RRect` with a 1.5 radius, odd ones a 3.4px circle, and the colour cycles coral, green, amber.
The badge and the stroked tick
// Badge.
canvas.drawCircle(c, r * 1.42, Paint()..color = _greenSoft);
canvas.drawCircle(c, r, Paint()..color = _green);
// Check mark.
final Path check = Path()
..moveTo(c.dx - r * 0.42, c.dy + r * 0.02)
..lineTo(c.dx - r * 0.1, c.dy + r * 0.34)
..lineTo(c.dx + r * 0.46, c.dy - r * 0.34);
canvas.drawPath(
check,
Paint()
..style = PaintingStyle.stroke
..strokeWidth = r * 0.18
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..color = const Color(0xFFFFFFFF),
);
}
@override
bool shouldRepaint(_SuccessBurstPainter oldDelegate) => false;
}With `r = w * 0.26`, the badge is two concentric circles: `_greenSoft` `#E7F4EC` at `r * 1.42` and solid `_green` `#2E9E5B` at `r`, which produces a halo without a blur or a shadow layer. The tick is a three-point `Path` — down-left, to the elbow, up-right — stroked in white at `r * 0.18` with `StrokeCap.round` and `StrokeJoin.round`, so the corner is a soft V rather than a mitred spike. Drawing it as a stroked path instead of filling a glyph means the thickness scales with the badge. Every coordinate is derived from `r`, so changing the 168px `SizedBox` rescales the whole thing, and `shouldRepaint` returns `false` because none of it depends on state.
Full code
The complete, ready-to-paste source. Free to use in your projects — one click copies it all.
import 'dart:math' as math;
import 'package:flutter/material.dart';
/// StyleCart — Order Placed.
///
/// The celebratory confirmation after a successful checkout: a painted success
/// check inside a burst of confetti, the order ID + estimated arrival, a compact
/// summary card with stacked item thumbnails, and two CTAs — track the order or
/// keep shopping.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// Airbnb-style tokens, own light theme + SafeArea, bundled webp. The check and
/// confetti are CustomPainters (no emoji glyph, no network). Exposes callbacks
/// only.
class EcomOrderSuccessScreen extends StatelessWidget {
const EcomOrderSuccessScreen({
super.key,
this.onTrack,
this.onContinue,
this.onViewOrder,
});
final VoidCallback? onTrack;
final VoidCallback? onContinue;
final VoidCallback? onViewOrder;
static const String _font = 'Manrope';
static const Color _canvas = Color(0xFFFFFFFF);
static const Color _ink = Color(0xFF222222);
static const Color _muted = Color(0xFF6A6A6A);
static const Color _brand = Color(0xFFFF385C);
static const Color _surface = Color(0xFFF2F2F2);
static const Color _imageBg = Color(0xFFF5F5F5);
static const Color _hairline = Color(0xFFEBEBEB);
static const String _dir = 'lib/screens/ecommerce/ecom_order_success/images';
static const List<String> _thumbs = <String>['p01.webp', 'p02.webp', 'p03.webp'];
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.light(useMaterial3: true),
child: Scaffold(
backgroundColor: _canvas,
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
padding: const EdgeInsets.fromLTRB(28, 16, 28, 20),
children: <Widget>[
const SizedBox(height: 24),
Center(
child: SizedBox(
width: 168,
height: 168,
child: CustomPaint(painter: _SuccessBurstPainter()),
),
),
const SizedBox(height: 28),
const Text(
'Order placed!',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _font,
fontSize: 26,
fontWeight: FontWeight.w800,
letterSpacing: -0.5,
color: _ink,
),
),
const SizedBox(height: 8),
const Text(
'Thanks, Aria — we’ve received your order and the '
'store is getting it ready.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _font,
fontSize: 14.5,
fontWeight: FontWeight.w500,
height: 1.5,
color: _muted,
),
),
const SizedBox(height: 24),
_metaRow(),
const SizedBox(height: 16),
_summaryCard(),
],
),
),
_actions(),
],
),
),
),
);
}
Widget _metaRow() {
return Row(
children: <Widget>[
Expanded(
child: _metaCell('Order ID', '#SC-48213', Icons.tag_rounded),
),
const SizedBox(width: 12),
Expanded(
child: _metaCell(
'Arrives by', 'Thu, 18 Jun', Icons.local_shipping_outlined),
),
],
);
}
Widget _metaCell(String label, String value, IconData icon) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(icon, size: 18, color: _brand),
const SizedBox(height: 10),
Text(
label,
style: const TextStyle(
fontFamily: _font,
fontSize: 11.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.2,
color: _muted,
),
),
const SizedBox(height: 2),
Text(
value,
style: const TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
],
),
);
}
Widget _summaryCard() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _hairline),
),
child: Row(
children: <Widget>[
SizedBox(
width: 96,
height: 56,
child: Stack(
children: <Widget>[
for (int i = 0; i < _thumbs.length; i++)
Positioned(
left: i * 20.0,
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: _imageBg,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: _canvas, width: 2),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'$_dir/${_thumbs[i]}',
fit: BoxFit.cover,
),
),
),
),
],
),
),
const SizedBox(width: 14),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'4 items · \$372.69',
style: TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
SizedBox(height: 3),
Text(
'Paid with Visa •••• 4291',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w500,
color: _muted,
),
),
],
),
),
GestureDetector(
onTap: onViewOrder,
child: const Text(
'View',
style: TextStyle(
fontFamily: _font,
fontSize: 13.5,
fontWeight: FontWeight.w700,
color: _brand,
),
),
),
],
),
);
}
Widget _actions() {
return Container(
decoration: const BoxDecoration(
color: _canvas,
border: Border(top: BorderSide(color: _hairline)),
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 14, 20, 14),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 56,
child: FilledButton(
onPressed: onTrack,
style: FilledButton.styleFrom(
backgroundColor: _brand,
foregroundColor: _canvas,
minimumSize: const Size.fromHeight(56),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text(
'Track order',
style: TextStyle(
fontFamily: _font,
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
),
const SizedBox(height: 10),
SizedBox(
height: 52,
child: OutlinedButton(
onPressed: onContinue,
style: OutlinedButton.styleFrom(
foregroundColor: _ink,
side: const BorderSide(color: _ink, width: 1.3),
minimumSize: const Size.fromHeight(52),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text(
'Continue shopping',
style: TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
),
],
),
),
),
);
}
}
/// Paints a success badge: a soft green disc, a solid green circle, a bold white
/// check, and a scatter of brand/green confetti shards bursting outward.
class _SuccessBurstPainter extends CustomPainter {
const _SuccessBurstPainter();
static const Color _green = Color(0xFF2E9E5B);
static const Color _greenSoft = Color(0xFFE7F4EC);
static const Color _brand = Color(0xFFFF385C);
static const Color _amber = Color(0xFFF5A623);
@override
void paint(Canvas canvas, Size size) {
final double w = size.width;
final Offset c = Offset(w / 2, size.height / 2);
final double r = w * 0.26;
// Confetti shards around the badge (deterministic — golden-stable).
const List<List<double>> shards = <List<double>>[
<double>[-1.0, 0, 0], // angle(rad), radiusScale, colorIndex
<double>[0.5, 0, 1],
<double>[2.1, 0, 2],
<double>[3.0, 0, 0],
<double>[3.9, 0, 1],
<double>[4.7, 0, 2],
<double>[5.6, 0, 0],
<double>[1.3, 0, 2],
];
final List<Color> palette = <Color>[_brand, _green, _amber];
for (int i = 0; i < shards.length; i++) {
final double ang = shards[i][0];
final double dist = r * (1.55 + (i % 3) * 0.22);
final Offset p =
Offset(c.dx + dist * math.cos(ang), c.dy + dist * math.sin(ang));
final Paint sp = Paint()..color = palette[shards[i][2].toInt()];
canvas.save();
canvas.translate(p.dx, p.dy);
canvas.rotate(ang);
if (i.isEven) {
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromCenter(center: Offset.zero, width: 9, height: 5),
const Radius.circular(1.5),
),
sp,
);
} else {
canvas.drawCircle(Offset.zero, 3.4, sp);
}
canvas.restore();
}
// Badge.
canvas.drawCircle(c, r * 1.42, Paint()..color = _greenSoft);
canvas.drawCircle(c, r, Paint()..color = _green);
// Check mark.
final Path check = Path()
..moveTo(c.dx - r * 0.42, c.dy + r * 0.02)
..lineTo(c.dx - r * 0.1, c.dy + r * 0.34)
..lineTo(c.dx + r * 0.46, c.dy - r * 0.34);
canvas.drawPath(
check,
Paint()
..style = PaintingStyle.stroke
..strokeWidth = r * 0.18
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..color = const Color(0xFFFFFFFF),
);
}
@override
bool shouldRepaint(_SuccessBurstPainter oldDelegate) => false;
}
Plus bundled 8 binary assets (fonts/images). The CLI and MCP install those for you automatically.
Two faster ways to add it
Copy-paste works, but you can skip it entirely.
1. FlutterKit CLI
One command drops this screen — and its fonts — straight into your project.
$ flutterkit add ecom-order-success2. AI agent (MCP)
Connect FlutterKit's MCP server in Claude or Cursor and just ask your agent to install ecom-order-success — it fetches and writes the files for you.
FAQ
Can I use this order success screen in a commercial app?
Yes. FlutterKit is free — there is no paid tier behind this page, no attribution line to keep, and no sign-up. Copy the Dart from this page, add it with the CLI, or pull it through MCP, and ship it in a real store.
What packages and fonts does it need?
No packages at all — the badge, the confetti and every card are plain `material.dart` widgets and a `CustomPainter`. The only dependency is the Manrope font family, declared in your `pubspec.yaml` fonts section. Swap `_font` for your own family and the layout is unchanged.
How do I plug in real order data?
Every string is a literal in one of three builders. Add parameters for the order ID, the arrival date, the item count and total, and the masked card, then pass them into `_metaCell` and the summary card. The three thumbnails come from `_thumbs` — replace those asset paths with `Image.network` URLs from your order payload and keep the loop as it is.
The confetti looks random — can I change the burst?
It only looks random. Edit the `shards` list: each row is an angle in radians plus a colour index into `[brand, green, amber]`. Add rows for a denser burst, and adjust the `1.55 + (i % 3) * 0.22` multiplier to push the shards further out. Keeping the values fixed rather than using `Random` is what makes the screen stable in golden tests.
Which Flutter version does this require?
Flutter 3.22 or newer is the safe target — the constructor uses super parameters (`super.key`) and Material 3 is enabled through `ThemeData.light(useMaterial3: true)`. On an older SDK, expand the constructor to the `{Key? key, ...}) : super(key: key)` form; there are no `withValues` calls to convert here.
