Download this code to run Vibreflow locally
How to Run Vibreflow Locally
1.Unzip the file (download link above)
Open in terminal or command prompt.
The structure will look like this
textmy-project/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
└── main.ts
2. Install Node.js (if needed)
Make sure you have Node.js installed (20 +). You can download it from the official Node.js website.3. Install Vite (if needed)
Node.js — Download Node.js®
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
In your project directory, run:
npm install vite --save-dev
npm install typescript --save-dev # Skip if you already have TypeScript
3. Install the app
npm install
4. Run the Project
- Development server:npm run dev
- Build for production:npm run build
- Preview production build locally:npm run preview
....and run it
npm run dev
In summary
Prerequisites: Node.js 20+
1. Install dependencies:
npm install
2. Run the app:
npm run dev
5. Open in the Browser
Visit the local server link provided in the terminal Vibreflow
That’s it! Note.
Or test the secure online version
Vibreflow - image to Flutter and Flutterflow Convertor
Free and secure Online Version of Vibreflow
Code Generated by Vibreflow and Cursor
// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'index.dart'; // Imports other custom widgets
class CheckoutScreenWidget extends StatefulWidget {
const CheckoutScreenWidget({
super.key,
this.width,
this.height,
this.cartShippingPaymentText,
this.contactInfoTitle,
this.shippingAddressTitle,
this.shippingMethodTitle,
this.standardShippingTitle,
this.standardShippingSubtitle,
this.expressShippingTitle,
this.expressShippingSubtitle,
this.nextDayShippingTitle,
this.nextDayShippingSubtitle,
this.paymentMethodTitle,
this.creditCardPaymentTitle,
this.paypalPaymentTitle,
this.cardNumberHint,
this.expiryDateHint,
this.cvcHint,
this.nameOnCardHint,
this.placeOrderButtonText,
this.product1ImagePath,
this.subtotalLabel,
this.subtotalValue,
this.shippingLabel,
this.shippingValue,
this.taxesLabel,
this.taxesValue,
this.totalLabel,
this.totalValue,
this.productImagePaths,
this.productTitles,
this.productSizes,
this.productPrices,
});
final double? width;
final double? height;
final String? cartShippingPaymentText;
final String? contactInfoTitle;
final String? shippingAddressTitle;
final String? shippingMethodTitle;
final String? standardShippingTitle;
final String? standardShippingSubtitle;
final String? expressShippingTitle;
final String? expressShippingSubtitle;
final String? nextDayShippingTitle;
final String? nextDayShippingSubtitle;
final String? paymentMethodTitle;
final String? creditCardPaymentTitle;
final String? paypalPaymentTitle;
final String? cardNumberHint;
final String? expiryDateHint;
final String? cvcHint;
final String? nameOnCardHint;
final String? placeOrderButtonText;
final List<String>? productImagePaths;
final List<String>? productTitles;
final List<String>? productSizes;
final List<double>? productPrices;
final String? subtotalLabel;
final String? subtotalValue;
final String? shippingLabel;
final String? shippingValue;
final String? taxesLabel;
final String? taxesValue;
final String? totalLabel;
final String? totalValue;
@override
State<CheckoutScreenWidget> createState() => _CheckoutScreenWidgetState();
}
class _CheckoutScreenWidgetState extends State<CheckoutScreenWidget> {
String? _selectedShippingMethod = 'standard';
String? _selectedPaymentMethod = 'credit_card';
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.cartShippingPaymentText ??
'Cart / Shipping / Payment',
style: const TextStyle(color: Colors.grey, fontSize: 14),
),
const SizedBox(height: 32),
Text(
widget.contactInfoTitle ?? 'Contact Information',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87),
),
const SizedBox(height: 16),
_buildTextField(hintText: ''),
const SizedBox(height: 32),
Text(
widget.shippingAddressTitle ?? 'Shipping Address',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87),
),
const SizedBox(height: 16),
_buildTextField(hintText: ''),
const SizedBox(height: 16),
_buildTextField(hintText: ''),
const SizedBox(height: 16),
_buildTextField(hintText: ''),
const SizedBox(height: 16),
Row(
children: [
Expanded(child: _buildTextField(hintText: '')),
const SizedBox(width: 16),
Expanded(child: _buildTextField(hintText: '')),
],
),
const SizedBox(height: 16),
_buildTextField(hintText: ''),
const SizedBox(height: 32),
Text(
widget.shippingMethodTitle ?? 'Shipping Method',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87),
),
const SizedBox(height: 16),
_buildShippingMethodRadio(
value: 'standard',
title: widget.standardShippingTitle ??
'Standard (5-7 business days)',
subtitle: widget.standardShippingSubtitle ?? 'Free',
),
_buildShippingMethodRadio(
value: 'express',
title: widget.expressShippingTitle ??
'Express (2-3 business days)',
subtitle: widget.expressShippingSubtitle ?? '\$10',
),
_buildShippingMethodRadio(
value: 'next_day',
title: widget.nextDayShippingTitle ??
'Next Day (1 business day)',
subtitle: widget.nextDayShippingSubtitle ?? '\$20',
),
const SizedBox(height: 32),
Text(
widget.paymentMethodTitle ?? 'Payment Method',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87),
),
const SizedBox(height: 16),
_buildPaymentMethodRadio(
value: 'credit_card',
title: widget.creditCardPaymentTitle ?? 'Credit Card',
),
_buildPaymentMethodRadio(
value: 'paypal',
title: widget.paypalPaymentTitle ?? 'PayPal',
),
const SizedBox(height: 16),
_buildTextField(
hintText: widget.cardNumberHint ?? 'Card Number'),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildTextField(
hintText: widget.expiryDateHint ?? 'MM/YY')),
const SizedBox(width: 16),
Expanded(
child: _buildTextField(
hintText: widget.cvcHint ?? 'CVC')),
],
),
const SizedBox(height: 16),
_buildTextField(
hintText: widget.nameOnCardHint ?? 'Name on Card'),
const SizedBox(height: 32),
SizedBox(
width: 150,
child: ElevatedButton(
onPressed: () {
// Handle place order
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[700],
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
child: Text(
widget.placeOrderButtonText ?? 'Place Order',
style: const TextStyle(
color: Colors.white, fontSize: 16),
),
),
),
],
),
),
const SizedBox(width: 64),
Expanded(
flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.productImagePaths != null &&
widget.productTitles != null &&
widget.productSizes != null)
...List.generate(widget.productImagePaths!.length,
(index) {
final price = (widget.productPrices != null &&
widget.productPrices!.length > index)
? widget.productPrices![index]
: 10.0;
return Column(
children: [
_buildProductItemWithPrice(
imagePath: widget.productImagePaths![index],
title: widget.productTitles![index],
size: widget.productSizes![index],
price: price,
),
const SizedBox(height: 16),
],
);
}),
const SizedBox(height: 32),
_buildSummaryRow(widget.subtotalLabel ?? 'Subtotal',
widget.subtotalValue ?? '\$150'),
const SizedBox(height: 8),
_buildSummaryRow(widget.shippingLabel ?? 'Shipping',
widget.shippingValue ?? 'Free'),
const SizedBox(height: 8),
_buildSummaryRow(widget.taxesLabel ?? 'Taxes',
widget.taxesValue ?? '\$15'),
const SizedBox(height: 16),
_buildSummaryRow(widget.totalLabel ?? 'Total',
widget.totalValue ?? '\$165',
isTotal: true),
],
),
),
],
),
),
),
);
}
Widget _buildTextField({required String hintText}) {
return TextField(
decoration: InputDecoration(
hintText: hintText,
filled: true,
fillColor: Colors.grey[100],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide.none,
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
);
}
Widget _buildShippingMethodRadio({
required String value,
required String title,
required String subtitle,
}) {
return Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8.0),
),
child: RadioListTile<String>(
value: value,
groupValue: _selectedShippingMethod,
onChanged: (String? newValue) {
setState(() {
_selectedShippingMethod = newValue;
});
},
title: Text(
title,
style: const TextStyle(fontWeight: FontWeight.w500),
),
subtitle: Text(subtitle),
activeColor: Colors.black,
controlAffinity: ListTileControlAffinity.leading,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
),
);
}
Widget _buildPaymentMethodRadio({
required String value,
required String title,
}) {
return Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8.0),
),
child: RadioListTile<String>(
value: value,
groupValue: _selectedPaymentMethod,
onChanged: (String? newValue) {
setState(() {
_selectedPaymentMethod = newValue;
});
},
title: Text(
title,
style: const TextStyle(fontWeight: FontWeight.w500),
),
activeColor: Colors.black,
controlAffinity: ListTileControlAffinity.leading,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
),
);
}
Widget _buildProductItem({
required String imagePath,
required String title,
required String size,
}) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.grey[200],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
imagePath,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) => const Icon(
Icons.image_not_supported,
size: 40,
color: Colors.grey),
),
),
),
const SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
Text(
size,
style: const TextStyle(color: Colors.grey, fontSize: 14),
),
],
),
],
);
}
Widget _buildProductItemWithPrice({
required String imagePath,
required String title,
required String size,
required double price,
}) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.grey[200],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
imagePath,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) => const Icon(
Icons.image_not_supported,
size: 40,
color: Colors.grey),
),
),
),
const SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
Text(
size,
style: const TextStyle(color: Colors.grey, fontSize: 14),
),
Text(
' 24${price.toStringAsFixed(2)}',
style: const TextStyle(
color: Colors.black87,
fontSize: 14,
fontWeight: FontWeight.w500),
),
],
),
],
);
}
Widget _buildSummaryRow(String label, String value, {bool isTotal = false}) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: TextStyle(
fontSize: isTotal ? 18 : 16,
fontWeight: isTotal ? FontWeight.bold : FontWeight.normal,
color: isTotal ? Colors.black : Colors.grey[700],
),
),
Text(
value,
style: TextStyle(
fontSize: isTotal ? 18 : 16,
fontWeight: isTotal ? FontWeight.bold : FontWeight.normal,
color: isTotal ? Colors.black : Colors.black87,
),
),
],
);
}
}
// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'index.dart'; // Imports other custom widgets
import 'index.dart'; // Imports other custom widgets
class ProductCardWidget extends StatefulWidget {
const ProductCardWidget({
super.key,
this.width,
this.height,
this.imageUrl,
this.productTitle,
this.totalPrice,
this.pricePerUnit,
this.sellerName,
this.productVariant,
this.isInStock,
this.initialQuantity,
this.actionQuantity,
});
final double? width;
final double? height;
final String? imageUrl;
final String? productTitle;
final double? totalPrice;
final double? pricePerUnit;
final String? sellerName;
final String? productVariant;
final bool? isInStock;
final int? initialQuantity;
final Future Function(int? quantity)? actionQuantity;
@override
State<ProductCardWidget> createState() => _ProductCardWidgetState();
}
class _ProductCardWidgetState extends State<ProductCardWidget> {
late int _quantity;
@override
void initState() {
super.initState();
_quantity = widget.initialQuantity ?? 1;
}
@override
Widget build(BuildContext context) {
return SizedBox(
width: widget.width,
height: widget.height,
child: Card(
margin: const EdgeInsets.all(16.0),
elevation: 2.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Container(
width: 100,
height: 100,
color: FlutterFlowTheme.of(context).alternate,
child: Center(
child: Image.network(
widget.imageUrl ??
'https://via.placeholder.com/100x100?text=Product',
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) => Icon(
Icons.image,
size: 50,
color: FlutterFlowTheme.of(context).secondaryText,
),
),
),
),
),
const SizedBox(width: 16.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
widget.productTitle ??
'Product Title with Long Description',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: FlutterFlowTheme.of(context)
.primaryText,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 16.0),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
widget.totalPrice != null
? '\$${widget.totalPrice!.toStringAsFixed(2)}'
: '\$0.00',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: FlutterFlowTheme.of(context)
.primaryText,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
Text(
widget.pricePerUnit != null
? '\$${widget.pricePerUnit!.toStringAsFixed(2)} each'
: '\$0.00 each',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: FlutterFlowTheme.of(context)
.secondaryText,
fontSize: 13.0,
),
),
],
),
],
),
const SizedBox(height: 4.0),
Text(
widget.sellerName ?? 'Sold by Seller Name',
style: FlutterFlowTheme.of(context).bodyMedium.override(
fontFamily:
FlutterFlowTheme.of(context).bodyMediumFamily,
color: FlutterFlowTheme.of(context).secondaryText,
fontSize: 13.0,
),
),
const SizedBox(height: 2.0),
Text(
widget.productVariant ?? 'Variant, Size',
style: FlutterFlowTheme.of(context).bodyMedium.override(
fontFamily:
FlutterFlowTheme.of(context).bodyMediumFamily,
color: FlutterFlowTheme.of(context).secondaryText,
fontSize: 13.0,
),
),
const SizedBox(height: 8.0),
Row(
children: [
Icon(
(widget.isInStock ?? true)
? Icons.check_circle_outline
: Icons.cancel_outlined,
color: (widget.isInStock ?? true)
? FlutterFlowTheme.of(context).success
: FlutterFlowTheme.of(context).error,
size: 16.0,
),
const SizedBox(width: 4.0),
Text(
(widget.isInStock ?? true)
? 'In Stock'
: 'Out of Stock',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: (widget.isInStock ?? true)
? FlutterFlowTheme.of(context).success
: FlutterFlowTheme.of(context).error,
fontSize: 13.0,
),
),
],
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
'Qty:',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: FlutterFlowTheme.of(context)
.primaryText,
fontSize: 14.0,
),
),
const SizedBox(width: 8.0),
Container(
decoration: BoxDecoration(
border: Border.all(
color: FlutterFlowTheme.of(context)
.alternate),
borderRadius: BorderRadius.circular(8.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () async {
setState(() {
if (_quantity > 1) _quantity--;
});
if (widget.actionQuantity != null) {
await widget
.actionQuantity!(_quantity);
}
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 8.0),
child: Icon(Icons.remove,
size: 18.0,
color: FlutterFlowTheme.of(context)
.secondaryText),
),
),
Container(
width: 1.0,
height: 30.0,
color: FlutterFlowTheme.of(context)
.alternate,
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 8.0),
child: Text(
'$_quantity',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily:
FlutterFlowTheme.of(context)
.bodyMediumFamily,
color:
FlutterFlowTheme.of(context)
.primaryText,
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
),
Container(
width: 1.0,
height: 30.0,
color: FlutterFlowTheme.of(context)
.alternate,
),
InkWell(
onTap: () async {
setState(() {
_quantity++;
});
if (widget.actionQuantity != null) {
await widget
.actionQuantity!(_quantity);
}
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 8.0),
child: Icon(Icons.add,
size: 18.0,
color: FlutterFlowTheme.of(context)
.secondaryText),
),
),
],
),
),
],
),
Row(
children: [
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.favorite_border,
size: 18.0,
color: FlutterFlowTheme.of(context)
.secondaryText),
label: Text(
'Save for Later',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: FlutterFlowTheme.of(context)
.secondaryText,
fontSize: 13.0,
),
),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
),
const SizedBox(width: 16.0),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.delete_outline,
size: 18.0,
color: FlutterFlowTheme.of(context)
.secondaryText),
label: Text(
'Remove',
style: FlutterFlowTheme.of(context)
.bodyMedium
.override(
fontFamily: FlutterFlowTheme.of(context)
.bodyMediumFamily,
color: FlutterFlowTheme.of(context)
.secondaryText,
fontSize: 13.0,
),
),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size.zero,
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
),
),
],
),
],
),
],
),
),
],
),
),
),
),
);
}
}