How to Build a Profile Setup Complete Screen with an Animated Success Ring in Flutter (Full Code + Preview)
The last step of onboarding should feel like a reward, not another form, and it has to prove that the work the user just did actually stuck. This tutorial builds Pulse's 'You're all set!' screen in Flutter: a 116px `CustomPaint` where `_SuccessRingPainter` sweeps a green arc and then draws a check mark stroke by stroke on a single 900ms `AnimationController`, a `_ProfilePreview` card with a gradient initials avatar computed by an `_initials` getter, three `_ReadyRow` summary lines, and a pinned 54px 'Start exploring' `FilledButton`.
Watch the Flutter UI walkthrough
A short screen recording of Pulse · All Set running, if you'd rather see it before you read the code. The written tutorial below covers everything in it.
Can't see the video? Watch it on YouTube.
What you'll build
- ✓A `_SuccessRingPainter` that layers a hairline track, a glow fill whose alpha grows with progress, a sweeping arc starting at 12 o'clock, and a two-segment check mark that draws itself in
- ✓One 900ms `AnimationController` started with `..forward()` in `initState` and fed straight into `AnimatedBuilder` with no Tween
- ✓An `_initials` getter that turns 'Alex Rivera' into 'AR' with a regex split and handles empty or single-word names
- ✓A `_ProfilePreview` card with a diagonal #9B8CFF to #6E56F7 gradient avatar, ellipsised name, @handle, and a tinted green 'Live' pill
- ✓A pinned bottom bar with a hairline top border and a fixed-height indigo `FilledButton` wired to an injected `onStart` callback
Step-by-step build
Create the file
Add a new file at lib/social_setup_complete/social_setup_complete_screen.dart in your Flutter project.
Register the bundled fonts
No external packages — this is pure Flutter. It does bundle its design font (Inter), so drop the font file into fonts/ and declare it in pubspec.yaml:
flutter:
fonts:
- family: Inter
fonts:
- asset: fonts/Inter-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.
Props, a nine-colour palette, and why this is a StatefulWidget
import 'package:flutter/material.dart';
/// All Set — final step of Pulse profile setup. A painted animated success ring
/// with a check, a celebratory (confetti-free) headline, a compact profile
/// preview card, and a summary of what’s ready. A single "Start exploring" CTA
/// sits in a pinned bottom bar at fixed height. Self-contained per
/// CONVENTIONS.md: pure Flutter, bundled Inter font, own dark theme, SafeArea.
class SocialSetupCompleteScreen extends StatefulWidget {
const SocialSetupCompleteScreen({
super.key,
this.onStart,
this.name = 'Alex Rivera',
this.handle = 'alexrivera',
});
final VoidCallback? onStart;
final String name;
final String handle;
static const String _font = 'Inter';
static const Color _bg = Color(0xFF0B0B0F);
static const Color _surface = Color(0xFF15151B);
static const Color _brand = Color(0xFF6E56F7);
static const Color _accent = Color(0xFF9B8CFF);
static const Color _success = Color(0xFF34D399);
static const Color _hairline = Color(0xFF26262F);
static const Color _textHi = Color(0xFFF4F4F7);
static const Color _textLo = Color(0xFFB5B5C2);
static const Color _muted = Color(0xFF8A8A99);
@override
State<SocialSetupCompleteScreen> createState() =>
_SocialSetupCompleteScreenState();
}`SocialSetupCompleteScreen` takes only three things: an optional `onStart` callback and `name` / `handle` strings with defaults of 'Alex Rivera' and 'alexrivera'. There is no user model passed in; the screen derives everything it shows (including the avatar initials) from those two strings, which is what makes it drop-in. Nine `static const Color`s define a near-mono dark palette: `_bg` #0B0B0F, `_surface` #15151B, a `_brand` indigo #6E56F7 with a lighter `_accent` #9B8CFF for the avatar gradient, and `_success` #34D399 reserved for the ring, checks and Live pill. Three text tones (`_textHi`, `_textLo`, `_muted`) give the hierarchy without changing weight. Unlike most success screens this one is a `StatefulWidget`, purely because the ring needs an `AnimationController`, which needs a `TickerProvider`.
A single 900ms controller and the initials getter
class _SocialSetupCompleteScreenState extends State<SocialSetupCompleteScreen>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 900),
)..forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
String get _initials {
final List<String> parts = widget.name
.trim()
.split(RegExp(r'\s+'))
.where((String s) => s.isNotEmpty)
.toList();
if (parts.isEmpty) return '?';
if (parts.length == 1) return parts.first[0].toUpperCase();
return (parts.first[0] + parts.last[0]).toUpperCase();
}The state mixes in `SingleTickerProviderStateMixin` and creates one `AnimationController` with a 900ms duration, immediately calling `..forward()` in `initState` so the ring starts sweeping the moment the screen appears; it is disposed in `dispose`. There is no `Tween` or `CurvedAnimation` in between — the painter reads the raw `0.0..1.0` value and does its own easing arithmetic. The `_initials` getter is the small piece of logic that keeps the screen self-contained: it trims `widget.name`, splits on `RegExp(r'\s+')` so double spaces do not produce empty parts, filters blanks, and returns '?' for an empty name, the first letter for a single word, or first-plus-last initial uppercased for anything longer. Feeding 'Alex Rivera' yields 'AR' without any extra prop.
The scrolling body: ring, headline, preview card, ready rows
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.dark(useMaterial3: true),
child: Scaffold(
backgroundColor: SocialSetupCompleteScreen._bg,
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(24, 24, 24, 24),
child: Column(
children: <Widget>[
const SizedBox(height: 20),
SizedBox(
width: 116,
height: 116,
child: AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget? child) {
return CustomPaint(
painter: _SuccessRingPainter(
progress: _controller.value),
);
},
),
),
const SizedBox(height: 28),
const Text(
'You’re all set!',
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 30,
fontWeight: FontWeight.w700,
letterSpacing: -0.9,
color: SocialSetupCompleteScreen._textHi,
),
),
const SizedBox(height: 10),
const Text(
'Your Pulse profile is ready. Jump in and start following the conversation.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 15,
height: 1.5,
color: SocialSetupCompleteScreen._textLo,
),
),
const SizedBox(height: 28),
_ProfilePreview(
initials: _initials,
name: widget.name,
handle: widget.handle,
),
const SizedBox(height: 16),
const _ReadyRow(text: 'Profile & bio complete'),
const SizedBox(height: 10),
const _ReadyRow(text: '3 interests picked for your feed'),
const SizedBox(height: 10),
const _ReadyRow(text: 'Following 2 accounts'),
],
),
),
),`build` wraps everything in `Theme(data: ThemeData.dark(useMaterial3: true))` so the screen stays dark regardless of the host app's theme, then a `Scaffold` on `_bg` with `SafeArea`. The outer `Column` splits into an `Expanded` `SingleChildScrollView` and a fixed bottom bar, which is what makes the body overflow-proof on short phones. Inside, a 116x116 `SizedBox` hosts an `AnimatedBuilder` listening to `_controller`; each tick it rebuilds a `CustomPaint` with a fresh `_SuccessRingPainter(progress: _controller.value)`. The headline is 30px `w700` with `letterSpacing: -0.9` in `_textHi`, followed by a 15px `_textLo` line at `height: 1.5`. Then the `_ProfilePreview` receives the computed `_initials` plus `widget.name` and `widget.handle`, and three `_ReadyRow`s with hard-coded summary copy ('3 interests picked for your feed', 'Following 2 accounts') are spaced by 10px `SizedBox`es.
The pinned bottom bar and the Start exploring button
Container(
decoration: const BoxDecoration(
color: SocialSetupCompleteScreen._bg,
border: Border(
top: BorderSide(
color: SocialSetupCompleteScreen._hairline)),
),
padding: const EdgeInsets.fromLTRB(24, 14, 24, 16),
child: SizedBox(
width: double.infinity,
height: 54,
child: FilledButton(
onPressed: widget.onStart,
style: FilledButton.styleFrom(
backgroundColor: SocialSetupCompleteScreen._brand,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
child: const Text(
'Start exploring',
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
),
),
),
);
}
}The second child of the outer `Column` is a plain `Container` rather than a `bottomNavigationBar`, painted in `_bg` with a `Border(top: BorderSide(color: _hairline))` so a 1px #26262F line separates it from scrolling content. Padding is `fromLTRB(24, 14, 24, 16)` — slightly more below than above so the button does not sit hard against the home indicator. A `SizedBox` at `width: double.infinity, height: 54` locks the button size, and the `FilledButton` uses `styleFrom` with `_brand` background, white foreground and a 15px `RoundedRectangleBorder`. Its `onPressed` is `widget.onStart` directly; when the callback is null the button renders disabled, which is a useful signal during development that the screen has not been wired up. The label is 16px `w600` Inter.
_ProfilePreview: gradient initials avatar and the Live pill
class _ProfilePreview extends StatelessWidget {
const _ProfilePreview({
required this.initials,
required this.name,
required this.handle,
});
final String initials;
final String name;
final String handle;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: SocialSetupCompleteScreen._surface,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: SocialSetupCompleteScreen._hairline),
),
child: Row(
children: <Widget>[
Container(
width: 52,
height: 52,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
SocialSetupCompleteScreen._accent,
SocialSetupCompleteScreen._brand,
],
),
),
child: Center(
child: Text(
initials,
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 19,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 16,
fontWeight: FontWeight.w700,
color: SocialSetupCompleteScreen._textHi,
),
),
const SizedBox(height: 2),
Text(
'@$handle',
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 13.5,
color: SocialSetupCompleteScreen._muted,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: SocialSetupCompleteScreen._success.withValues(alpha: 0.14),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
'Live',
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 12,
fontWeight: FontWeight.w700,
color: SocialSetupCompleteScreen._success,
),
),
),
],
),
);
}
}`_ProfilePreview` is a stateless card on `_surface` #15151B with an 18px radius and a `_hairline` border. The avatar is a 52px circle whose `BoxDecoration` uses a `LinearGradient` from `topLeft` to `bottomRight` running `_accent` #9B8CFF into `_brand` #6E56F7; the `initials` string sits centred at 19px `w700` white, so no image asset or network call is needed. The name column is `Expanded` with `crossAxisAlignment: start`; the name is 16px `w700` with `overflow: TextOverflow.ellipsis` so a long display name truncates instead of pushing the pill off-screen, and the handle is interpolated as `'@$handle'` at 13.5px in `_muted`. The trailing 'Live' pill is a `Container` with 12x6 padding, `_success.withValues(alpha: 0.14)` fill and a 20px radius, with the 12px `w700` label in full `_success` — the same tint-fill-plus-solid-text pattern the ready rows reuse.
_ReadyRow: tinted circular checks for the summary list
class _ReadyRow extends StatelessWidget {
const _ReadyRow({required this.text});
final String text;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: SocialSetupCompleteScreen._success.withValues(alpha: 0.16),
),
child: const Icon(Icons.check,
size: 14, color: SocialSetupCompleteScreen._success),
),
const SizedBox(width: 12),
Text(
text,
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 14.5,
fontWeight: FontWeight.w500,
color: SocialSetupCompleteScreen._textLo,
),
),
],
);
}
}`_ReadyRow` takes one `text` string and renders a `Row` of a 22px circular `Container` filled with `_success.withValues(alpha: 0.16)` holding a 14px `Icons.check` in solid `_success`, a 12px gap, then the label at 14.5px `w500` in `_textLo`. The check circle is intentionally smaller and paler than the big painted ring above so the three rows read as a receipt of completed steps rather than three more celebrations. Because the widget is `const`-constructible, the three rows in the body are built as `const _ReadyRow(...)` and never rebuild while the `AnimatedBuilder` is ticking — only the `CustomPaint` subtree repaints during the 900ms animation.
_SuccessRingPainter: track, glow, sweep, and a self-drawing check
/// Paints an accent success ring that sweeps in, with a check mark that scales
/// up as the ring completes.
class _SuccessRingPainter extends CustomPainter {
const _SuccessRingPainter({required this.progress});
final double progress;
@override
void paint(Canvas canvas, Size size) {
final Offset center = size.center(Offset.zero);
final double radius = size.width / 2 - 5;
final Rect rect = Rect.fromCircle(center: center, radius: radius);
// Track.
canvas.drawCircle(
center,
radius,
Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = SocialSetupCompleteScreen._hairline,
);
// Glow fill.
canvas.drawCircle(
center,
radius - 3,
Paint()
..color = SocialSetupCompleteScreen._success
.withValues(alpha: 0.10 * progress),
);
// Sweeping progress arc.
canvas.drawArc(
rect,
-1.5708,
6.2831853 * progress,
false,
Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..strokeCap = StrokeCap.round
..color = SocialSetupCompleteScreen._success,
);
// Check mark (draws in over the back half of the animation).
final double t = ((progress - 0.4) / 0.6).clamp(0.0, 1.0);
if (t > 0) {
final Paint check = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..color = SocialSetupCompleteScreen._success;
final Offset p0 = Offset(center.dx - radius * 0.34, center.dy + radius * 0.02);
final Offset p1 = Offset(center.dx - radius * 0.08, center.dy + radius * 0.28);
final Offset p2 = Offset(center.dx + radius * 0.38, center.dy - radius * 0.26);
final Path path = Path()..moveTo(p0.dx, p0.dy);
if (t <= 0.5) {
final double s = t / 0.5;
path.lineTo(p0.dx + (p1.dx - p0.dx) * s, p0.dy + (p1.dy - p0.dy) * s);
} else {
path.lineTo(p1.dx, p1.dy);
final double s = (t - 0.5) / 0.5;
path.lineTo(p1.dx + (p2.dx - p1.dx) * s, p1.dy + (p2.dy - p1.dy) * s);
}
canvas.drawPath(path, check);
}
}
@override
bool shouldRepaint(covariant _SuccessRingPainter oldDelegate) =>
oldDelegate.progress != progress;
}The painter works from the box centre with `radius = size.width / 2 - 5`, leaving room for a 6px stroke. It draws four layers in order. First a full `_hairline` circle as the track. Second a filled circle at `radius - 3` in `_success` with `alpha: 0.10 * progress`, so the green glow fades in as the ring completes. Third `drawArc` from `-1.5708` radians (12 o'clock) sweeping `6.2831853 * progress` — a full turn at progress 1 — with `StrokeCap.round`. The check only starts once `progress` passes 0.4: `t = ((progress - 0.4) / 0.6).clamp(0, 1)` remaps the back 60% of the animation to 0..1. Three points are placed relative to the radius (`p0` left, `p1` bottom, `p2` upper right); for `t <= 0.5` the path lerps from `p0` toward `p1`, otherwise it commits the first stroke and lerps `p1` toward `p2`, so the tick is drawn as two strokes in sequence. `shouldRepaint` compares `progress` only.
Full code
The complete, ready-to-paste source. Free to use in your projects — one click copies it all.
import 'package:flutter/material.dart';
/// All Set — final step of Pulse profile setup. A painted animated success ring
/// with a check, a celebratory (confetti-free) headline, a compact profile
/// preview card, and a summary of what’s ready. A single "Start exploring" CTA
/// sits in a pinned bottom bar at fixed height. Self-contained per
/// CONVENTIONS.md: pure Flutter, bundled Inter font, own dark theme, SafeArea.
class SocialSetupCompleteScreen extends StatefulWidget {
const SocialSetupCompleteScreen({
super.key,
this.onStart,
this.name = 'Alex Rivera',
this.handle = 'alexrivera',
});
final VoidCallback? onStart;
final String name;
final String handle;
static const String _font = 'Inter';
static const Color _bg = Color(0xFF0B0B0F);
static const Color _surface = Color(0xFF15151B);
static const Color _brand = Color(0xFF6E56F7);
static const Color _accent = Color(0xFF9B8CFF);
static const Color _success = Color(0xFF34D399);
static const Color _hairline = Color(0xFF26262F);
static const Color _textHi = Color(0xFFF4F4F7);
static const Color _textLo = Color(0xFFB5B5C2);
static const Color _muted = Color(0xFF8A8A99);
@override
State<SocialSetupCompleteScreen> createState() =>
_SocialSetupCompleteScreenState();
}
class _SocialSetupCompleteScreenState extends State<SocialSetupCompleteScreen>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 900),
)..forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
String get _initials {
final List<String> parts = widget.name
.trim()
.split(RegExp(r'\s+'))
.where((String s) => s.isNotEmpty)
.toList();
if (parts.isEmpty) return '?';
if (parts.length == 1) return parts.first[0].toUpperCase();
return (parts.first[0] + parts.last[0]).toUpperCase();
}
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.dark(useMaterial3: true),
child: Scaffold(
backgroundColor: SocialSetupCompleteScreen._bg,
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(24, 24, 24, 24),
child: Column(
children: <Widget>[
const SizedBox(height: 20),
SizedBox(
width: 116,
height: 116,
child: AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget? child) {
return CustomPaint(
painter: _SuccessRingPainter(
progress: _controller.value),
);
},
),
),
const SizedBox(height: 28),
const Text(
'You’re all set!',
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 30,
fontWeight: FontWeight.w700,
letterSpacing: -0.9,
color: SocialSetupCompleteScreen._textHi,
),
),
const SizedBox(height: 10),
const Text(
'Your Pulse profile is ready. Jump in and start following the conversation.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 15,
height: 1.5,
color: SocialSetupCompleteScreen._textLo,
),
),
const SizedBox(height: 28),
_ProfilePreview(
initials: _initials,
name: widget.name,
handle: widget.handle,
),
const SizedBox(height: 16),
const _ReadyRow(text: 'Profile & bio complete'),
const SizedBox(height: 10),
const _ReadyRow(text: '3 interests picked for your feed'),
const SizedBox(height: 10),
const _ReadyRow(text: 'Following 2 accounts'),
],
),
),
),
Container(
decoration: const BoxDecoration(
color: SocialSetupCompleteScreen._bg,
border: Border(
top: BorderSide(
color: SocialSetupCompleteScreen._hairline)),
),
padding: const EdgeInsets.fromLTRB(24, 14, 24, 16),
child: SizedBox(
width: double.infinity,
height: 54,
child: FilledButton(
onPressed: widget.onStart,
style: FilledButton.styleFrom(
backgroundColor: SocialSetupCompleteScreen._brand,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
child: const Text(
'Start exploring',
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
),
),
),
);
}
}
class _ProfilePreview extends StatelessWidget {
const _ProfilePreview({
required this.initials,
required this.name,
required this.handle,
});
final String initials;
final String name;
final String handle;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: SocialSetupCompleteScreen._surface,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: SocialSetupCompleteScreen._hairline),
),
child: Row(
children: <Widget>[
Container(
width: 52,
height: 52,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
SocialSetupCompleteScreen._accent,
SocialSetupCompleteScreen._brand,
],
),
),
child: Center(
child: Text(
initials,
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 19,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 16,
fontWeight: FontWeight.w700,
color: SocialSetupCompleteScreen._textHi,
),
),
const SizedBox(height: 2),
Text(
'@$handle',
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 13.5,
color: SocialSetupCompleteScreen._muted,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: SocialSetupCompleteScreen._success.withValues(alpha: 0.14),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
'Live',
style: TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 12,
fontWeight: FontWeight.w700,
color: SocialSetupCompleteScreen._success,
),
),
),
],
),
);
}
}
class _ReadyRow extends StatelessWidget {
const _ReadyRow({required this.text});
final String text;
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: SocialSetupCompleteScreen._success.withValues(alpha: 0.16),
),
child: const Icon(Icons.check,
size: 14, color: SocialSetupCompleteScreen._success),
),
const SizedBox(width: 12),
Text(
text,
style: const TextStyle(
fontFamily: SocialSetupCompleteScreen._font,
fontSize: 14.5,
fontWeight: FontWeight.w500,
color: SocialSetupCompleteScreen._textLo,
),
),
],
);
}
}
/// Paints an accent success ring that sweeps in, with a check mark that scales
/// up as the ring completes.
class _SuccessRingPainter extends CustomPainter {
const _SuccessRingPainter({required this.progress});
final double progress;
@override
void paint(Canvas canvas, Size size) {
final Offset center = size.center(Offset.zero);
final double radius = size.width / 2 - 5;
final Rect rect = Rect.fromCircle(center: center, radius: radius);
// Track.
canvas.drawCircle(
center,
radius,
Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..color = SocialSetupCompleteScreen._hairline,
);
// Glow fill.
canvas.drawCircle(
center,
radius - 3,
Paint()
..color = SocialSetupCompleteScreen._success
.withValues(alpha: 0.10 * progress),
);
// Sweeping progress arc.
canvas.drawArc(
rect,
-1.5708,
6.2831853 * progress,
false,
Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..strokeCap = StrokeCap.round
..color = SocialSetupCompleteScreen._success,
);
// Check mark (draws in over the back half of the animation).
final double t = ((progress - 0.4) / 0.6).clamp(0.0, 1.0);
if (t > 0) {
final Paint check = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 6
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..color = SocialSetupCompleteScreen._success;
final Offset p0 = Offset(center.dx - radius * 0.34, center.dy + radius * 0.02);
final Offset p1 = Offset(center.dx - radius * 0.08, center.dy + radius * 0.28);
final Offset p2 = Offset(center.dx + radius * 0.38, center.dy - radius * 0.26);
final Path path = Path()..moveTo(p0.dx, p0.dy);
if (t <= 0.5) {
final double s = t / 0.5;
path.lineTo(p0.dx + (p1.dx - p0.dx) * s, p0.dy + (p1.dy - p0.dy) * s);
} else {
path.lineTo(p1.dx, p1.dy);
final double s = (t - 0.5) / 0.5;
path.lineTo(p1.dx + (p2.dx - p1.dx) * s, p1.dy + (p2.dy - p1.dy) * s);
}
canvas.drawPath(path, check);
}
}
@override
bool shouldRepaint(covariant _SuccessRingPainter oldDelegate) =>
oldDelegate.progress != progress;
}
Plus bundled 1 binary asset (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 social-setup-complete2. AI agent (MCP)
Connect FlutterKit's MCP server in Claude or Cursor and just ask your agent to install social-setup-complete — it fetches and writes the files for you.
FAQ
Can I use this setup-complete screen in a commercial app?
Yes. FlutterKit screens are free for personal and commercial projects under an MIT-style licence. There is no licence key or account involved; run `flutterkit add social-setup-complete` or copy the file above into your project and ship it.
Which packages does this screen depend on?
None. It is pure Flutter: `package:flutter/material.dart` plus a `CustomPainter` and one `AnimationController`. The only asset is the Inter font, which `flutterkit add social-setup-complete` bundles and registers in pubspec.yaml for you. If you copy the code by hand, either add Inter yourself or remove the `fontFamily` lines to fall back to the platform font.
What Flutter version do I need?
Flutter 3.22 or newer. The file uses `super.key` in the constructor and `Color.withValues(alpha: ...)` in the glow fill, the Live pill and the ready-row checks. On an older 3.x SDK, replace each `withValues(alpha: x)` with `withOpacity(x)` and it compiles unchanged otherwise.
How do I change the timing so the check appears earlier or later?
Two numbers control it. The controller's `Duration(milliseconds: 900)` sets the total length. Inside `_SuccessRingPainter.paint`, `t = ((progress - 0.4) / 0.6)` means the check starts drawing at 40% of the ring sweep and finishes with it; lower the 0.4 (and raise the divisor so the two still sum to 1.0) to start the check sooner. To add easing, wrap the controller in a `CurvedAnimation` and pass its `.value` to the painter instead of `_controller.value`.
The summary rows are hard-coded — how do I drive them from real onboarding data?
The three `const _ReadyRow(text: ...)` calls in the body are plain strings. Add a `List<String> summary` prop to `SocialSetupCompleteScreen` alongside `name` and `handle`, then replace the three rows with `for (final s in widget.summary) ...[_ReadyRow(text: s), const SizedBox(height: 10)]`. The rows would no longer be `const`, but they are outside the `AnimatedBuilder` so the animation cost is unaffected.
