How can I achieve something as shown in this screenshot in flutter?
I need to get some clarity for the UI development
:
I want to achieve this UI design regarding updated above link and give me a stepper custom code for same UI design and give me a clear explanation for this UI.
This Stepper can be made using the existing widgets like Row , Column and Container. I have added a sample code which gives the output you want , you can make your changes according to your need.
Full Code : –
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List title = ['Title 1','Title 2','Title 3','Title 4','Title 5'];
List label = ['Label 1','Label 2','Label 3','Label 4','Label 5'];
List body = ['Body 1','Body 2','Body 3','Body 4','Body 5'];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.black,
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: ListView(
children: [
for(int i =0;i < title.length;i++)...[
SizedBox(
height: 120,
child: Row(
children: [
if(i%2==0)...[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(title[i],style: const TextStyle(color: Colors.white)),
const SizedBox(height: 10,),
Container(
width: 150,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
border:
Border(
left: BorderSide(color: Colors.white,width: 0.1),
right: BorderSide(color: Colors.white),bottom: BorderSide(color: Colors.white),top: BorderSide(color: Colors.white))
),
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: [Text(label[i],style: const TextStyle(color: Colors.white),),
const SizedBox(height: 10,),
Text(body[i],style: const TextStyle(color: Colors.white)),
],
),
),
],
),]
else...[Container(
width: 150,)],const SizedBox(width: 10,),Column(children: [
Container(
height: 7.5,width: 7.5,decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white
),)
,Expanded(
child: Container(
width: 2.5,
color: Colors.white
),
),
],),
if(i%2!=0)...[
const SizedBox(width: 10,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title[i],style: const TextStyle(color: Colors.white)),
const SizedBox(height: 10,),
Container(
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border:
Border.all(color: Colors.white)
),
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [Text(label[i],style: const TextStyle(color: Colors.white),),
const SizedBox(height: 10,),
Text(body[i],style: const TextStyle(color: Colors.white)),],
),
),
],
),]
],
),
),]
],
),
)
),
),
);
}
}
Output : –
0