438 lines
15 KiB
Dart
438 lines
15 KiB
Dart
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart' hide FormData;
|
|
import 'package:traderscircuit/Utils/Common/comonGlassmorphicContainer.dart';
|
|
import 'package:traderscircuit/Utils/Common/sized_box.dart';
|
|
import 'package:traderscircuit/Utils/text.dart';
|
|
import 'package:traderscircuit/controller/products_controller.dart';
|
|
import '../../../Utils/Common/CommonAppBar.dart';
|
|
import '../../onBoarding/splashScreen1.dart';
|
|
|
|
class OptionChainScreen extends StatefulWidget {
|
|
const OptionChainScreen({super.key});
|
|
|
|
@override
|
|
State<OptionChainScreen> createState() => _OptionChainScreenState();
|
|
}
|
|
|
|
class _OptionChainScreenState extends State<OptionChainScreen> {
|
|
List<String> containerTexts = [
|
|
"9 MAY",
|
|
"10 MAY",
|
|
"11 MAY",
|
|
"12 MAY",
|
|
"13 MAY"
|
|
];
|
|
ProductsController productsController = Get.put(ProductsController());
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.black,
|
|
drawerEnableOpenDragGesture: false,
|
|
extendBody: true,
|
|
appBar: const CommonAppbar(
|
|
height: 50,
|
|
titleTxt: "",
|
|
),
|
|
body: Stack(
|
|
children: [
|
|
const CommonBlurLeft(),
|
|
const CommonBlurRight(),
|
|
Padding(
|
|
padding: const EdgeInsets.all(15.0),
|
|
child: DefaultTabController(
|
|
length: 5, // Number of tabs
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
text16W400('TATA MOTORS'),
|
|
text24W500('₹453.60'),
|
|
SizedBox(
|
|
height: 60,
|
|
width: double.infinity,
|
|
child: ListView.builder(
|
|
shrinkWrap: true,
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: containerTexts.length,
|
|
itemBuilder: (context, index) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
productsController.selectedIndex.value = index;
|
|
},
|
|
child: Row(
|
|
children: [
|
|
topContainer(containerTexts[index], index),
|
|
sizedBoxWidth(10.w),
|
|
],
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(6),
|
|
border: Border.all(
|
|
width: 1,
|
|
color: const Color(0xFF4A73FB).withOpacity(0.3),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 5, horizontal: 10),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
tableMainHeader('Calls'),
|
|
tableMainHeader('Option Chain'),
|
|
tableMainHeader('Puts'),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xff00295C),
|
|
border: Border(
|
|
top: BorderSide(
|
|
width: 1,
|
|
color: const Color(0xFF4A73FB)
|
|
.withOpacity(0.3),
|
|
),
|
|
)),
|
|
child: Row(
|
|
children: [
|
|
Expanded(child: tableHeader('OI', 'change')),
|
|
Expanded(child: tableHeader('LTP', 'change')),
|
|
Expanded(
|
|
flex: 2, child: tableHeader('Price', '')),
|
|
Expanded(child: tableHeader('LTP', 'change')),
|
|
Expanded(child: tableHeader('OI', 'change')),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: MediaQuery.of(context).size.height - 330,
|
|
child: ListView.separated(
|
|
itemCount: 20,
|
|
itemBuilder: (context, index) {
|
|
// return index == 5
|
|
// ? Row(
|
|
// mainAxisAlignment:
|
|
// MainAxisAlignment.spaceBetween,
|
|
// children: [
|
|
// tableCell('0.3', '',
|
|
// isActive: false),
|
|
// tableCell('271.00', ''),
|
|
// tableCell('22,250', '',
|
|
// isMiddleElement: true),
|
|
// tableCell('41.35', ''),
|
|
// tableCell('0.3', ''),
|
|
// ],
|
|
// )
|
|
// :
|
|
return Row(
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
tableCell('0.3', ''),
|
|
tableCell('271.00', ''),
|
|
tableCell('22,250', '',
|
|
isMiddleElement: true),
|
|
tableCell('41.35', ''),
|
|
tableCell('0.3', ''),
|
|
],
|
|
);
|
|
},
|
|
separatorBuilder:
|
|
(BuildContext context, int index) {
|
|
return index == 5
|
|
? const Stack(children: [
|
|
Divider(
|
|
height: 5,
|
|
color: Colors.transparent),
|
|
PositionedOverlay()
|
|
])
|
|
: const SizedBox(
|
|
height: 0,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget tableHeader(String text, String text1) {
|
|
return Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
|
child: RichText(
|
|
textAlign: TextAlign.center,
|
|
text: TextSpan(
|
|
text: text,
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.sp),
|
|
children: <TextSpan>[
|
|
TextSpan(
|
|
text: "\n${text1}",
|
|
style:
|
|
TextStyle(fontWeight: FontWeight.bold, fontSize: 11.sp)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget tableMainHeader(String text) {
|
|
return Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 10.0),
|
|
child: Text(text,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 16.sp)),
|
|
),
|
|
);
|
|
}
|
|
|
|
TableRow tableRow(int index) {
|
|
return TableRow(
|
|
decoration: BoxDecoration(
|
|
color: index % 2 == 0 ? Colors.transparent : Colors.transparent,
|
|
),
|
|
children: [
|
|
tableCell('0.3', ''),
|
|
tableCell('271.00', ''),
|
|
tableCell('22,250', ''),
|
|
tableCell('41.35', ''),
|
|
tableCell('0.3', ''),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget tableCell(String text, String text1, {bool? isMiddleElement}) {
|
|
return isMiddleElement == true
|
|
? Container(
|
|
decoration: const BoxDecoration(
|
|
border: Border(
|
|
right: BorderSide(width: 1, color: Color(0xFF4A73FB)),
|
|
left: BorderSide(width: 1, color: Color(0xFF4A73FB)))),
|
|
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 2),
|
|
child: Text(
|
|
text,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 12.sp,
|
|
color: Colors.white),
|
|
),
|
|
)
|
|
: Padding(
|
|
padding: const EdgeInsets.all(6.0),
|
|
child: Text(
|
|
text,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 12.sp,
|
|
color: Colors.white),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget topContainer(String text, int index) {
|
|
return Obx(() {
|
|
return productsController.selectedIndex.value == index
|
|
? Container(
|
|
height: 40.h,
|
|
width: 126.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(5),
|
|
color: const Color(0Xff0093FF),
|
|
),
|
|
child: Center(child: text16W500(text)),
|
|
)
|
|
: commonGlassContainer(
|
|
width: 126.w,
|
|
height: 40.h,
|
|
borderradius: 5,
|
|
customWidget: Center(child: text16W400(text)),
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
List<FlSpot> listData(List<num> data) {
|
|
return data.asMap().entries.map((e) {
|
|
return FlSpot(e.key.toDouble(), e.value.toDouble());
|
|
}).toList();
|
|
}
|
|
|
|
class OptionChainTable extends StatelessWidget {
|
|
const OptionChainTable({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Table(
|
|
columnWidths: const {
|
|
0: FlexColumnWidth(1),
|
|
1: FlexColumnWidth(1),
|
|
2: FlexColumnWidth(1),
|
|
3: FlexColumnWidth(1),
|
|
4: FlexColumnWidth(1),
|
|
5: FlexColumnWidth(1),
|
|
},
|
|
// border: TableBorder.all(color: Colors.white),
|
|
children: [
|
|
TableRow(
|
|
decoration: const BoxDecoration(color: Colors.black),
|
|
children: [
|
|
tableHeader('OI\nchange'),
|
|
tableHeader('LTP\nchange'),
|
|
tableHeader('Price'),
|
|
tableHeader('LTP\nchange'),
|
|
tableHeader('OI\nchange'),
|
|
],
|
|
),
|
|
...List.generate(5, (index) => tableRow(index)),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget tableHeader(String text) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Center(
|
|
child: Text(text,
|
|
style: const TextStyle(
|
|
color: Colors.white, fontWeight: FontWeight.bold)),
|
|
),
|
|
);
|
|
}
|
|
|
|
TableRow tableRow(int index) {
|
|
return TableRow(
|
|
decoration: BoxDecoration(
|
|
color: index % 2 == 0
|
|
? Colors.black.withOpacity(0.8)
|
|
: Colors.black.withOpacity(0.6),
|
|
),
|
|
children: [
|
|
tableCell('1,43,875\n59,625'),
|
|
tableCell('271.00\n-45.65'),
|
|
tableCell('22,250'),
|
|
tableCell('41.35\n-8.20'),
|
|
tableCell('10,07,275\n2,71,400'),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget tableCell(String text) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Center(
|
|
child: Text(text, style: const TextStyle(color: Colors.white)),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class DottedLinePainter extends CustomPainter {
|
|
final Color color;
|
|
|
|
DottedLinePainter({required this.color});
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
var paint = Paint()
|
|
..color = color
|
|
..strokeWidth = 1
|
|
..style = PaintingStyle.stroke;
|
|
|
|
var max = size.width;
|
|
var dashWidth = 5;
|
|
var dashSpace = 3;
|
|
double startX = 0;
|
|
|
|
while (startX < max) {
|
|
canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
|
|
startX += dashWidth + dashSpace;
|
|
}
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(CustomPainter oldDelegate) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
class PositionedOverlay extends StatelessWidget {
|
|
const PositionedOverlay({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
width: Get.width - 10,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: CustomPaint(
|
|
painter: DottedLinePainter(color: const Color(0xFF4A73FB)),
|
|
child: Container(
|
|
height: 1,
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.all(5),
|
|
color: const Color(0xff00295C),
|
|
alignment: Alignment.center,
|
|
child: Text('22,851.75',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11.sp)),
|
|
),
|
|
Expanded(
|
|
child: CustomPaint(
|
|
painter: DottedLinePainter(color: const Color(0xFF4A73FB)),
|
|
child: Container(
|
|
height: 1,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
double calculateOverlayPosition(BoxConstraints constraints) {
|
|
// Calculate the position where you want to show the overlay
|
|
// For example, to show the overlay at a certain position (e.g., between the 5th and 6th items),
|
|
// you can use the item height and the item index to calculate the exact position
|
|
double itemHeight = 56.0; // Example item height, adjust as needed
|
|
int overlayIndex = 5; // Index where you want to show the overlay
|
|
return overlayIndex * itemHeight;
|
|
}
|
|
}
|