Issue
I need to create a timeline widget which would look something like this:
I was trying to use timeline_tile for this. But the result I got is:
As you can see some of the serious issues are:
- The indicator icon is not aligned with the date(left) and status(right) section.
- The vertical line should not connect with the indicator.
My code for this timeline widget is:
class _OrderTimelineState extends State<OrderTimeline> {
int totalSteps = 3;
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 3,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
// padding: EdgeInsets.all(5),
child: _buildTimelineTile(index),
);
},
);
}
Widget _buildTimelineTile(int index) {
return TimelineTile(
alignment: TimelineAlign.manual,
lineXY: 0.4,
isFirst: index == 0 ? true : false,
isLast: index == totalSteps - 1 ? true : false,
indicatorStyle: IndicatorStyle(
width: 20,
height: 20,
indicator: _buildIndicator(),
),
afterLineStyle: LineStyle(
thickness: 1,
color: CustomColors.secondary,
),
beforeLineStyle: LineStyle(
thickness: 1,
color: CustomColors.secondary,
),
startChild: Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"date",
style: TextStyle(
fontSize: 16,
fontWeight: index == 0 ? FontWeight.bold : FontWeight.normal,
color: CustomColors.primary,
),
),
SizedBox(height: 5),
Text(
"time",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: CustomColors.secondary,
),
),
],
),
),
endChild: Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"status",
style: TextStyle(
fontSize: 16,
fontWeight: index == 0 ? FontWeight.bold : FontWeight.normal,
color: CustomColors.primary,
),
),
SizedBox(height: 5),
Text(
"You have successfully picked up the package",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: CustomColors.secondary,
),
),
],
),
),
);
}
Widget _buildIndicator() {
return Container(
child: Material(
elevation: 5,
borderRadius: BorderRadius.circular(5),
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: CustomColors.primary,
borderRadius: BorderRadius.circular(5),
),
child: Center(
child: Icon(
Icons.check,
color: CustomColors.white,
size: 15,
),
),
),
),
);
}
}
How can i solve this issue?
Solution
You can achieve it by modifying the IndicatorStyle:
TimelineTile(
indicatorStyle: IndicatorStyle(
width: 20,
height: 20,
indicator: _buildIndicator(),
padding: const EdgeInsets.symmetric(vertical: 16.0),
indicatorXY: 0,
),
// Other code
),
- Use padding to set the padding between the line and indicator (Default value 0)
- Use indicatorXY to set the position of indicator (Default value 0.5)
Read the API reference for more information.
Answered By - Midhun MP
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.