import 'package:flutter/material.dart';
import 'package:timeline_tile/timeline_tile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: OrderStatusTimeline(),
);
}
}
class OrderStatusTimeline extends StatelessWidget {
final List<Map<String, String>> orderStatuses = [
{
'time': '9.30 AM',
'status': 'Order placed',
'message': 'Your order #3HDFGD was placed\n for delivery',
},
{
'time': '9.34 AM',
'status': 'Pending',
'message':
'Your order is pending for confirmation.\n We will confirm within 5 minutes.',
},
{
'time': '9.40 AM',
'status': 'Out for Delivery',
'message': 'Your product is being delivered.',
},
{
'time': '9.45 AM',
'status': 'Received',
'message': 'Product delivered to you.',
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Order Status Timeline')),
body: ListView.builder(
itemCount: orderStatuses.length,
itemBuilder: (context, index) {
final status = orderStatuses[index];
bool isCheckFilled = status['status'] == 'Order placed' ||
status['status'] == 'Pending';
return TimelineTile(
alignment: TimelineAlign.manual,
lineXY: 0.30,
isFirst: index == 0,
isLast: index == orderStatuses.length - 1,
indicatorStyle: IndicatorStyle(
width: 24,
height: 24,
indicator: _buildIndicator(isCheckFilled),
drawGap: true,
),
beforeLineStyle: LineStyle(
color: isCheckFilled ? Color(0xFF00C767) : Colors.grey,
thickness: 1,
),
startChild: Padding(
padding: const EdgeInsets.all(20.0),
child: Align(
alignment: Alignment.centerRight,
child: Text(
status['time'] ?? '',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
),
),
endChild: Padding(
padding:
const EdgeInsets.only(top: 22.0, left: 16.0, right: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
status['status'] ?? '',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
SizedBox(height: 4),
Text(
status['message'] ?? '',
),
],
),
),
);
},
),
);
}
Widget _buildIndicator(bool isCheckFilled) {
return Container(
decoration: BoxDecoration(
color: isCheckFilled ? Colors.green : Colors.grey,
shape: BoxShape.circle,
),
child: Icon(
Icons.check,
color: Colors.white,
size: 16,
),
);
}
}
Tags:
timeline