Screens / commerce

Order tracking

Shows an order with its dated delivery steps, items, amounts paid and address, with a confirmed cancellation sent only once, returns and support.

Pro

Import

Order tracking is part of Fliin Pro. With a license key, sign in once with fliin login, then add it in a Flutter app where fliin init has run:

fliin login
fliin add order

Also installs: alert, app-bar, button, chip, confirm-delete, core, empty-state, icons, link-button, list-row, order-summary, page, result-card, section-header, separator, skeleton, surface, text, tracking-steps

Examples

Shipped

A shipped order: where the parcel is, its items, the delivery and the payment, with a way to track the parcel (onTrackParcel).

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleShippedOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: OrderShown(sampleShippedOrder),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Preparing

An order being prepared can still be cancelled, after a confirmation; the service does the cancelling.

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: samplePreparingOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: OrderShown(samplePreparingOrder),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Unconfirmed

When the cancellation is not confirmed in time, a notice says so: the order may or may not be cancelled yet.

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: samplePreparingOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: OrderShown(samplePreparingOrder, unconfirmed: true, notice: OrderNotice.unconfirmed),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Delivered

A delivered order offers a return (onReturn) and to buy it again (onBuyAgain).

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleDeliveredOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: OrderShown(sampleDeliveredOrder),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Cancelled

A cancelled order keeps its detail and says when the refund comes.

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleCancelledOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: OrderShown(sampleCancelledOrder),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Loading

While the order loads, placeholders keep its layout.

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleShippedOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: const OrderLoading(),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Error

When the order cannot load, the screen says so and offers to try again.

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleShippedOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: const OrderFailed(),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Offline

Without a connection, the screen asks to reconnect.

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleShippedOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleShippedOrder.id,
      initial: const OrderOffline(),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onReturn: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
    );
  }
}

Invoice

Each item opens its product (onOpenItem), and "Invoice", under the address, the order's invoice (onInvoice).

import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return OrderScreen.standalone(
      service: SampleOrderService(order: sampleDeliveredOrder, latency: const Duration(milliseconds: 600)),
      orderId: sampleDeliveredOrder.id,
      initial: OrderShown(sampleDeliveredOrder),
      now: () => DateTime(2026, 10, 24, 10),
      onBack: () {},
      onTrackParcel: (_) {},
      onContactSupport: (_) {},
      onBuyAgain: (_) {},
      onOpenItem: (_) {},
      onInvoice: (_) {},
    );
  }
}

Routing

fliin add order prints the route for the router it finds in your pubspec, a file next to the page that wires its navigation. Each of them:

go_router

// lib/order_route.dart, next to order_page.dart.
import 'package:go_router/go_router.dart';

import 'order_page.dart';

/// Add orderRoute to the routes of your GoRouter.
final orderRoute = GoRoute(
  path: '/orders/:id',
  builder: (context, state) => OrderPage(
    orderId: state.pathParameters['id']!,
    // Alone in the stack (deep link, go): your app's home.
    onBack: () => context.canPop() ? context.pop() : context.go('/'),
    // The path of the parcel tracking in your app.
    onTrackParcel: (order) => context.push('/orders/${Uri.encodeComponent(order.id)}/tracking'),
    // The path of the return of an order in your app.
    onReturn: (order) => context.push('/orders/${Uri.encodeComponent(order.id)}/return'),
    // The path of the help on an order in your app.
    onContactSupport: (order) => context.push('/orders/${Uri.encodeComponent(order.id)}/support'),
    // The cart: Fliin's checkout screen, or yours.
    onBuyAgain: (order) => context.push('/checkout'),
  ),
);

navigator

// lib/order_route.dart, next to order_page.dart.
import 'package:flutter/material.dart';

import 'order_page.dart';

/// Opens “Order tracking”: `Navigator.of(context).push(orderRoute(orderId, parcelTrackingPage: …, returnPage: …, supportPage: …, cartPage: …))`.
/// [parcelTrackingPage] builds the parcel tracking in your app.
/// [returnPage] builds the return of an order in your app.
/// [supportPage] builds the help on an order in your app.
/// [cartPage] builds the cart: the page of Fliin's checkout screen with its callbacks, or yours (checkoutRoute cannot come from here, checkout leads to order).
Route<void> orderRoute(
  String orderId, {
  required Widget Function(String orderId) parcelTrackingPage,
  required Widget Function(String orderId) returnPage,
  required Widget Function(String orderId) supportPage,
  required WidgetBuilder cartPage,
}) => MaterialPageRoute<void>(
  builder: (context) => OrderPage(
    orderId: orderId,
    onBack: () => Navigator.of(context).maybePop(),
    onTrackParcel: (order) => Navigator.of(context).push(MaterialPageRoute<void>(builder: (_) => parcelTrackingPage(order.id))),
    onReturn: (order) => Navigator.of(context).push(MaterialPageRoute<void>(builder: (_) => returnPage(order.id))),
    onContactSupport: (order) => Navigator.of(context).push(MaterialPageRoute<void>(builder: (_) => supportPage(order.id))),
    onBuyAgain: (order) => Navigator.of(context).push(MaterialPageRoute<void>(builder: cartPage)),
  ),
);

State

The controller is a ChangeNotifier from widgets.dart, with no package. fliin add order prints the page that holds it with the state management it finds, its imports written for your package; below they read your_app. Your backend implements the Service interface of the screen's _data.dart file:

none

// lib/order_page.dart
// Your backend: implement OrderService (order_data.dart) and pass it instead of the sample service.
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';

class OrderPage extends StatelessWidget {
  const OrderPage({
    super.key,
    required this.orderId,
    required this.onBack,
    required this.onTrackParcel,
    required this.onReturn,
    required this.onContactSupport,
    required this.onBuyAgain,
  });

  final String orderId;
  final VoidCallback onBack;
  final ValueChanged<OrderDetail> onTrackParcel;
  final ValueChanged<OrderDetail> onReturn;
  final ValueChanged<OrderDetail> onContactSupport;
  final ValueChanged<OrderDetail> onBuyAgain;

  @override
  Widget build(BuildContext context) => OrderScreen.standalone(
    key: ValueKey(orderId),
    service: SampleOrderService(),
    orderId: orderId,
    onBack: onBack,
    onTrackParcel: onTrackParcel,
    onReturn: onReturn,
    onContactSupport: onContactSupport,
    onBuyAgain: onBuyAgain,
  );
}

provider

// lib/order_page.dart
// Your backend: implement OrderService (order_data.dart) and pass it instead of the sample service.
import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

class OrderPage extends StatelessWidget {
  const OrderPage({
    super.key,
    required this.orderId,
    required this.onBack,
    required this.onTrackParcel,
    required this.onReturn,
    required this.onContactSupport,
    required this.onBuyAgain,
  });

  final String orderId;
  final VoidCallback onBack;
  final ValueChanged<OrderDetail> onTrackParcel;
  final ValueChanged<OrderDetail> onReturn;
  final ValueChanged<OrderDetail> onContactSupport;
  final ValueChanged<OrderDetail> onBuyAgain;

  @override
  Widget build(BuildContext context) => ChangeNotifierProvider(
    create: (_) => OrderController(service: SampleOrderService(), orderId: orderId)..load(),
    child: Builder(
      builder: (context) => OrderScreen(
        controller: context.read<OrderController>(),
        onBack: onBack,
        onTrackParcel: onTrackParcel,
        onReturn: onReturn,
        onContactSupport: onContactSupport,
        onBuyAgain: onBuyAgain,
      ),
    ),
  );
}

riverpod

// lib/order_page.dart
// Your backend: implement OrderService (order_data.dart) and pass it instead of the sample service.
import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final orderControllerProvider = Provider.autoDispose.family<OrderController, String>((ref, orderId) {
  final controller = OrderController(service: SampleOrderService(), orderId: orderId)..load();
  ref.onDispose(controller.dispose);
  return controller;
});

class OrderPage extends ConsumerWidget {
  const OrderPage({
    super.key,
    required this.orderId,
    required this.onBack,
    required this.onTrackParcel,
    required this.onReturn,
    required this.onContactSupport,
    required this.onBuyAgain,
  });

  final String orderId;
  final VoidCallback onBack;
  final ValueChanged<OrderDetail> onTrackParcel;
  final ValueChanged<OrderDetail> onReturn;
  final ValueChanged<OrderDetail> onContactSupport;
  final ValueChanged<OrderDetail> onBuyAgain;

  @override
  Widget build(BuildContext context, WidgetRef ref) => OrderScreen(
    controller: ref.watch(orderControllerProvider(orderId)),
    onBack: onBack,
    onTrackParcel: onTrackParcel,
    onReturn: onReturn,
    onContactSupport: onContactSupport,
    onBuyAgain: onBuyAgain,
  );
}

bloc

// lib/order_page.dart
// Your backend: implement OrderService (order_data.dart) and pass it instead of the sample service.
import 'package:your_app/ui/fliin/screens/order/order_controller.dart';
import 'package:your_app/ui/fliin/screens/order/order_data.dart';
import 'package:your_app/ui/fliin/screens/order/order_screen.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

/// The screen's controller as a bloc, for your BlocListener and BlocBuilder:
/// one emission per controller notification. `version` tells them apart
/// when `state` does not change (mode, filters, text…, read them on
/// `controller`). The screen listens to the controller itself.
class OrderCubit extends Cubit<({OrderState state, int version})> {
  OrderCubit(this.controller) : super((state: controller.state, version: 0)) {
    controller.addListener(_changed);
  }

  final OrderController controller;

  void _changed() => emit((state: controller.state, version: state.version + 1));

  @override
  Future<void> close() {
    controller
      ..removeListener(_changed)
      ..dispose();
    return super.close();
  }
}

class OrderPage extends StatelessWidget {
  const OrderPage({
    super.key,
    required this.orderId,
    required this.onBack,
    required this.onTrackParcel,
    required this.onReturn,
    required this.onContactSupport,
    required this.onBuyAgain,
  });

  final String orderId;
  final VoidCallback onBack;
  final ValueChanged<OrderDetail> onTrackParcel;
  final ValueChanged<OrderDetail> onReturn;
  final ValueChanged<OrderDetail> onContactSupport;
  final ValueChanged<OrderDetail> onBuyAgain;

  @override
  Widget build(BuildContext context) => BlocProvider(
    create: (_) => OrderCubit(OrderController(service: SampleOrderService(), orderId: orderId)..load()),
    child: Builder(
      builder: (context) => OrderScreen(
        controller: context.read<OrderCubit>().controller,
        onBack: onBack,
        onTrackParcel: onTrackParcel,
        onReturn: onReturn,
        onContactSupport: onContactSupport,
        onBuyAgain: onBuyAgain,
      ),
    ),
  );
}

API

OrderScreen: class extends StatefulWidget
OrderScreen.new: const new({super.key, required OrderController controller, DateTime Function()? now, OrderDateFormat? formatDate, VoidCallback? onBack, ValueChanged<OrderDetail>? onTrackParcel, ValueChanged<OrderDetail>? onReturn, ValueChanged<OrderDetail>? onContactSupport, ValueChanged<OrderDetail>? onBuyAgain, ValueChanged<OrderItem>? onOpenItem, ValueChanged<OrderDetail>? onInvoice})
OrderScreen.standalone: const new({super.key, required OrderService service, required String orderId, OrderState? initial, DateTime Function()? now, OrderDateFormat? formatDate, VoidCallback? onBack, ValueChanged<OrderDetail>? onTrackParcel, ValueChanged<OrderDetail>? onReturn, ValueChanged<OrderDetail>? onContactSupport, ValueChanged<OrderDetail>? onBuyAgain, ValueChanged<OrderItem>? onOpenItem, ValueChanged<OrderDetail>? onInvoice})
OrderScreen.controller: get OrderController?
OrderScreen.service: get OrderService?
OrderScreen.orderId: get String?
OrderScreen.initial: get OrderState?
OrderScreen.now: get DateTime Function()?
OrderScreen.formatDate: get OrderDateFormat?
OrderScreen.onBack: get VoidCallback?
OrderScreen.onTrackParcel: get ValueChanged<OrderDetail>?
OrderScreen.onReturn: get ValueChanged<OrderDetail>?
OrderScreen.onContactSupport: get ValueChanged<OrderDetail>?
OrderScreen.onBuyAgain: get ValueChanged<OrderDetail>?
OrderScreen.onOpenItem: get ValueChanged<OrderItem>?
OrderScreen.onInvoice: get ValueChanged<OrderDetail>?
OrderScreen.createState: State<OrderScreen>()
OrderState: sealed class permits {OrderFailed, OrderLoading, OrderOffline, OrderShown}
OrderState.new: const new()
OrderLoading: final class extends OrderState
OrderLoading.new: const new()
OrderFailed: final class extends OrderState
OrderFailed.new: const new()
OrderOffline: final class extends OrderState
OrderOffline.new: const new()
OrderBusy: enum {cancelling, checking, refreshing}
OrderBusy.cancelling: static final OrderBusy
OrderBusy.checking: static final OrderBusy
OrderBusy.refreshing: static final OrderBusy
OrderNotice: enum {cancelled, shipped, delivered, refused, unconfirmed, notCancelled, stillUnknown, checkOffline, checkFailed, refreshFailed, refreshOffline}
OrderNotice.cancelled: static final OrderNotice
OrderNotice.shipped: static final OrderNotice
OrderNotice.delivered: static final OrderNotice
OrderNotice.refused: static final OrderNotice
OrderNotice.unconfirmed: static final OrderNotice
OrderNotice.notCancelled: static final OrderNotice
OrderNotice.stillUnknown: static final OrderNotice
OrderNotice.checkOffline: static final OrderNotice
OrderNotice.checkFailed: static final OrderNotice
OrderNotice.refreshFailed: static final OrderNotice
OrderNotice.refreshOffline: static final OrderNotice
OrderShown: final class extends OrderState
OrderShown.new: const new(OrderDetail order, {OrderBusy? busy, OrderNotice? notice})
OrderShown.order: get OrderDetail
OrderShown.busy: get OrderBusy?
OrderShown.notice: get OrderNotice?
OrderShown.unconfirmed: get bool
OrderShown.cancellable: get bool
OrderController: class extends ChangeNotifier
OrderController.new: new({required OrderService service, required String orderId, OrderState initial})
OrderController.service: get OrderService
OrderController.orderId: get String
OrderController.state: get OrderState
OrderController.load: Future<bool>()
OrderController.refresh: Future<bool>()
OrderController.cancel: Future<bool>()
OrderController.checkCancellation: Future<bool>()
OrderController.dispose: void()
OrderStep: enum {ordered, prepared, shipped, outForDelivery, delivered}
OrderStep.ordered: static final OrderStep
OrderStep.prepared: static final OrderStep
OrderStep.shipped: static final OrderStep
OrderStep.outForDelivery: static final OrderStep
OrderStep.delivered: static final OrderStep
OrderStatus: enum {preparing, shipped, delivered, cancelled, refunded}
OrderStatus.preparing: static final OrderStatus
OrderStatus.shipped: static final OrderStatus
OrderStatus.delivered: static final OrderStatus
OrderStatus.cancelled: static final OrderStatus
OrderStatus.refunded: static final OrderStatus
OrderClosure: enum {cancelled, refunded}
OrderClosure.cancelled: static final OrderClosure
OrderClosure.refunded: static final OrderClosure
OrderItem: final class
OrderItem.new: const new({required String title, required String price, required int quantity, String? variant, ImageProvider? image, String? id})
OrderItem.id: get String?
OrderItem.title: get String
OrderItem.price: get String
OrderItem.quantity: get int
OrderItem.variant: get String?
OrderItem.image: get ImageProvider?
OrderAmounts: final class
OrderAmounts.new: const new({required String subtotal, required String shipping, required String total, String? discount})
OrderAmounts.subtotal: get String
OrderAmounts.shipping: get String
OrderAmounts.discount: get String?
OrderAmounts.total: get String
OrderCarrier: final class
OrderCarrier.new: const new({required String name, required String trackingNumber})
OrderCarrier.name: get String
OrderCarrier.trackingNumber: get String
OrderDetail: final class
OrderDetail.new: new({required String id, required String number, required List<OrderItem> items, required OrderAmounts amounts, required String address, required Map<OrderStep, DateTime> reached, Map<OrderStep, DateTime> expected, OrderClosure? closure, DateTime? closedAt, String? refund, OrderCarrier? carrier, required String cancelKey, bool cancellationPending})
OrderDetail.id: get String
OrderDetail.number: get String
OrderDetail.items: get List<OrderItem>
OrderDetail.amounts: get OrderAmounts
OrderDetail.address: get String
OrderDetail.reached: get Map<OrderStep, DateTime>
OrderDetail.expected: get Map<OrderStep, DateTime>
OrderDetail.closure: get OrderClosure?
OrderDetail.closedAt: get DateTime?
OrderDetail.refund: get String?
OrderDetail.carrier: get OrderCarrier?
OrderDetail.cancelKey: get String
OrderDetail.cancellationPending: get bool
OrderDetail.step: get OrderStep
OrderDetail.status: get OrderStatus
OrderDetail.itemCount: get int
OrderNoNetwork: final class implements Exception
OrderNoNetwork.new: const new()
OrderCancelRefused: final class implements Exception
OrderCancelRefused.new: const new(OrderDetail order)
OrderCancelRefused.order: get OrderDetail
OrderService: abstract interface class
OrderService.new: new()
OrderService.load: abstract Future<OrderDetail>(String id)
OrderService.cancel: abstract Future<OrderDetail>(String id, {required String key})
sampleShippedOrder: get dynamic
samplePreparingOrder: get dynamic
sampleDeliveredOrder: get dynamic
sampleCancelledOrder: get dynamic
SampleOrderService: final class implements OrderService
SampleOrderService.new: new({OrderDetail? order, Duration latency, bool shipsBeforeCancel, bool refusesCancel, bool losesCancelResponse})
SampleOrderService.latency: get Duration
SampleOrderService.shipsBeforeCancel: get bool
SampleOrderService.shipsBeforeCancel=: set bool
SampleOrderService.refusesCancel: get bool
SampleOrderService.refusesCancel=: set bool
SampleOrderService.losesCancelResponse: get bool
SampleOrderService.losesCancelResponse=: set bool
SampleOrderService.cancelKeys: get List<String>
SampleOrderService.load: Future<OrderDetail>(String id)
SampleOrderService.cancel: Future<OrderDetail>(String id, {required String key})
OrderDateFormat: typedef = String Function(DateTime date, Locale locale)
orderL10n: const Map<String, Map<String, String>>
OrderStrings: final class
OrderStrings.new: const new(String language, {required DateTime now, OrderDateFormat? format})
OrderStrings.of: factory new(BuildContext context, {required DateTime now, OrderDateFormat? format})
OrderStrings.language: get String
OrderStrings.now: get DateTime
OrderStrings.format: get OrderDateFormat?
OrderStrings.digits: String(int n)
OrderStrings.date: String(DateTime date)
OrderStrings.when: String(DateTime date)
OrderStrings.day: String(DateTime date)
OrderStrings.expected: String(DateTime date)
OrderStrings.title: get String
OrderStrings.back: get String
OrderStrings.loading: get String
OrderStrings.refresh: get String
OrderStrings.number: String(String number)
OrderStrings.placed: String(DateTime date)
OrderStrings.closed: String(OrderClosure closure, DateTime date)
OrderStrings.status: String(OrderStatus status)
OrderStrings.step: String(OrderStep step)
OrderStrings.current: get String
OrderStrings.upcoming: get String
OrderStrings.stepSpoken: String(int index, int count, List<String> parts)
OrderStrings.tracking: get String
OrderStrings.trackingLabel: get String
OrderStrings.trackParcel: String(String carrier)
OrderStrings.items: get String
OrderStrings.quantity: String(int quantity)
OrderStrings.summary: get String
OrderStrings.subtotal: get String
OrderStrings.shipping: get String
OrderStrings.discount: get String
OrderStrings.total: get String
OrderStrings.address: get String
OrderStrings.invoice: get String
OrderStrings.help: get String
OrderStrings.cancel: get String
OrderStrings.cancelling: get String
OrderStrings.cancelTitle: get String
OrderStrings.cancelMessage: get String
OrderStrings.cancelKeep: get String
OrderStrings.checkCancel: get String
OrderStrings.checking: get String
OrderStrings.returnItem: get String
OrderStrings.support: get String
OrderStrings.buyAgain: get String
OrderStrings.noticeCancelled: get String
OrderStrings.noticeShipped: get String
OrderStrings.noticeDelivered: get String
OrderStrings.noticeRefused: get String
OrderStrings.noticeUnconfirmed: get String
OrderStrings.noticeNotCancelled: get String
OrderStrings.noticeStillUnknown: get String
OrderStrings.noticeCheckOffline: get String
OrderStrings.noticeCheckFailed: get String
OrderStrings.noticeRefreshFailed: get String
OrderStrings.noticeRefreshOffline: get String
OrderStrings.errorTitle: get String
OrderStrings.errorMessage: get String
OrderStrings.offlineTitle: get String
OrderStrings.offlineMessage: get String
OrderStrings.retry: get String

Strings

Every label in English, French and Arabic. The screen follows the closest Localizations; the same table is in the manifest, ready for your ARB files.

Key	`en`	`fr`	`ar`
`orderTitle`	Order details	Détail de la commande	تفاصيل الطلب
`orderBack`	Back	Retour	رجوع
`orderLoading`	Loading the order	Chargement de la commande	جارٍ تحميل الطلب
`orderRefresh`	Refresh the order	Actualiser la commande	تحديث الطلب
`orderNumber`	Order {number}	Commande {number}	الطلب ⁨{number}⁩
`orderPlaced`	Placed {date}	Passée {date}	تم الطلب {date}
`orderClosedCancelled`	Cancelled {date}	Annulée {date}	أُلغي {date}
`orderClosedRefunded`	Refunded {date}	Remboursée {date}	استُرد {date}
`orderStatusPreparing`	Preparing	En préparation	قيد التجهيز
`orderStatusShipped`	Shipped	Expédiée	تم الشحن
`orderStatusDelivered`	Delivered	Livrée	تم التوصيل
`orderStatusCancelled`	Cancelled	Annulée	ملغى
`orderStatusRefunded`	Refunded	Remboursée	تم الاسترداد
`orderStepOrdered`	Ordered	Commandée	تم الطلب
`orderStepPrepared`	Prepared	Préparée	تم التجهيز
`orderStepShipped`	Shipped	Expédiée	تم الشحن
`orderStepOutForDelivery`	Out for delivery	En livraison	قيد التوصيل
`orderStepDelivered`	Delivered	Livrée	تم التوصيل
`orderStepCurrent`	Current	En cours	الحالية
`orderStepUpcoming`	Upcoming	À venir	قادمة
`orderStepOf`	Step {index} of {count}	Étape {index} sur {count}	الخطوة {index} من {count}
`orderSeparator`	,	,	،
`orderStepExpected`	Expected {date}	Prévue {date}	متوقع {date}
`orderDateOn`	on {date}	le {date}	في {date}
`orderToday`	today	aujourd’hui	اليوم
`orderYesterday`	yesterday	hier	أمس
`orderTomorrow`	tomorrow	demain	غدًا
`orderTodayTitle`	Today	Aujourd’hui	اليوم
`orderYesterdayTitle`	Yesterday	Hier	أمس
`orderDate`	{month} {day}	{day} {month}	{day} {month}
`orderDateYear`	{month} {day}, {year}	{day} {month} {year}	{day} {month} {year}
`orderMonths`	January,February,March,April,May,June,July,August,September,October,November,December	janvier,février,mars,avril,mai,juin,juillet,août,septembre,octobre,novembre,décembre	يناير,فبراير,مارس,أبريل,مايو,يونيو,يوليو,أغسطس,سبتمبر,أكتوبر,نوفمبر,ديسمبر
`orderTracking`	Tracking	Suivi	التتبع
`orderTrackingLabel`	Order tracking	Suivi de la commande	تتبع الطلب
`orderTrackParcel`	Track the parcel with {carrier}	Suivre le colis chez {carrier}	تتبّع الطرد لدى {carrier}
`orderItems`	Items	Articles	المنتجات
`orderQuantity`	Quantity: {quantity}	Quantité : {quantity}	الكمية: {quantity}
`orderSummary`	Summary	Récapitulatif	الملخص
`orderSubtotal`	Subtotal	Sous-total	المجموع الفرعي
`orderShipping`	Shipping	Livraison	الشحن
`orderDiscount`	Discount	Remise	الخصم
`orderTotal`	Total paid	Total payé	الإجمالي المدفوع
`orderAddress`	Delivery address	Adresse de livraison	عنوان التوصيل
`orderInvoice`	Invoice	Facture	الفاتورة
`orderHelp`	Help	Aide	المساعدة
`orderCancel`	Cancel order	Annuler la commande	إلغاء الطلب
`orderCancelling`	Cancelling the order	Annulation en cours	جارٍ إلغاء الطلب
`orderCancelTitle`	Cancel this order?	Annuler cette commande ?	إلغاء هذا الطلب؟
`orderCancelMessage`	Its items will not be shipped.	Ses articles ne seront pas expédiés.	لن تُشحن منتجاته.
`orderCancelKeep`	Keep order	Garder la commande	الاحتفاظ بالطلب
`orderCheckCancel`	Check the cancellation	Vérifier l’annulation	التحقق من الإلغاء
`orderChecking`	Checking the cancellation	Vérification de l’annulation	جارٍ التحقق من الإلغاء
`orderReturn`	Return an item	Retourner un article	إرجاع منتج
`orderSupport`	Contact support	Contacter le support	التواصل مع الدعم
`orderBuyAgain`	Buy again	Racheter	اشترِ مجددًا
`orderNoticeCancelled`	Your order is cancelled.	Votre commande est annulée.	تم إلغاء طلبك.
`orderNoticeShipped`	This order has just shipped and can no longer be cancelled. You can return its items once it is delivered.	Cette commande vient d’être expédiée : elle ne s’annule plus. Vous pourrez retourner ses articles une fois livrée.	شُحن هذا الطلب للتو ولم يعد إلغاؤه ممكنًا. يمكنك إرجاع منتجاته بعد توصيله.
`orderNoticeDelivered`	This order is already delivered. You can return its items.	Cette commande est déjà livrée. Vous pouvez retourner ses articles.	تم توصيل هذا الطلب بالفعل. يمكنك إرجاع منتجاته.
`orderNoticeRefused`	This order can no longer be cancelled. Nothing has changed.	Cette commande ne s’annule plus. Rien n’a changé.	لم يعد إلغاء هذا الطلب ممكنًا. لم يتغير شيء.
`orderNoticeUnconfirmed`	The cancellation could not be confirmed. It may have gone through: check it before trying again.	L’annulation n’a pas pu être confirmée. Elle a peut-être abouti : vérifiez-la avant de réessayer.	تعذّر تأكيد الإلغاء، وربما تم بالفعل. تحقّق منه قبل المحاولة مجددًا.
`orderNoticeNotCancelled`	The cancellation did not go through. Your order goes on.	L’annulation n’a pas abouti. Votre commande suit son cours.	لم يتم الإلغاء. طلبك مستمر.
`orderNoticeStillUnknown`	The outcome is not known yet. Check again in a moment.	L’issue n’est pas encore connue. Vérifiez de nouveau dans un instant.	النتيجة غير معروفة بعد. تحقّق مجددًا بعد قليل.
`orderNoticeCheckOffline`	You are offline. Check again once connected.	Vous êtes hors ligne. Vérifiez de nouveau une fois connecté.	أنت غير متصل. تحقّق مجددًا عند الاتصال.
`orderNoticeCheckFailed`	The cancellation could not be checked. Try again in a moment.	L’annulation n’a pas pu être vérifiée. Réessayez dans un instant.	تعذّر التحقق من الإلغاء. أعد المحاولة بعد قليل.
`orderNoticeRefreshFailed`	The order could not refresh.	La commande n’a pas pu se mettre à jour.	تعذّر تحديث الطلب.
`orderNoticeRefreshOffline`	You are offline. The order shown may be out of date.	Vous êtes hors ligne. La commande affichée n’est peut-être pas à jour.	أنت غير متصل. قد لا يكون الطلب المعروض محدّثًا.
`orderErrorTitle`	The order could not load	Impossible de charger la commande	تعذّر تحميل الطلب
`orderErrorMessage`	Try again in a moment.	Réessayez dans un instant.	أعد المحاولة بعد قليل.
`orderOfflineTitle`	You are offline	Vous êtes hors ligne	أنت غير متصل
`orderOfflineMessage`	Connect to see this order.	Connectez-vous pour voir cette commande.	اتصل لعرض هذا الطلب.
`orderRetry`	Try again	Réessayer	أعد المحاولة

Reference renders

The 16 images published with version 0.2.5, rendered by the shared harness on macOS with Flutter 3.47.7. Each shows every state side by side, at the size of an iPhone (390 × 844) or of an Android phone (412 × 915). fliin verify order compares your copy to them.

Order tracking, iOS, Light, text 1.0×, Left to right — iOS · Light

Order tracking, iOS, Light, text 1.0×, Right to left — iOS · Light

Order tracking, iOS, Dark, text 1.0×, Left to right — iOS · Dark

Order tracking, iOS, Dark, text 1.0×, Right to left — iOS · Dark

Order tracking, Android, Light, text 1.0×, Left to right — Android · Light

Order tracking, Android, Light, text 1.0×, Right to left — Android · Light

Order tracking, Android, Dark, text 1.0×, Left to right — Android · Dark

Order tracking, Android, Dark, text 1.0×, Right to left — Android · Dark

Use it to

show the delivery of a purchase step by step
cancel an order not shipped yet after a confirmation
show the items, amount paid and address of a past purchase
offer to send back a received item or to reach support
open the parcel tracking on the carrier's site

Not for

the thank-you and receipt right after payment: use the order confirmation (order-confirmation)
the list of all purchases: use the order history (orders)
dated vertical steps on their own: use the tracking steps (tracking-steps)

States

Shipped
Preparing
Unconfirmed
Delivered
Cancelled
Loading
Error
Offline