Current output:
Expected output:
Code:
SizedBox(
width: 380,
height: 180,
child: Swiper(
itemCount: items.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Expanded(
child: Card(
child: ListTile(
title: Text(
'${items[index].title}',
),
subtitle: Text(
'${items[index].body}',
),
trailing: Column(
children: <Widget>[
CircleAvatar(
backgroundColor: HexColor("#0087a8"),
child: IconButton(
icon: Icon(Icons.add),
],
),
),
),
)
],
);
},
viewportFraction: 0.8,
scale: 0.9,
control: SwiperControl(color: Colors.white),
),
);
I am unable to create the icon button to be that way. As when i put in padding, it says that the pixels overflowed. I need to get the add button on the bottom right hand side.
As already pointed out, you shouldn't use a ListTile
for this, as you want to use more than just a title, subtitle for your content.
The reason I've picked a Stack
over a Column
here, is that it allows you to safely use it in different size screens whilst assuring the view won't overflow. With Column
, it would use the button diameter as the whole space to use (vertically), even though it is restrict to the right side of the box.
I believe this is what you're looking for.
class MyListTile extends StatelessWidget {
const MyListTile({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 180.0,
color: const Color(0xff0087a8),
child: Container(
padding: const EdgeInsets.all(20.0),
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: const Color.fromRGBO(19, 12, 117, 1.0),
),
child: Stack(
children: <Widget>[
Text(
'EUR - USD',
style: Theme.of(context).textTheme.display2.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Forex',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: const Color(0xff0087a8),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
size: 50.0,
),
),
)
],
),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With