How to Build a Pickup or Drop-off Return Screen in Flutter (Full Code + Preview)
Returns are where shopping apps quietly lose trust: shoppers want to know how the item gets back, and forcing a single courier flow ignores anyone who walks past a store daily. This tutorial builds StyleCart's return-method screen in Flutter — two radio-style cards toggle between courier pickup and store drop-off, the body swaps between an editable address plus a horizontal slot picker and a store card topped by a fully painted mini-map, and a pinned button relabels itself with the chosen slot before firing a single boolean callback.
What you'll build
- ✓Two selectable method cards whose radio dot is drawn with nothing but a border-width jump
- ✓A conditional body that spreads pickup or drop-off widget lists straight into one ListView
- ✓A horizontal date/time slot picker whose selected chip inverts to a coral fill
- ✓A store card with a CustomPaint mini-map — block grid, roads, park and a teardrop pin, zero assets
- ✓A pinned schedule bar that interpolates the chosen slot into its own label
Step-by-step build
Create the file
Add a new file at lib/ecom_orders_return_method/ecom_orders_return_method_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.
Two booleans of state and a slot table
import 'package:flutter/material.dart';
/// StyleCart — Pickup or Drop-off.
///
/// Choose how the return travels back: a courier pickup (reveals a pickup
/// address + a horizontal slot picker) or a drop-off at a partner store
/// (reveals a painted mini-map store card). A pinned bar schedules the return.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// Airbnb-style tokens, own light theme + SafeArea. Painter-only graphics.
/// Exposes callbacks only.
class EcomOrdersReturnMethodScreen extends StatefulWidget {
const EcomOrdersReturnMethodScreen({
super.key,
this.onBack,
this.onChangeAddress,
this.onSchedule,
});
final VoidCallback? onBack;
final VoidCallback? onChangeAddress;
/// Fires with `true` for courier pickup, `false` for store drop-off.
final ValueChanged<bool>? onSchedule;
@override
State<EcomOrdersReturnMethodScreen> createState() =>
_EcomOrdersReturnMethodScreenState();
}
class _EcomOrdersReturnMethodScreenState
extends State<EcomOrdersReturnMethodScreen> {
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 _faint = Color(0xFFC1C1C1);
static const Color _brand = Color(0xFFFF385C);
static const Color _surface = Color(0xFFF2F2F2);
static const Color _success = Color(0xFF2E9E5B);
static const Color _hairline = Color(0xFFEBEBEB);
bool _pickup = true;
int _slot = 0;
static const List<_Slot> _slots = <_Slot>[
_Slot('Thu', '18 Jun', '9–12'),
_Slot('Thu', '18 Jun', '12–3'),
_Slot('Fri', '19 Jun', '9–12'),
_Slot('Fri', '19 Jun', '3–6'),
_Slot('Sat', '20 Jun', '10–1'),
];The widget is stateful but its entire state is `bool _pickup` and `int _slot` — which method is chosen and which slot chip is lit. Three callbacks go out: `onBack`, `onChangeAddress`, and `onSchedule`, which is typed `ValueChanged<bool>` so one handler serves both CTAs — `true` means courier pickup, `false` means drop-off. The palette is Airbnb-flavoured: `_brand` coral `0xFFFF385C` for selection and the CTA, with `_success` green kept aside solely for the store's Open-now badge. The five pickup windows live in `static const List<_Slot> _slots` as `(day, date, window)` value objects, so the chip copy is data, not widget code.
One ListView, two bodies
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.light(useMaterial3: true),
child: Scaffold(
backgroundColor: _canvas,
body: SafeArea(
child: Column(
children: <Widget>[
_header(),
Expanded(
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
children: <Widget>[
_methodCard(
pickup: true,
icon: Icons.local_shipping_outlined,
title: 'Courier pickup',
subtitle: 'Free · we collect from your address',
),
const SizedBox(height: 12),
_methodCard(
pickup: false,
icon: Icons.storefront_outlined,
title: 'Drop at a store',
subtitle: 'Free · hand it in at a partner store',
),
const SizedBox(height: 22),
if (_pickup) ..._pickupDetails() else ..._dropDetails(),
],
),
),
_scheduleBar(),
],
),
),
),
);
}
Widget _header() {
return Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 20, 6),
child: Row(
children: <Widget>[
IconButton(
onPressed: widget.onBack,
icon: const Icon(Icons.arrow_back_rounded, size: 22, color: _ink),
),
const Text(
'How should we collect it?',
style: TextStyle(
fontFamily: _font,
fontSize: 18,
fontWeight: FontWeight.w800,
letterSpacing: -0.3,
color: _ink,
),
),
],
),
);
}`build` wraps everything in `Theme(data: ThemeData.light(useMaterial3: true))` so the screen keeps its own light look regardless of the host app's theme. The Column stacks the header, an `Expanded` ListView, and `_scheduleBar` as a sibling — outside the scroll view, which is what pins it. The interesting line is 82: `if (_pickup) ..._pickupDetails() else ..._dropDetails()` — both builders return `List<Widget>` and the collection-if spreads whichever applies directly into the ListView's children, so switching method is just a `setState` rebuild, no navigation and no nested scroll view. The header's `fromLTRB(8, 4, 20, 6)` padding is asymmetric because the back `IconButton` brings its own touch padding on the left.
Method cards with a border-trick radio
Widget _methodCard({
required bool pickup,
required IconData icon,
required String title,
required String subtitle,
}) {
final bool on = _pickup == pickup;
return GestureDetector(
onTap: () => setState(() => _pickup = pickup),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: on ? _brand.withValues(alpha: 0.04) : _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: on ? _brand : _hairline,
width: on ? 1.6 : 1,
),
),
child: Row(
children: <Widget>[
Container(
width: 44,
height: 44,
alignment: Alignment.center,
decoration: BoxDecoration(
color: on ? _brand.withValues(alpha: 0.12) : _surface,
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, size: 22, color: on ? _brand : _muted),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
const SizedBox(height: 3),
Text(
subtitle,
style: const TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w600,
color: _muted,
),
),
],
),
),
const SizedBox(width: 10),
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: on ? _brand : _faint,
width: on ? 6.5 : 2,
),
),
),
],
),
),
);
}Each `_methodCard` carries its own identity as a `pickup` bool and computes `on = _pickup == pickup`, so tapping either card is one `setState(() => _pickup = pickup)` and the pair can never both be selected. Selection is shown three ways at once: the card fills with `_brand.withValues(alpha: 0.04)`, the border swaps from a 1px `_hairline` to a 1.6px coral, and the leading icon tile re-tints from `_surface` grey to 12% coral. The radio itself is the neat part — a bare 22px circle `Container` whose border width jumps from 2 to 6.5 when active; at that diameter the thick coral ring closes in around a small white hole, reading as a filled radio without a `Radio` widget or any inner child.
Pickup details: address row and slot rail
List<Widget> _pickupDetails() {
return <Widget>[
_sectionTitle('Pickup address'),
const SizedBox(height: 10),
GestureDetector(
onTap: widget.onChangeAddress,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _hairline),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Icon(Icons.location_on_outlined, size: 20, color: _faint),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Home',
style: TextStyle(
fontFamily: _font,
fontSize: 14.5,
fontWeight: FontWeight.w800,
color: _ink,
),
),
SizedBox(height: 3),
Text(
'24 Larkspur Lane, Apt 7B, Brooklyn, NY 11217',
style: TextStyle(
fontFamily: _font,
fontSize: 13.5,
fontWeight: FontWeight.w500,
height: 1.35,
color: _muted,
),
),
],
),
),
SizedBox(width: 8),
Text(
'Change',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w700,
color: _brand,
),
),
],
),
),
),
const SizedBox(height: 22),
_sectionTitle('Pickup slot'),
const SizedBox(height: 10),
SizedBox(
height: 96,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _slots.length,
separatorBuilder: (BuildContext c, int idx) =>
const SizedBox(width: 10),
itemBuilder: (BuildContext c, int i) => _slotCard(i),
),
),
];
}`_pickupDetails` returns a plain widget list: a section title, the address card, another title, and the slot rail. The entire address card sits inside a `GestureDetector` wired to `widget.onChangeAddress`, so the tap target is the full card while the coral 'Change' text is only the visual affordance — far easier to hit than a link-sized target. `crossAxisAlignment: CrossAxisAlignment.start` keeps the location pin aligned with the 'Home' line when the two-line Brooklyn address wraps. The slots render inside a fixed `SizedBox(height: 96)` holding a horizontal `ListView.separated` with 10px separators, so five chips scroll off-screen gracefully on narrow phones instead of shrinking.
Slot chips that invert when chosen
Widget _slotCard(int i) {
final _Slot s = _slots[i];
final bool on = _slot == i;
return GestureDetector(
onTap: () => setState(() => _slot = i),
child: Container(
width: 82,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: on ? _brand : _canvas,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: on ? _brand : _hairline),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
s.day,
style: TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w700,
color: on ? _canvas : _muted,
),
),
const SizedBox(height: 4),
Text(
s.date,
style: TextStyle(
fontFamily: _font,
fontSize: 14,
fontWeight: FontWeight.w800,
color: on ? _canvas : _ink,
),
),
const SizedBox(height: 6),
Text(
s.window,
style: TextStyle(
fontFamily: _font,
fontSize: 12,
fontWeight: FontWeight.w600,
color: on ? _canvas.withValues(alpha: 0.85) : _faint,
),
),
],
),
),
);
}`_slotCard(i)` compares `_slot == i` and inverts the whole chip on selection: the background flips from `_canvas` white to solid `_brand`, and every text colour flips to white so contrast survives the fill. The three lines keep their hierarchy even on the coral chip — day at `w700` muted-or-white, date at 14px `w800` as the anchor, and the time window dimmed to `_canvas.withValues(alpha: 0.85)` so it stays subordinate on both states. A fixed `width: 82` with vertical-only padding gives every chip the same footprint, which is what makes the rail scan like a calendar strip.
Drop-off details: painted map card and QR note
List<Widget> _dropDetails() {
return <Widget>[
_sectionTitle('Nearest drop-off store'),
const SizedBox(height: 10),
Container(
decoration: BoxDecoration(
color: _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _hairline),
),
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(16)),
child: SizedBox(
height: 120,
width: double.infinity,
child: CustomPaint(painter: _MiniMapPainter()),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'StyleCart · SoHo',
style: TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
SizedBox(height: 3),
Text(
'112 Spring St · 0.6 mi away',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w600,
color: _muted,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: _success.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'Open now',
style: TextStyle(
fontFamily: _font,
fontSize: 12,
fontWeight: FontWeight.w700,
color: _success,
),
),
),
],
),
),
],
),
),
const SizedBox(height: 14),
Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(14),
),
child: Row(
children: const <Widget>[
Icon(Icons.info_outline_rounded, size: 18, color: _muted),
SizedBox(width: 10),
Expanded(
child: Text(
'Drop off any time within 7 days. Bring the QR label we’ll '
'send to your email.',
style: TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w500,
height: 1.4,
color: _muted,
),
),
),
],
),
),
];
}The store card is a bordered Column whose top half is a `SizedBox(height: 120)` filled by `CustomPaint(painter: _MiniMapPainter())`; a `ClipRRect` rounds only the top two corners so the map fuses with the card instead of floating inside it. Below, the store row pairs 'StyleCart · SoHo' and its '0.6 mi away' distance with an 'Open now' pill in `_success` green over a 12% tint — the one place the green token appears, so open status pops against an otherwise coral screen. A separate `_surface` note card with an info icon carries the operational fine print: seven days to drop off, bring the emailed QR label.
A schedule bar that says what it will do
Widget _sectionTitle(String text) {
return Text(
text,
style: const TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w800,
letterSpacing: 0.3,
color: _ink,
),
);
}
Widget _scheduleBar() {
return Container(
decoration: const BoxDecoration(
color: _canvas,
border: Border(top: BorderSide(color: _hairline)),
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 12),
child: SizedBox(
height: 56,
child: FilledButton(
onPressed: () => widget.onSchedule?.call(_pickup),
style: FilledButton.styleFrom(
backgroundColor: _brand,
foregroundColor: _canvas,
minimumSize: const Size.fromHeight(56),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: Text(
_pickup
? 'Schedule pickup · ${_slots[_slot].day} ${_slots[_slot].date}'
: 'Confirm drop-off',
style: const TextStyle(
fontFamily: _font,
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
),
),
),
);
}
}
class _Slot {
const _Slot(this.day, this.date, this.window);
final String day;
final String date;
final String window;
}`_scheduleBar` is a top-hairlined Container wrapping `SafeArea(top: false)`, so the white background extends beneath the home indicator while the 56px `FilledButton` stays above it. The label is the screen's payoff: in pickup mode it interpolates the live selection — `'Schedule pickup · ${_slots[_slot].day} ${_slots[_slot].date}'` renders as 'Schedule pickup · Thu 18 Jun' — and in drop-off mode it reads 'Confirm drop-off', so the button restates the decision before committing it. `onPressed` calls `widget.onSchedule?.call(_pickup)`, handing the backend the single bool it needs. The tiny `_Slot` class at the end is just three final Strings with a const constructor.
Painting the mini-map
/// A lightweight painted map preview: block grid, two roads, a park, and a
/// brand store pin — no tiles, no network.
class _MiniMapPainter extends CustomPainter {
const _MiniMapPainter();
@override
void paint(Canvas canvas, Size size) {
final Rect r = Offset.zero & size;
canvas.drawRect(r, Paint()..color = const Color(0xFFEDF0F2));
final Paint block = Paint()..color = const Color(0xFFE2E7EA);
const double cell = 34;
for (double y = -8; y < size.height; y += cell) {
for (double x = -8; x < size.width; x += cell) {
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(x + 4, y + 4, cell - 10, cell - 10),
const Radius.circular(3),
),
block,
);
}
}
// Park patch.
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(size.width * 0.06, size.height * 0.5,
size.width * 0.26, size.height * 0.4),
const Radius.circular(6),
),
Paint()..color = const Color(0xFFCFE6D2),
);
// Roads.
final Paint road = Paint()
..color = const Color(0xFFFFFFFF)
..strokeWidth = 9
..strokeCap = StrokeCap.round;
canvas.drawLine(
Offset(0, size.height * 0.62), Offset(size.width, size.height * 0.42),
road);
canvas.drawLine(
Offset(size.width * 0.66, 0), Offset(size.width * 0.78, size.height),
road);
// Store pin (teardrop) at the road junction.
final Offset pin = Offset(size.width * 0.7, size.height * 0.5);
const double pr = 11;
final Path tear = Path()
..moveTo(pin.dx, pin.dy + pr * 1.7)
..quadraticBezierTo(pin.dx - pr, pin.dy + pr * 0.4, pin.dx - pr,
pin.dy - pr * 0.2)
..arcToPoint(Offset(pin.dx + pr, pin.dy - pr * 0.2),
radius: const Radius.circular(pr))
..quadraticBezierTo(
pin.dx + pr, pin.dy + pr * 0.4, pin.dx, pin.dy + pr * 1.7)
..close();
canvas.drawShadow(tear, const Color(0x55000000), 3, true);
canvas.drawPath(tear, Paint()..color = const Color(0xFFFF385C));
canvas.drawCircle(
Offset(pin.dx, pin.dy - pr * 0.15), 4, Paint()..color = Colors.white);
}
@override
bool shouldRepaint(_MiniMapPainter old) => false;
}`_MiniMapPainter` fakes a map tile in four layers with no network and no image. It floods the canvas `0xFFEDF0F2`, then loops a 34px grid of small rounded rects starting at `-8` so partial blocks bleed off every edge like real buildings at a viewport boundary. A green `0xFFCFE6D2` RRect sized in fractions of `size` becomes the park, and two 9px white round-cap `drawLine` roads cross the canvas at slight diagonals. The teardrop pin sits at `(0.7w, 0.5h)` — deliberately on the road junction — built as a `Path` of two quadratic béziers meeting an `arcToPoint` for the round head, given depth by `drawShadow`, filled with the same `0xFFFF385C` brand coral, and finished with a 4px white dot. `shouldRepaint` returns `false` since nothing here reads state.
Full code
The complete, ready-to-paste source. Free to use in your projects — one click copies it all.
import 'package:flutter/material.dart';
/// StyleCart — Pickup or Drop-off.
///
/// Choose how the return travels back: a courier pickup (reveals a pickup
/// address + a horizontal slot picker) or a drop-off at a partner store
/// (reveals a painted mini-map store card). A pinned bar schedules the return.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// Airbnb-style tokens, own light theme + SafeArea. Painter-only graphics.
/// Exposes callbacks only.
class EcomOrdersReturnMethodScreen extends StatefulWidget {
const EcomOrdersReturnMethodScreen({
super.key,
this.onBack,
this.onChangeAddress,
this.onSchedule,
});
final VoidCallback? onBack;
final VoidCallback? onChangeAddress;
/// Fires with `true` for courier pickup, `false` for store drop-off.
final ValueChanged<bool>? onSchedule;
@override
State<EcomOrdersReturnMethodScreen> createState() =>
_EcomOrdersReturnMethodScreenState();
}
class _EcomOrdersReturnMethodScreenState
extends State<EcomOrdersReturnMethodScreen> {
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 _faint = Color(0xFFC1C1C1);
static const Color _brand = Color(0xFFFF385C);
static const Color _surface = Color(0xFFF2F2F2);
static const Color _success = Color(0xFF2E9E5B);
static const Color _hairline = Color(0xFFEBEBEB);
bool _pickup = true;
int _slot = 0;
static const List<_Slot> _slots = <_Slot>[
_Slot('Thu', '18 Jun', '9–12'),
_Slot('Thu', '18 Jun', '12–3'),
_Slot('Fri', '19 Jun', '9–12'),
_Slot('Fri', '19 Jun', '3–6'),
_Slot('Sat', '20 Jun', '10–1'),
];
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.light(useMaterial3: true),
child: Scaffold(
backgroundColor: _canvas,
body: SafeArea(
child: Column(
children: <Widget>[
_header(),
Expanded(
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
children: <Widget>[
_methodCard(
pickup: true,
icon: Icons.local_shipping_outlined,
title: 'Courier pickup',
subtitle: 'Free · we collect from your address',
),
const SizedBox(height: 12),
_methodCard(
pickup: false,
icon: Icons.storefront_outlined,
title: 'Drop at a store',
subtitle: 'Free · hand it in at a partner store',
),
const SizedBox(height: 22),
if (_pickup) ..._pickupDetails() else ..._dropDetails(),
],
),
),
_scheduleBar(),
],
),
),
),
);
}
Widget _header() {
return Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 20, 6),
child: Row(
children: <Widget>[
IconButton(
onPressed: widget.onBack,
icon: const Icon(Icons.arrow_back_rounded, size: 22, color: _ink),
),
const Text(
'How should we collect it?',
style: TextStyle(
fontFamily: _font,
fontSize: 18,
fontWeight: FontWeight.w800,
letterSpacing: -0.3,
color: _ink,
),
),
],
),
);
}
Widget _methodCard({
required bool pickup,
required IconData icon,
required String title,
required String subtitle,
}) {
final bool on = _pickup == pickup;
return GestureDetector(
onTap: () => setState(() => _pickup = pickup),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: on ? _brand.withValues(alpha: 0.04) : _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: on ? _brand : _hairline,
width: on ? 1.6 : 1,
),
),
child: Row(
children: <Widget>[
Container(
width: 44,
height: 44,
alignment: Alignment.center,
decoration: BoxDecoration(
color: on ? _brand.withValues(alpha: 0.12) : _surface,
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, size: 22, color: on ? _brand : _muted),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
const SizedBox(height: 3),
Text(
subtitle,
style: const TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w600,
color: _muted,
),
),
],
),
),
const SizedBox(width: 10),
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: on ? _brand : _faint,
width: on ? 6.5 : 2,
),
),
),
],
),
),
);
}
List<Widget> _pickupDetails() {
return <Widget>[
_sectionTitle('Pickup address'),
const SizedBox(height: 10),
GestureDetector(
onTap: widget.onChangeAddress,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _hairline),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Icon(Icons.location_on_outlined, size: 20, color: _faint),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Home',
style: TextStyle(
fontFamily: _font,
fontSize: 14.5,
fontWeight: FontWeight.w800,
color: _ink,
),
),
SizedBox(height: 3),
Text(
'24 Larkspur Lane, Apt 7B, Brooklyn, NY 11217',
style: TextStyle(
fontFamily: _font,
fontSize: 13.5,
fontWeight: FontWeight.w500,
height: 1.35,
color: _muted,
),
),
],
),
),
SizedBox(width: 8),
Text(
'Change',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w700,
color: _brand,
),
),
],
),
),
),
const SizedBox(height: 22),
_sectionTitle('Pickup slot'),
const SizedBox(height: 10),
SizedBox(
height: 96,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _slots.length,
separatorBuilder: (BuildContext c, int idx) =>
const SizedBox(width: 10),
itemBuilder: (BuildContext c, int i) => _slotCard(i),
),
),
];
}
Widget _slotCard(int i) {
final _Slot s = _slots[i];
final bool on = _slot == i;
return GestureDetector(
onTap: () => setState(() => _slot = i),
child: Container(
width: 82,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: on ? _brand : _canvas,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: on ? _brand : _hairline),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
s.day,
style: TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w700,
color: on ? _canvas : _muted,
),
),
const SizedBox(height: 4),
Text(
s.date,
style: TextStyle(
fontFamily: _font,
fontSize: 14,
fontWeight: FontWeight.w800,
color: on ? _canvas : _ink,
),
),
const SizedBox(height: 6),
Text(
s.window,
style: TextStyle(
fontFamily: _font,
fontSize: 12,
fontWeight: FontWeight.w600,
color: on ? _canvas.withValues(alpha: 0.85) : _faint,
),
),
],
),
),
);
}
List<Widget> _dropDetails() {
return <Widget>[
_sectionTitle('Nearest drop-off store'),
const SizedBox(height: 10),
Container(
decoration: BoxDecoration(
color: _canvas,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _hairline),
),
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(16)),
child: SizedBox(
height: 120,
width: double.infinity,
child: CustomPaint(painter: _MiniMapPainter()),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'StyleCart · SoHo',
style: TextStyle(
fontFamily: _font,
fontSize: 15,
fontWeight: FontWeight.w800,
color: _ink,
),
),
SizedBox(height: 3),
Text(
'112 Spring St · 0.6 mi away',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w600,
color: _muted,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: _success.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'Open now',
style: TextStyle(
fontFamily: _font,
fontSize: 12,
fontWeight: FontWeight.w700,
color: _success,
),
),
),
],
),
),
],
),
),
const SizedBox(height: 14),
Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(14),
),
child: Row(
children: const <Widget>[
Icon(Icons.info_outline_rounded, size: 18, color: _muted),
SizedBox(width: 10),
Expanded(
child: Text(
'Drop off any time within 7 days. Bring the QR label we’ll '
'send to your email.',
style: TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w500,
height: 1.4,
color: _muted,
),
),
),
],
),
),
];
}
Widget _sectionTitle(String text) {
return Text(
text,
style: const TextStyle(
fontFamily: _font,
fontSize: 13,
fontWeight: FontWeight.w800,
letterSpacing: 0.3,
color: _ink,
),
);
}
Widget _scheduleBar() {
return Container(
decoration: const BoxDecoration(
color: _canvas,
border: Border(top: BorderSide(color: _hairline)),
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 12),
child: SizedBox(
height: 56,
child: FilledButton(
onPressed: () => widget.onSchedule?.call(_pickup),
style: FilledButton.styleFrom(
backgroundColor: _brand,
foregroundColor: _canvas,
minimumSize: const Size.fromHeight(56),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: Text(
_pickup
? 'Schedule pickup · ${_slots[_slot].day} ${_slots[_slot].date}'
: 'Confirm drop-off',
style: const TextStyle(
fontFamily: _font,
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
),
),
),
);
}
}
class _Slot {
const _Slot(this.day, this.date, this.window);
final String day;
final String date;
final String window;
}
/// A lightweight painted map preview: block grid, two roads, a park, and a
/// brand store pin — no tiles, no network.
class _MiniMapPainter extends CustomPainter {
const _MiniMapPainter();
@override
void paint(Canvas canvas, Size size) {
final Rect r = Offset.zero & size;
canvas.drawRect(r, Paint()..color = const Color(0xFFEDF0F2));
final Paint block = Paint()..color = const Color(0xFFE2E7EA);
const double cell = 34;
for (double y = -8; y < size.height; y += cell) {
for (double x = -8; x < size.width; x += cell) {
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(x + 4, y + 4, cell - 10, cell - 10),
const Radius.circular(3),
),
block,
);
}
}
// Park patch.
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(size.width * 0.06, size.height * 0.5,
size.width * 0.26, size.height * 0.4),
const Radius.circular(6),
),
Paint()..color = const Color(0xFFCFE6D2),
);
// Roads.
final Paint road = Paint()
..color = const Color(0xFFFFFFFF)
..strokeWidth = 9
..strokeCap = StrokeCap.round;
canvas.drawLine(
Offset(0, size.height * 0.62), Offset(size.width, size.height * 0.42),
road);
canvas.drawLine(
Offset(size.width * 0.66, 0), Offset(size.width * 0.78, size.height),
road);
// Store pin (teardrop) at the road junction.
final Offset pin = Offset(size.width * 0.7, size.height * 0.5);
const double pr = 11;
final Path tear = Path()
..moveTo(pin.dx, pin.dy + pr * 1.7)
..quadraticBezierTo(pin.dx - pr, pin.dy + pr * 0.4, pin.dx - pr,
pin.dy - pr * 0.2)
..arcToPoint(Offset(pin.dx + pr, pin.dy - pr * 0.2),
radius: const Radius.circular(pr))
..quadraticBezierTo(
pin.dx + pr, pin.dy + pr * 0.4, pin.dx, pin.dy + pr * 1.7)
..close();
canvas.drawShadow(tear, const Color(0x55000000), 3, true);
canvas.drawPath(tear, Paint()..color = const Color(0xFFFF385C));
canvas.drawCircle(
Offset(pin.dx, pin.dy - pr * 0.15), 4, Paint()..color = Colors.white);
}
@override
bool shouldRepaint(_MiniMapPainter old) => false;
}
Plus bundled 5 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-orders-return-method2. AI agent (MCP)
Connect FlutterKit's MCP server in Claude or Cursor and just ask your agent to install ecom-orders-return-method — it fetches and writes the files for you.
FAQ
Is this return-method screen free to use in a commercial app?
Yes. FlutterKit screens are free to use, including commercially — drop this pickup/drop-off screen into a client project or a store release as-is or restyled, with no licence fee and no attribution required.
Does it need any packages, plugins, or downloaded fonts?
No packages at all — the code.json lists an empty dependency set. Even the mini-map is a `CustomPainter`, so there is no maps SDK to configure. The only asset is the bundled Manrope font family, referenced through the `_font` constant; register Manrope in your `pubspec.yaml` fonts section (or swap `_font` for a family you already ship) and the screen runs on plain Flutter.
Which Flutter version does this code require?
Flutter 3.27 or newer, because the tints use `Color.withValues(alpha: ...)` in the method cards, the slot chips, and the Open-now badge. On an older SDK, replace each `withValues(alpha: x)` with `withOpacity(x)`; the constructor also uses `super.key`, which needs Dart 2.17 / Flutter 3.0 at minimum.
How do I replace the painted mini-map with a real map?
Swap the `CustomPaint(painter: _MiniMapPainter())` inside the 120px `SizedBox` for a `GoogleMap` or `FlutterMap` widget centred on the store's coordinates — the `ClipRRect` above it already handles the rounded top corners. Keeping the painter as a loading placeholder also works well, since it costs nothing and matches the brand colour of a real pin marker.
How do I load real pickup slots instead of the hard-coded five?
Replace the `static const _slots` list with slots fetched from your API — keep the `_Slot(day, date, window)` shape, or map `DateTime` ranges into it with `intl` formatting. Nothing else changes: the rail's `itemCount`, the chip builder, and even the CTA label all read from `_slots[_slot]`, so the button keeps announcing the newly selected real slot automatically. Just reset `_slot = 0` when a fresh list arrives so the index stays valid.
