The VolumeSelectorWidget allows you to indicate to your customers which banks are available to them.
This is suitable to be placed in the checkout flow of your application if you for example have multiple payment options available to your customers with radio buttons.
Usage
Initialize the VolumeProvider class in exactly the same way as with the regular Volume Button
Add a widget to your application where you wish to render the Volume as a payment option.
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: const Color(0xFFDCDDE8),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 5.0,
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
VolumeSelectorWidget(
country: country,
currency: currency,
size: 35.0,
),
const SizedBox(width: 10),
const Text("Pay With Bank App",
style: TextStyle(
fontSize: 18,
fontFamily: 'Noto Sans',
fontWeight: FontWeight.w500,
)),
const SizedBox(width: 10),
const VolumeInfoWidget(
size: 20,
),
const Expanded(child: SizedBox()),
Radio<String>(
value: 'option1',
groupValue: 'option1',
onChanged: (String? value) {},
),
],
),
),
),
)Properties
VolumeSelectorWidget properties
Required Properties
| key | type | example | description |
|---|---|---|---|
| country | String | "GB" | The country - used to show the banks only from given country |
| currency | String | "GBP" | The currency - used to show the banks only supporting given currency |
| size | double | 35.0 | Size of the component |