Get started
On this page

Blocks / commerce

Order row

Shows an order in a list with the photo of its first item, its number, date, item count and total, and its status written in words, read as one node.

Pro
16 of 16 variants pass
Order row, preparing state

Import

Order row 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-row

Also installs: core, badge, chip, list-row

Examples

Preparing

An order in a list of orders: number, date, items and total, and its status as a badge. statusColor says how it is going: warning while it is prepared.

Order row, preparing state 
import 'package:your_app/ui/fliin/components/badge/fl_badge.dart';
import 'package:your_app/ui/fliin/components/list_row/fl_list_row.dart';
import 'package:your_app/ui/fliin/components/order_row/fl_order_row.dart';
import 'package:your_app/ui/fliin/components/result_card/fl_result_card.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlListGroup(
      children: [
        FlOrderRow(
          title: 'Order FL-2026-10511',
          subtitle: 'Today · 1 item · €24.90',
          status: 'Preparing',
          statusColor: FlBadgeColor.warning,
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.bottle)),
          itemCount: 1,
          itemCountLabel: '1',
          onPressed: () {},
        ),
      ],
    );
  }
}

Shipped

A shipped order, in accent. itemCount puts the number of items on the picture when there are several.

Order row, shipped state 
import 'package:your_app/ui/fliin/components/badge/fl_badge.dart';
import 'package:your_app/ui/fliin/components/list_row/fl_list_row.dart';
import 'package:your_app/ui/fliin/components/order_row/fl_order_row.dart';
import 'package:your_app/ui/fliin/components/result_card/fl_result_card.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlListGroup(
      children: [
        FlOrderRow(
          title: 'Order FL-2026-10482',
          subtitle: 'October 22 · 4 items · €137.90',
          status: 'Shipped',
          statusColor: FlBadgeColor.accent,
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.bag)),
          itemCount: 4,
          itemCountLabel: '4',
          onPressed: () {},
        ),
      ],
    );
  }
}

Delivered

A delivered order, in success.

Order row, delivered state 
import 'package:your_app/ui/fliin/components/badge/fl_badge.dart';
import 'package:your_app/ui/fliin/components/list_row/fl_list_row.dart';
import 'package:your_app/ui/fliin/components/order_row/fl_order_row.dart';
import 'package:your_app/ui/fliin/components/result_card/fl_result_card.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlListGroup(
      children: [
        FlOrderRow(
          title: 'Order FL-2026-10307',
          subtitle: 'October 3 · 2 items · €89.00',
          status: 'Delivered',
          statusColor: FlBadgeColor.success,
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.lamp)),
          itemCount: 2,
          itemCountLabel: '2',
          onPressed: () {},
        ),
      ],
    );
  }
}

Cancelled

A cancelled order, in neutral: it is over, nothing to watch.

Order row, cancelled state 
import 'package:your_app/ui/fliin/components/badge/fl_badge.dart';
import 'package:your_app/ui/fliin/components/list_row/fl_list_row.dart';
import 'package:your_app/ui/fliin/components/order_row/fl_order_row.dart';
import 'package:your_app/ui/fliin/components/result_card/fl_result_card.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlListGroup(
      children: [
        FlOrderRow(
          title: 'Order FL-2026-10215',
          subtitle: 'September 28 · 1 item · €39.00',
          status: 'Cancelled',
          statusColor: FlBadgeColor.neutral,
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.mug)),
          itemCount: 1,
          itemCountLabel: '1',
          onPressed: () {},
        ),
      ],
    );
  }
}

Refunded

A refunded order, in neutral as well.

Order row, refunded state 
import 'package:your_app/ui/fliin/components/badge/fl_badge.dart';
import 'package:your_app/ui/fliin/components/list_row/fl_list_row.dart';
import 'package:your_app/ui/fliin/components/order_row/fl_order_row.dart';
import 'package:your_app/ui/fliin/components/result_card/fl_result_card.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlListGroup(
      children: [
        FlOrderRow(
          title: 'Order FL-2026-10102',
          subtitle: 'September 12 · 1 item · €59.00',
          status: 'Refunded',
          statusColor: FlBadgeColor.neutral,
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.throwBlanket)),
          itemCount: 1,
          itemCountLabel: '1',
          onPressed: () {},
        ),
      ],
    );
  }
}

Icons

statusIcon puts an icon before the status word, in its chip: pick one per status, the word still says it.

Order row, icons state 
import 'package:your_app/ui/fliin/components/badge/fl_badge.dart';
import 'package:your_app/ui/fliin/components/list_row/fl_list_row.dart';
import 'package:your_app/ui/fliin/components/order_row/fl_order_row.dart';
import 'package:your_app/ui/fliin/components/result_card/fl_result_card.dart';
import 'package:your_app/ui/fliin/core/fliin.dart';
import 'package:your_app/ui/fliin/icons/fl_icons.dart';
import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return FlListGroup(
      children: [
        FlOrderRow(
          title: 'Order 10511',
          subtitle: 'October 26 · €24.90',
          status: 'Preparing',
          statusColor: FlBadgeColor.warning,
          statusIcon: FlIcon(FlIcons.clock),
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.bottle)),
          onPressed: () {},
        ),
        FlOrderRow(
          title: 'Order 10482',
          subtitle: 'October 22 · €137.90',
          status: 'Shipped',
          statusColor: FlBadgeColor.accent,
          statusIcon: FlIcon(FlIcons.paperPlane),
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.bag)),
          itemCount: 4,
          onPressed: () {},
        ),
        FlOrderRow(
          title: 'Order 10307',
          subtitle: 'October 3 · €89.00',
          status: 'Delivered',
          statusColor: FlBadgeColor.success,
          statusIcon: FlIcon(FlIcons.check),
          media: const FlResultImage(image: FlSampleImage(FlSampleArt.lamp)),
          onPressed: () {},
        ),
      ],
    );
  }
}

Usage

The code the reference images render:

final example = ColoredBox(
  color: FlScope.of(context).colors.surface,
  child: SingleChildScrollView(
    padding: EdgeInsetsDirectional.all(FlScope.of(context).space.lg),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        FlListGroup(
          children: [
            FlOrderRow(
              title: (variant.dir == TextDirection.rtl
                  ? "الطلب \u2068FL-2026-10511\u2069"
                  : "Order FL-2026-10511"),
              subtitle: (variant.dir == TextDirection.rtl
                  ? "٢٦ أكتوبر · منتج واحد · \u206624٫90 €\u2069"
                  : "October 26 · 1 item · €24.90"),
              status: (variant.dir == TextDirection.rtl
                  ? "قيد التجهيز"
                  : "Preparing"),
              statusColor: FlBadgeColor.warning,
              media: const FlResultImage(
                image: FlSampleImage(FlSampleArt.bottle),
              ),
              onPressed: () {},
            ),
            FlOrderRow(
              title: (variant.dir == TextDirection.rtl
                  ? "الطلب \u2068FL-2026-10482\u2069"
                  : "Order FL-2026-10482"),
              subtitle: (variant.dir == TextDirection.rtl
                  ? "٢٢ أكتوبر · ٤ منتجات · \u2066137٫90 €\u2069"
                  : "October 22 · 4 items · €137.90"),
              status: (variant.dir == TextDirection.rtl
                  ? "تم الشحن"
                  : "Shipped"),
              statusColor: FlBadgeColor.accent,
              media: const FlResultImage(image: FlSampleImage(FlSampleArt.bag)),
              itemCount: 4,
              itemCountLabel: (variant.dir == TextDirection.rtl ? "٤" : "4"),
              onPressed: () {},
            ),
            FlOrderRow(
              title: (variant.dir == TextDirection.rtl
                  ? "الطلب \u2068FL-2026-10307\u2069"
                  : "Order FL-2026-10307"),
              subtitle: (variant.dir == TextDirection.rtl
                  ? "٣ أكتوبر · منتجان · \u206689٫00 €\u2069"
                  : "October 3 · 2 items · €89.00"),
              status: (variant.dir == TextDirection.rtl
                  ? "تم التوصيل"
                  : "Delivered"),
              statusColor: FlBadgeColor.success,
              media: const FlResultImage(
                image: FlSampleImage(FlSampleArt.lamp),
              ),
              itemCount: 2,
              itemCountLabel: (variant.dir == TextDirection.rtl ? "٢" : "2"),
              onPressed: () {},
            ),
            FlOrderRow(
              title: (variant.dir == TextDirection.rtl
                  ? "الطلب \u2068FL-2026-10215\u2069"
                  : "Order FL-2026-10215"),
              subtitle: (variant.dir == TextDirection.rtl
                  ? "٢٨ سبتمبر · منتج واحد · \u206639٫00 €\u2069"
                  : "September 28 · 1 item · €39.00"),
              status: (variant.dir == TextDirection.rtl ? "ملغى" : "Cancelled"),
              statusColor: FlBadgeColor.neutral,
              media: const FlResultImage(image: FlSampleImage(FlSampleArt.mug)),
              onPressed: () {},
            ),
            FlOrderRow(
              title: (variant.dir == TextDirection.rtl
                  ? "الطلب \u2068FL-2026-10102\u2069"
                  : "Order FL-2026-10102"),
              subtitle: (variant.dir == TextDirection.rtl
                  ? "١٢ سبتمبر · منتج واحد · \u206659٫00 €\u2069"
                  : "September 12 · 1 item · €59.00"),
              status: (variant.dir == TextDirection.rtl
                  ? "تم الاسترداد"
                  : "Refunded"),
              statusColor: FlBadgeColor.neutral,
              media: const FlResultImage(
                image: FlSampleImage(FlSampleArt.throwBlanket),
              ),
              onPressed: () {},
            ),
          ],
        ),
      ],
    ),
  ),
);

API

FlOrderRow: class extends StatelessWidget
FlOrderRow.new: const new({super.key, required String title, required String subtitle, required String status, FlBadgeColor statusColor, Widget? media, int itemCount, String? itemCountLabel, VoidCallback? onPressed, Widget? statusIcon})
FlOrderRow.title: get String
FlOrderRow.subtitle: get String
FlOrderRow.status: get String
FlOrderRow.statusColor: get FlBadgeColor
FlOrderRow.media: get Widget?
FlOrderRow.itemCount: get int
FlOrderRow.itemCountLabel: get String?
FlOrderRow.onPressed: get VoidCallback?
FlOrderRow.statusIcon: get Widget?
FlOrderRow.build: Widget(BuildContext context)

Reference renders

The 16 images published with version 0.2.2, rendered by the shared harness on macOS with Flutter 3.47.7. fliin verify order-row compares your copy to them.

iOS · Light
Order row, iOS, Light, text 1.0×, Left to right
Text 1.0× · Left to right
Order row, iOS, Light, text 1.0×, Right to left
Text 1.0× · Right to left
Order row, iOS, Light, text 2.0×, Left to right
Text 2.0× · Left to right
Order row, iOS, Light, text 2.0×, Right to left
Text 2.0× · Right to left
iOS · Dark
Order row, iOS, Dark, text 1.0×, Left to right
Text 1.0× · Left to right
Order row, iOS, Dark, text 1.0×, Right to left
Text 1.0× · Right to left
Order row, iOS, Dark, text 2.0×, Left to right
Text 2.0× · Left to right
Order row, iOS, Dark, text 2.0×, Right to left
Text 2.0× · Right to left
Android · Light
Order row, Android, Light, text 1.0×, Left to right
Text 1.0× · Left to right
Order row, Android, Light, text 1.0×, Right to left
Text 1.0× · Right to left
Order row, Android, Light, text 2.0×, Left to right
Text 2.0× · Left to right
Order row, Android, Light, text 2.0×, Right to left
Text 2.0× · Right to left
Android · Dark
Order row, Android, Dark, text 1.0×, Left to right
Text 1.0× · Left to right
Order row, Android, Dark, text 1.0×, Right to left
Text 1.0× · Right to left
Order row, Android, Dark, text 2.0×, Left to right
Text 2.0× · Left to right
Order row, Android, Dark, text 2.0×, Right to left
Text 2.0× · Right to left

Use it to

  • show a customer's past purchases with their number
  • show the status of a purchase in plain words
  • present the day, total and item count of a purchase
  • open the details of a tapped purchase
  • show the photo of the first item of a purchase
Not for
  • a cart item with its quantity: use a cart line (cart-line)
  • a payment or a bank transfer: use a transaction row (transaction-row)
States
  • Preparing
  • Shipped
  • Delivered
  • Cancelled
  • Refunded

Arrows to move, Enter to open, Escape to close.