flutter/max_print_plus
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update redesign, add more option

Browse Source
This commit is contained in:
Tothemax Dev
2024-09-27 22:09:30 +07:00
parent 88c298cc79
commit 1d03917dd8
10 changed files with 253 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

448
lib/max_print copy.dart
View File

@@ -1,448 +0,0 @@
// library max_print_dialog;
// import 'dart:async';
// import 'dart:developer';
// import 'dart:io';
// import 'package:flutter/material.dart';
// import 'package:thermal_printer/esc_pos_utils_platform/esc_pos_utils_platform.dart';
// import 'package:thermal_printer/thermal_printer.dart';
// import 'my_button.dart';
// import 'printer_devices.dart';
// class MaxPrintPage extends StatefulWidget {
// Function()? onSuccess;
// PreferredSizeWidget? appBar;
// String? title, description;
// Color? btnOkTextColor,
// btnOkBorderColor,
// btnOkColor,
// btnCancelTextColor,
// btnCancelBorderColor,
// btnCancelColor;
// double? btnRadius, btnHeight, btnWidth;
// List<int> bytes;
// Generator generator;
// Function()? onCancelTap;
// MaxPrintPage(
// {Key? key,
// required this.appBar,
// required this.bytes,
// required this.generator,
// this.onSuccess,
// this.description,
// this.title,
// this.btnOkBorderColor,
// this.btnOkColor,
// this.btnRadius,
// this.btnOkTextColor,
// this.btnCancelBorderColor,
// this.btnCancelColor,
// this.btnCancelTextColor,
// this.btnHeight,
// this.btnWidth,
// this.onCancelTap})
// : super(key: key);
// @override
// _MaxPrintPageState createState() => _MaxPrintPageState();
// }
// class _MaxPrintPageState extends State<MaxPrintPage> {
// bool isLoadingButton = false;
// // Thermal
// var defaultPrinterType = PrinterType.bluetooth;
// var _isBle = false;
// var _reconnect = false;
// var _isConnected = false;
// var printerManager = PrinterManager.instance;
// var devices = <PrinterDevices>[];
// StreamSubscription<PrinterDevice>? _subscription;
// StreamSubscription<BTStatus>? _subscriptionBtStatus;
// StreamSubscription<USBStatus>? _subscriptionUsbStatus;
// StreamSubscription<TCPStatus>? _subscriptionTCPStatus;
// BTStatus _currentStatus = BTStatus.none;
// // ignore: unused_field
// TCPStatus _currentTCPStatus = TCPStatus.none;
// // _currentUsbStatus is only supports on Android
// // ignore: unused_field
// USBStatus _currentUsbStatus = USBStatus.none;
// List<int>? pendingTask;
// final String _ipAddress = '';
// String _port = '9100';
// final _ipController = TextEditingController();
// final _portController = TextEditingController();
// PrinterDevices? selectedPrinter;
// @override
// void initState() {
// _initialize();
// super.initState();
// }
// @override
// void dispose() {
// _subscription?.cancel();
// _subscriptionBtStatus?.cancel();
// _subscriptionUsbStatus?.cancel();
// _subscriptionTCPStatus?.cancel();
// _portController.dispose();
// _ipController.dispose();
// super.dispose();
// }
// @override
// Widget build(BuildContext context) {
// return Scaffold(
// backgroundColor: const Color(0xFFFAFAFA),
// bottomNavigationBar: Padding(
// padding: const EdgeInsets.all(16),
// child: Row(
// mainAxisSize: MainAxisSize.min,
// children: [
// Flexible(
// child: MyButton(
// width: double.infinity,
// text: 'Tutup',
// textColor: widget.btnCancelTextColor ?? Colors.black,
// borderColor: widget.btnCancelBorderColor ?? Colors.amber,
// color: widget.btnCancelColor ?? Colors.white,
// press: widget.onCancelTap ??
// () {
// Navigator.pop(context);
// })),
// const SizedBox(
// width: 16.0,
// ),
// Flexible(
// child: MyButton(
// width: double.infinity,
// textColor: widget.btnOkTextColor,
// borderColor: widget.btnOkBorderColor,
// color: widget.btnOkColor,
// text: 'Cetak',
// press: () {
// _printReceiveTest();
// }))
// ],
// ),
// ),
// appBar: widget.appBar,
// body: _buildView(context));
// }
// _buildView(BuildContext context) {
// return Padding(
// padding: const EdgeInsets.all(20.0),
// child: ListView(
// shrinkWrap: true,
// children: [
// const SizedBox(
// height: 16.0,
// ),
// const Text(
// 'Daftar perangkat :',
// style: TextStyle(color: Color(0xFF0E0F0F), fontSize: 16.0),
// ),
// const SizedBox(
// height: 10.0,
// ),
// // Row(
// // children: [
// // _chipOption(label: 'BT', val: PrinterType.bluetooth),
// // _chipOption(label: 'IP', val: PrinterType.network),
// // ],
// // ),
// Container(
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(16.0), color: Colors.white),
// child: Material(
// color: Colors.transparent,
// child: Column(
// children: devices
// .map(
// (device) => ListTile(
// title: Row(
// crossAxisAlignment: CrossAxisAlignment.center,
// children: [
// Text(
// '${device.deviceName}',
// maxLines: 1,
// style: const TextStyle(
// fontWeight: FontWeight.w600,
// fontSize: 16.0),
// ),
// const SizedBox(
// width: 6.0,
// ),
// selectedPrinter != null &&
// ((device.typePrinter ==
// PrinterType.usb &&
// Platform.isWindows
// ? device.deviceName ==
// selectedPrinter!.deviceName
// : device.vendorId != null &&
// selectedPrinter!.vendorId ==
// device.vendorId) ||
// (device.address != null &&
// selectedPrinter!.address ==
// device.address))
// ? const Icon(
// Icons.check_circle,
// color: Colors.green,
// size: 16.0,
// )
// : const SizedBox()
// ],
// ),
// subtitle: Platform.isAndroid &&
// defaultPrinterType == PrinterType.usb
// ? null
// : Visibility(
// visible: !Platform.isWindows,
// child: Text("${device.address}")),
// onTap: () async {
// // do something
// selectDevice(device);
// _connectDevice();
// await device.saveToPrefs();
// },
// trailing: Material(
// color: Colors.transparent,
// child: IconButton(
// onPressed: selectedPrinter == null ||
// device.deviceName !=
// selectedPrinter?.deviceName
// ? null
// : () async {
// _connectDevice();
// await selectedPrinter!.saveToPrefs();
// },
// icon: Image.asset(
// device.deviceName ==
// selectedPrinter?.deviceName
// ? 'assets/ic_connect_on.png'
// : 'assets/ic_connect_off.png',
// package: 'max_print_dialog',
// )),
// )),
// )
// .toList()),
// ),
// ),
// const SizedBox(
// height: 16.0,
// ),
// ],
// ),
// );
// }
// void _scan() {
// devices.clear();
// _subscription = printerManager
// .discovery(type: defaultPrinterType, isBle: _isBle)
// .listen((device) {
// devices.add(PrinterDevices(
// deviceName: device.name,
// address: device.address,
// isBle: _isBle,
// vendorId: device.vendorId,
// productId: device.productId,
// typePrinter: defaultPrinterType,
// ));
// setState(() {});
// });
// }
// _connectDevice() async {
// _isConnected = false;
// if (selectedPrinter == null) return;
// switch (selectedPrinter!.typePrinter) {
// case PrinterType.usb:
// await printerManager.connect(
// type: selectedPrinter!.typePrinter,
// model: UsbPrinterInput(
// name: selectedPrinter!.deviceName,
// productId: selectedPrinter!.productId,
// vendorId: selectedPrinter!.vendorId));
// _isConnected = true;
// break;
// case PrinterType.bluetooth:
// await printerManager.connect(
// type: selectedPrinter!.typePrinter,
// model: BluetoothPrinterInput(
// name: selectedPrinter!.deviceName,
// address: selectedPrinter!.address!,
// isBle: selectedPrinter!.isBle ?? false,
// autoConnect: _reconnect));
// break;
// case PrinterType.network:
// await printerManager.connect(
// type: selectedPrinter!.typePrinter,
// model: TcpPrinterInput(ipAddress: selectedPrinter!.address!));
// _isConnected = true;
// break;
// default:
// }
// setState(() {});
// }
// void selectDevice(PrinterDevices device) async {
// if (selectedPrinter != null) {
// if ((device.address != selectedPrinter!.address) ||
// (device.typePrinter == PrinterType.usb &&
// selectedPrinter!.vendorId != device.vendorId)) {
// await PrinterManager.instance
// .disconnect(type: selectedPrinter!.typePrinter);
// }
// }
// selectedPrinter = device;
// setState(() {});
// }
// _printReceiveTest() {
// _printEscPos(widget.bytes, widget.generator);
// widget.onSuccess!();
// }
// /// print ticket
// void _printEscPos(List<int> bytes, Generator generator) async {
// var connectedTCP = false;
// if (selectedPrinter == null) return;
// var bluetoothPrinter = selectedPrinter!;
// switch (bluetoothPrinter.typePrinter) {
// case PrinterType.usb:
// bytes += generator.feed(2);
// bytes += generator.cut();
// await printerManager.connect(
// type: bluetoothPrinter.typePrinter,
// model: UsbPrinterInput(
// name: bluetoothPrinter.deviceName,
// productId: bluetoothPrinter.productId,
// vendorId: bluetoothPrinter.vendorId));
// pendingTask = null;
// break;
// case PrinterType.bluetooth:
// bytes += generator.cut();
// await printerManager.connect(
// type: bluetoothPrinter.typePrinter,
// model: BluetoothPrinterInput(
// name: bluetoothPrinter.deviceName,
// address: bluetoothPrinter.address!,
// isBle: bluetoothPrinter.isBle ?? false,
// autoConnect: _reconnect));
// pendingTask = null;
// if (Platform.isAndroid) pendingTask = bytes;
// break;
// case PrinterType.network:
// bytes += generator.feed(2);
// bytes += generator.cut();
// connectedTCP = await printerManager.connect(
// type: bluetoothPrinter.typePrinter,
// model: TcpPrinterInput(ipAddress: bluetoothPrinter.address!));
// if (!connectedTCP) print(' --- please review your connection ---');
// break;
// default:
// }
// if (bluetoothPrinter.typePrinter == PrinterType.bluetooth &&
// Platform.isAndroid) {
// if (_currentStatus == BTStatus.connected) {
// printerManager.send(type: bluetoothPrinter.typePrinter, bytes: bytes);
// pendingTask = null;
// }
// } else {
// printerManager.send(type: bluetoothPrinter.typePrinter, bytes: bytes);
// }
// }
// Future<void> _initialize() async {
// PrinterDevices? printer = await PrinterDevices.getFromPrefs();
// _scan();
// if (printer != null) {
// selectDevice(printer);
// }
// // subscription to listen change status of bluetooth connection
// _subscriptionBtStatus =
// PrinterManager.instance.stateBluetooth.listen((status) {
// log(' ----------------- status bt $status ------------------ ');
// _currentStatus = status;
// if (status == BTStatus.connected) {
// setState(() {
// _isConnected = true;
// });
// }
// if (status == BTStatus.none) {
// setState(() {
// _isConnected = false;
// });
// }
// if (status == BTStatus.connected && pendingTask != null) {
// if (Platform.isAndroid) {
// Future.delayed(const Duration(milliseconds: 1000), () {
// PrinterManager.instance
// .send(type: PrinterType.bluetooth, bytes: pendingTask!);
// pendingTask = null;
// });
// } else if (Platform.isIOS) {
// PrinterManager.instance
// .send(type: PrinterType.bluetooth, bytes: pendingTask!);
// pendingTask = null;
// }
// }
// });
// // PrinterManager.instance.stateUSB is only supports on Android
// _subscriptionUsbStatus = PrinterManager.instance.stateUSB.listen((status) {
// log(' ----------------- status usb $status ------------------ ');
// _currentUsbStatus = status;
// if (Platform.isAndroid) {
// if (status == USBStatus.connected && pendingTask != null) {
// Future.delayed(const Duration(milliseconds: 1000), () {
// PrinterManager.instance
// .send(type: PrinterType.usb, bytes: pendingTask!);
// pendingTask = null;
// });
// }
// }
// });
// // PrinterManager.instance.stateUSB is only supports on Android
// _subscriptionTCPStatus = PrinterManager.instance.stateTCP.listen((status) {
// log(' ----------------- status tcp $status ------------------ ');
// _currentTCPStatus = status;
// });
// }
// _chipOption({required String label, required PrinterType val}) {
// return Row(
// children: [
// Radio(
// value: val,
// groupValue: defaultPrinterType,
// onChanged: (v) {
// setState(() {
// defaultPrinterType = v!;
// selectedPrinter = null;
// _isBle = false;
// _isConnected = false;
// _scan();
// });
// }),
// const SizedBox(
// width: 10.0,
// ),
// Text(
// label,
// style: const TextStyle(fontSize: 16.0),
// )
// ],
// );
// }
// }

205
lib/print/bluetooth_printer_screen.dart
View File

@@ -1,6 +1,8 @@
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:drago_pos_printer/drago_pos_printer.dart';
import 'package:flutter_svg/svg.dart';
import 'package:max_print_plus/widget/my_button.dart';
// import 'package:webcontent_converter/demo.dart';
// import 'package:webcontent_converter/webcontent_converter.dart';
import '../service/service.dart';
@@ -8,9 +10,15 @@ import '../service/service.dart';
class BluetoothPrinterScreen extends StatefulWidget {
List<int> bytes;
EscGenerator generator;
BluetoothPrinterScreen(
{super.key, required this.bytes, required this.generator});
Function(bool)? onSuccess;
bool? hideOption;
BluetoothPrinterScreen({
super.key,
required this.bytes,
required this.generator,
this.onSuccess,
this.hideOption = true,
});
@override
_BluetoothPrinterScreenState createState() => _BluetoothPrinterScreenState();
@@ -43,41 +51,42 @@ class _BluetoothPrinterScreenState extends State<BluetoothPrinterScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFAFAFA),
backgroundColor: const Color(0xFFFAFAFA),
body: ListView(
padding: EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
children: [
DropdownButtonHideUnderline(
child: DropdownButtonFormField(
decoration: InputDecoration(labelText: 'Paper Size'),
items: paperTypes.map((item) {
return DropdownMenuItem(
value: item,
child: Text(item),
);
}).toList(),
onChanged: (String? selected) async {
showCustom = false;
if (selected != null) {
if (selected == "58mm") {
paperWidth = PaperSizeWidth.mm58;
charPerLine = PaperSizeMaxPerLine.mm58;
} else if (selected == "80mmOld") {
paperWidth = PaperSizeWidth.mm80_Old;
charPerLine = PaperSizeMaxPerLine.mm80_Old;
} else if (selected == "80mm") {
paperWidth = PaperSizeWidth.mm80;
charPerLine = PaperSizeMaxPerLine.mm80;
} else if (selected == "Custom") {
paperWidth = PaperSizeWidth.mm80;
charPerLine = PaperSizeMaxPerLine.mm80;
showCustom = true;
if (!widget.hideOption!)
DropdownButtonHideUnderline(
child: DropdownButtonFormField(
decoration: const InputDecoration(labelText: 'Paper Size'),
items: paperTypes.map((item) {
return DropdownMenuItem(
value: item,
child: Text(item),
);
}).toList(),
onChanged: (String? selected) async {
showCustom = false;
if (selected != null) {
if (selected == "58mm") {
paperWidth = PaperSizeWidth.mm58;
charPerLine = PaperSizeMaxPerLine.mm58;
} else if (selected == "80mmOld") {
paperWidth = PaperSizeWidth.mm80_Old;
charPerLine = PaperSizeMaxPerLine.mm80_Old;
} else if (selected == "80mm") {
paperWidth = PaperSizeWidth.mm80;
charPerLine = PaperSizeMaxPerLine.mm80;
} else if (selected == "Custom") {
paperWidth = PaperSizeWidth.mm80;
charPerLine = PaperSizeMaxPerLine.mm80;
showCustom = true;
}
setState(() {});
}
setState(() {});
}
},
},
),
),
),
if (showCustom)
Row(
children: [
@@ -87,41 +96,92 @@ class _BluetoothPrinterScreenState extends State<BluetoothPrinterScreen> {
onChanged: (val) {
if (val.isNotEmpty) {
paperWidth = int.parse(val);
} else
} else {
paperWidth = 0;
}
},
)),
SizedBox(width: 20),
const SizedBox(width: 20),
Expanded(
child: TextFormField(
initialValue: charPerLine.toString(),
onChanged: (val) {
if (val.isNotEmpty) {
charPerLine = int.parse(val);
} else
} else {
charPerLine = 0;
}
},
))
],
),
SizedBox(height: 10),
if (!widget.hideOption!) const SizedBox(height: 10),
if (_printers.isEmpty)
Container(
padding: const EdgeInsets.only(top: 100),
child: Column(
children: [
SvgPicture.asset(
'assets/image/ic_printer_bulk.svg',
width: 200,
height: 200,
package: 'max_print_plus',
color: const Color.fromARGB(255, 207, 216, 220),
),
const SizedBox(
height: 16,
),
const Text(
'Bluetooth Kosong',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
color: Color.fromARGB(255, 186, 197, 202),
),
)
],
),
),
..._printers
.map((printer) => ListTile(
title: Text("${printer.name}"),
subtitle: Text("${printer.address}"),
leading: Icon(Icons.bluetooth),
title: Text(
"${printer.name}",
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 15),
),
selectedColor: Colors.green,
subtitle: Text("${printer.address}",
style: const TextStyle(color: Colors.black)),
leading: SvgPicture.asset(
'assets/image/ic_bluetooth.svg',
width: 30,
height: 30,
package: 'max_print_plus',
color: printer.connected ? Colors.green : Colors.grey,
),
onTap: () => _connect(printer),
trailing: printer.connected
? Wrap(
children: [
IconButton(
tooltip: 'ESC POS Command',
onPressed: () => _startPrinter(1, printer),
icon: Icon(Icons.print)),
IconButton(
tooltip: 'Html Print',
onPressed: () => _startPrinter(3, printer),
icon: Icon(Icons.image)),
tooltip: 'ESC POS Command',
onPressed: () => _startPrinter(1, printer),
icon: SvgPicture.asset(
'assets/image/ic_printer_bold.svg',
width: 28,
height: 28,
package: 'max_print_plus',
color: printer.connected
? Colors.green
: Colors.grey,
),
),
// IconButton(
// tooltip: 'Html Print',
// onPressed: () => _startPrinter(3, printer),
// icon: const Icon(Icons.image)),
],
)
: null,
@@ -130,9 +190,14 @@ class _BluetoothPrinterScreenState extends State<BluetoothPrinterScreen> {
.toList(),
],
),
floatingActionButton: FloatingActionButton(
child: _isLoading ? Icon(Icons.stop) : Icon(Icons.play_arrow),
onPressed: _isLoading ? null : _scan,
bottomNavigationBar: Container(
padding: const EdgeInsets.all(16),
child: MyButton(
text: 'Refresh',
textColor: Colors.black,
press: _isLoading ? null : _scan,
width: double.infinity,
),
),
);
}
@@ -165,37 +230,21 @@ class _BluetoothPrinterScreenState extends State<BluetoothPrinterScreen> {
var profile = await CapabilityProfile.load();
await _connect(printer);
late List<int> data;
if (byteType == 1) {
data = await ESCPrinterService(null).getSamplePosBytes(
paperSizeWidthMM: paperWidth,
maxPerLine: charPerLine,
profile: profile,
bytesData: widget.bytes,
);
} else if (byteType == 2) {
data = await ESCPrinterService(null).getPdfBytes(
paperSizeWidthMM: paperWidth,
maxPerLine: charPerLine,
profile: profile);
} else if (byteType == 3) {
// final content = Demo.getShortReceiptContent();
// Uint8List? htmlBytes = await WebcontentConverter.contentToImage(
// content: content,
// executablePath: WebViewHelper.executablePath(),
// );
// var service = ESCPrinterService(htmlBytes);
// data = await service.getBytes(
// paperSizeWidthMM: paperWidth,
// maxPerLine: charPerLine,
// profile: profile);
}
// late List<int> data;
// if (byteType == 1) {
List<int> data = await ESCPrinterService(null).getSamplePosBytes(
paperSizeWidthMM: paperWidth,
maxPerLine: charPerLine,
profile: profile,
bytesData: widget.bytes,
);
if (_manager != null) {
if (!await _manager!.checkConnected()) await _manager!.connect();
_manager!.writeBytes(data, isDisconnect: true);
}
// widget.onSuccess!(true);
Navigator.pop(context, true);
}
}

62
lib/print/max_print_bt.dart Normal file
View File

@@ -0,0 +1,62 @@
import 'package:drago_pos_printer/utils/esc_pos/generator.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:max_print_plus/print/bluetooth_printer_screen.dart';
enum HistoryTabData { reservation, dinein, waitinglist, pickup, delivery }
class MaxPrintBt extends StatefulWidget {
List<int> bytes;
EscGenerator generator;
Function(bool)? onSuccess;
bool? hideOption;
MaxPrintBt(
{Key? key,
required this.bytes,
required this.generator,
required this.onSuccess,
this.hideOption = true})
: super(key: key);
@override
State<MaxPrintBt> createState() => _MaxPrintBtState();
}
class _MaxPrintBtState extends State<MaxPrintBt> with TickerProviderStateMixin {
String? uid;
bool? isLogin;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFFAFAFA),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: SvgPicture.asset(
'assets/image/ic_appbar_back.svg',
width: 30,
height: 30,
package: 'max_print_plus',
)),
backgroundColor: const Color(0xFFFAFAFA),
centerTitle: true,
title: const Text(
'Cetak',
style: TextStyle(
fontWeight: FontWeight.bold,
// letterSpacing: 2.0,
fontSize: 16),
),
),
body: BluetoothPrinterScreen(
bytes: widget.bytes, generator: widget.generator),
);
}
}

30
lib/my_button.dart → lib/widget/my_button.dart
View File

@@ -34,28 +34,28 @@ class MyButton extends StatelessWidget {
child: ElevatedButton(
onPressed: press,
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
padding: MaterialStateProperty.all(
elevation: WidgetStateProperty.all(0),
padding: WidgetStateProperty.all(
padding ?? const EdgeInsets.all(16.0)),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return Color(0xFFDCDEE0);
} else if (states.contains(MaterialState.disabled)) {
return Color(0xFFF2F2F5);
} else if (states.contains(MaterialState.focused)) {
return Color(0xFFFFC700);
backgroundColor: WidgetStateProperty.resolveWith<Color>(
(Set<WidgetState> states) {
if (states.contains(WidgetState.pressed)) {
return const Color(0xFFDCDEE0);
} else if (states.contains(WidgetState.disabled)) {
return const Color(0xFFF2F2F5);
} else if (states.contains(WidgetState.focused)) {
return const Color(0xFFFFC700);
}
return color ??
Color(0xFFFFC700); // Use the component's default.
const Color(0xFFFFC700); // Use the component's default.
},
),
textStyle: MaterialStateProperty.all<TextStyle>(
TextStyle(color: textColor ?? Color(0xFF242632))),
shape: MaterialStateProperty.resolveWith<RoundedRectangleBorder>(
textStyle: WidgetStateProperty.all<TextStyle>(
TextStyle(color: textColor ?? const Color(0xFF242632))),
shape: WidgetStateProperty.resolveWith<RoundedRectangleBorder>(
(states) {
return RoundedRectangleBorder(
side: !(states.contains(MaterialState.pressed))
side: !(states.contains(WidgetState.pressed))
? BorderSide(color: borderColor ?? Colors.transparent)
: const BorderSide(color: Colors.transparent),
borderRadius: