Skip to content

Instantly share code, notes, and snippets.

@Shreemanarjun

Shreemanarjun/price_compare_ui.dart

Last active March 28, 2025 20:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Shreemanarjun/1bea63cec5d40092f96931c29a850d51 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Shreemanarjun/1bea63cec5d40092f96931c29a850d51 to your computer and use it in GitHub Desktop.
Download ZIP
price compare custom ui
Raw
price_compare_ui.dart
import 'package:auto_route/annotations.dart';
import 'package:boxy/boxy.dart';
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
@RoutePage()
class CustomUiPage extends StatefulWidget {
const CustomUiPage({super.key});
@override
State<CustomUiPage> createState() => _CustomUiPageState();
}
class _CustomUiPageState extends State<CustomUiPage> {
@override
Widget build(BuildContext context) {
final maxCount = 5;
return Scaffold(
body: SafeArea(
child: ListView.separated(
padding: EdgeInsets.only(top: 180),
itemCount: maxCount,
separatorBuilder: (context, index) => Divider(
height: 1,
color: Colors.grey,
),
itemBuilder: (context, index) {
return CustomTile(
tileNo: index,
isLast: index == maxCount - 1,
);
},
),
),
);
}
}
class CustomTile extends StatelessWidget {
final int tileNo;
final bool isLast;
const CustomTile({
super.key,
required this.tileNo,
required this.isLast,
});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 8),
height: 80,
color: Colors.white,
child: Row(
children: [
Expanded(
flex: 6,
child: Text("$tileNo"),
),
Expanded(
flex: 2,
child: PriceInfo(
tileNo: tileNo,
isLast: isLast,
),
),
8.widthBox,
Expanded(
flex: 2,
child: PriceInfo(
tileNo: tileNo,
isLast: isLast,
),
),
8.widthBox,
Expanded(
flex: 2,
child: PriceInfo(
tileNo: tileNo,
isLast: isLast,
),
),
// 12.widthBox,
// Expanded(
// flex: 1,
// child: Stack(
// clipBehavior: Clip.none,
// children: [
// if (tileNo == 0)
// Positioned.fill(
// top: -80,
// bottom: -40,
// child: Container(
// color: Colors.red,
// child: Text("header $tileNo"),
// ),
// ),
// Positioned.fill(
// top: 0,
// child: Container(
// alignment: Alignment.center,
// color: Colors.black,
// child: Text("tileNo"),
// ),
// )
// ],
// ),
// ),
// 12.widthBox,
// Expanded(
// flex: 1,
// child: Stack(
// clipBehavior: Clip.none,
// children: [
// if (tileNo == 0)
// Positioned.fill(
// top: -40,
// bottom: -40,
// child: Container(
// color: Colors.red,
// child: Text("header $tileNo"),
// ),
// ),
// Positioned.fill(
// top: 0,
// child: Container(
// alignment: Alignment.center,
// color: Colors.black,
// child: Text("tileNo"),
// ),
// )
// ],
// ),
// ),
Expanded(
flex: 3,
child: Container(
color: Colors.yellow,
),
),
],
),
);
}
}
class PriceInfo extends StatelessWidget {
const PriceInfo({
super.key,
required this.tileNo,
required this.isLast,
});
final int tileNo;
final bool isLast;
@override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
child: Stack(
clipBehavior: Clip.none,
children: [
if (isLast)
Positioned.fill(
bottom: -20,
child: Container(
height: 20,
color: Colors.white54,
),
),
Positioned.fill(
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: Text("tileNo"),
),
),
],
),
),
if (tileNo == 0)
Positioned.fill(
top: -140,
bottom: 80,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
height: 10,
color: Colors.white,
alignment: Alignment.center,
child: Text("Image $tileNo"),
),
),
Expanded(
child: SizedBox(
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
left: -12,
right: -12,
child: Container(
height: 10,
alignment: Alignment.center,
color: Colors.blue,
child: Text("Price $tileNo"),
),
),
],
),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text("items $tileNo"),
),
),
],
),
),
],
);
}
}
class AvtarBoxy extends BoxyDelegate {
@override
Size layout() {
final header = getChild(#header);
// final linearList1 = getChild(#linearList1);
// final linearList2 = getChild(#linearList2);
// final linearList3 = getChild(#linearList3);
// final linearList1contetnt = getChild(#linearList1contetnt);
header.layout(constraints);
// final extraWidth = constraints.maxWidth * 0.2;
// final extraHeight = constraints.maxHeight * 0.4;
// final linearlistmaxWidth = constraints.maxWidth + extraWidth;
// final linearlistmaxHeight = constraints.maxHeight + extraHeight;
// linearList1.layout(BoxConstraints(
// maxWidth: linearlistmaxWidth,
// maxHeight: linearlistmaxHeight,
// ));
// linearList2.layout(BoxConstraints(
// maxWidth: linearlistmaxWidth,
// maxHeight: linearlistmaxHeight,
// ));
// linearList3.layout(BoxConstraints(
// maxWidth: linearlistmaxWidth,
// maxHeight: linearlistmaxHeight,
// ));
// final maxWidthOfList1Content = linearList1.size.width +
// linearList2.size.width +
// linearList3.size.width;
// final extraWidthOfList1Content = maxWidthOfList1Content * 0.3;
// linearList1contetnt.layout(BoxConstraints(
// maxWidth: maxWidthOfList1Content + extraWidthOfList1Content,
// maxHeight: constraints.maxHeight,
// ));
// linearList1.position(Offset(header.size.width * 0.35, -extraHeight + 10));
// linearList2.position(Offset(header.size.width * 0.50, -extraHeight + 10));
// linearList3.position(Offset(header.size.width * 0.65, -extraHeight + 10));
// linearList1contetnt.position(
// Offset(
// header.size.width * 0.3,
// -(linearList1.size.height * 0.15),
// ),
// );
return header.size + Offset(0, header.size.height);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment