fluttere-commerce
How to develop these two selectable containers?
Please check the above image. I want to create these two selectable containers that if i i select home container the home container should be selected,and if i select office container, the office container should be selected and the border of selected container should be orange like this in the screen.
I tried it by making a simple container, i can create these statically but i want to make it selectable.
Solution
Assuming you're using a builder. If so, you can take advantage of the index
class _MyHomePageState extends State<MyHomePage> {
int currentIndex = 0;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: SizedBox(
width: size.width * 0.80,
child: MaterialButton(
padding: const EdgeInsets.all(18.0),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: Colors.blue,
onPressed: () {},
child: const Text(
"Add Card",
style: TextStyle(color: Colors.white),
),
),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 35.0, vertical: 20),
child: CustomScrollView(
slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(50)),
color: Colors.grey[300],
),
padding: const EdgeInsets.all(19),
child: Icon(
Icons.adaptive.arrow_back,
size: 15,
),
),
const SizedBox(width: 30),
const Text(
"Shopping Cart (5)",
style: TextStyle(fontSize: 19, color: Colors.black),
)
],
),
),
),
const SliverPadding(
padding: EdgeInsets.symmetric(vertical: 30.0),
sliver: SliverToBoxAdapter(
child: Text(
"Delivery Address",
style: TextStyle(fontSize: 17),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
setState(() {
currentIndex = index;
});
print(currentIndex);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: currentIndex == index
? const Color(0xFFFFB024)
: Colors.grey,
)),
height: 100,
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Item $index",
style: const TextStyle(fontSize: 20),
),
currentIndex == index
? Container(
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(50),
color: const Color(0xFFFFB024)),
child: const Icon(
Icons.check,
color: Colors.black,
))
: Container()
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
const Text("An address"),
TextButton(
onPressed: () {},
child: const Text("Edit"))
],
)
],
),
),
),
);
},
// 40 list items
childCount: 2,
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 18.0),
sliver: SliverToBoxAdapter(
child: DottedBorder(
borderType: BorderType.RRect,
dashPattern: const [15],
strokeCap: StrokeCap.round,
strokeWidth: 2,
color: Colors.grey.shade200,
radius: const Radius.circular(12),
padding: const EdgeInsets.all(6),
child: const ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(12)),
child: Padding(
padding: EdgeInsets.all(30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.add_circle_outline_sharp,
color: Colors.yellow,
),
SizedBox(width: 10),
Text("Add New Address")
],
),
),
),
)),
),
],
),
));
}
}
result: 