How to create Custom Timelime in flutter like bellow:
This is the code i have tried so far:
IntrinsicHeight(
child: Row(
children: [
Container(
width: 8.w,
height: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.r),
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFF402883),
Color(0XFF6A55EA),
Color(0XFF8F84D2),
Color(0XFFADA6D5),
],
),
),
),
SizedBox(width: 10.w),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Sign Up",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w700,
),
),
Text(
"Create an account to invest & Trade",
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: 10.h),
Text(
"Investment Order Submitted",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w700,
),
),
Text(
"You will be charged when the company's Escrow account opens(if it hasn't already)",
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: 10.h),
Text(
"Funds In Transit",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w700,
),
),
Text(
"Your Payment method has been charged,funds should arrive in escrow in 3-5 business days.",
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: 10.h),
Text(
"Funds Received",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w700,
),
),
Text(
"Your investment finalization occurs at campaign close, potentially earlier with disbursement.",
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: 10.h),
Text(
"Funds Invested",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w700,
),
),
Text(
"Your investment is complete and can find the details and ownership docs in your portfolio.",
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w400,
),
),
],
),
),
],
),
)
I have acheived this UI with above code:
Now to add these dots on the vertical line which is perfectly aligned with the title in front of it.
Thanks.
2
Answers
(Keep in mind that I removed
10.sp 12.w 8.w
and other things like this, so don’t forget to add them in your code)Because the first item description is only 1. line it is hard to set foxed height
Use this code:
Here is the result:
IntrinsicHeight class is relatively expensive. Avoid using it where possible, like in this case for example. See Flutter’s own documentation on this.
You can achieve the same result without sacrificing performance using other native Flutter components. Here is a complete example:
Code:
Note that in this example you can change the spacing and even the layout of the elements as you prefer.
You just change the
timelineTiles
list insideTimeline
using your state controller and generate as the data is provided by the API. I took the liberty of adding a slight animation to ensure a better visual experience.Outputs:
Same example as the question
or
Alternative layout