Skip to main content

Split Rent Button

Display a pre-built Flutter widget that automatically opens the Flex Checkout modal when tapped.

Initialization​

Import and render FlexSplitRentButton in your widget tree.

DART
import 'package:flex_checkout_flutter/flex_checkout_flutter.dart';
import 'package:flutter/material.dart' hide Flex;

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: FlexSplitRentButton(),
    );
  }
}
info

When tapped, the Split Rent Button automatically opens checkout. Make sure you have registered a token provider with sdk.loadToken and configured checkout callbacks with sdk.checkout before rendering the button.

DART
final sdk = await Flex.initialize(
  const FlexConfig(clientId: 'your-flex-client-id'),
);

sdk.loadToken(() async {
  final response = await yourApi.getFlexToken();
  return response.token;
});

sdk.checkout(CheckoutConfig(
  onEvent: (event) {},
));

Options​

ParameterTypeDescription
stylesButtonStyles?Optional height override for the button.
variantSplitRentButtonVariant?Button display style. .defaultVariant (default) renders the standard split rent button. .listItem renders a white card-style split rent button with a chevron. .logo renders a circular icon button with the Flex logo and a label below.
radiusSplitRentButtonRadius?Button border radius style. .rounded (default), .square, or .pill. Ignored when variant is .listItem. Defaults to .pill when variant is .logo.
colorSplitRentButtonColor?Button color. .purple (default) or .white. Ignored when variant is .listItem.
visibleboolWhether the button is visible. Defaults to true. When false, the widget reserves the same space but the native view is hidden — useful for conditional rendering.

Variant​

The variant option controls the visual style of the button. If variant is not specified, the button renders as .defaultVariant.

defaultVariant​

The standard split rent button.

DART
// variant defaults to .defaultVariant if not specified
const FlexSplitRentButton();

listItem​

A white card-style split rent button with a chevron. Intended for placement inside a list or menu where the host UI already supplies the surrounding chrome.

DART
const FlexSplitRentButton(variant: SplitRentButtonVariant.listItem);

A circular icon button with the Flex logo centered inside and a label below. Defaults to 54 logical pixel diameter.

DART
const FlexSplitRentButton(variant: SplitRentButtonVariant.logo);

Radius​

The radius option controls the button border radius. If radius is not specified, the button renders as .rounded.

square​

A flat-cornered split rent button.

DART
const FlexSplitRentButton(radius: SplitRentButtonRadius.square);

rounded​

A rounded-corner split rent button (default).

DART
// radius defaults to .rounded if not specified
const FlexSplitRentButton();

pill​

A pill-shaped split rent button.

DART
const FlexSplitRentButton(radius: SplitRentButtonRadius.pill);

Color​

The color option controls the button color. If color is not specified, the button renders as .purple.

purple​

The default purple split rent button.

DART
// color defaults to .purple if not specified
const FlexSplitRentButton();

white​

A white split rent button with a purple border.

DART
const FlexSplitRentButton(color: SplitRentButtonColor.white);
info

The color option is ignored when variant is .listItem.

ButtonStyles​

ParameterTypeDescription
heightdouble?Height of the button in logical pixels. Defaults to system size.
DART
const FlexSplitRentButton(
  styles: ButtonStyles(height: 48),
);

Multiple Buttons​

You can add multiple Split Rent Buttons to the same screen:

DART
Column(
  children: const [
    FlexSplitRentButton(),
    FlexSplitRentButton(),
  ],
);

Next Steps​

  • Configure Checkout callbacks to handle events and errors
  • Review the Installation guide for lifecycle management