I want to make a slide panel in my app. Like this :
For now I have made this :
With this code :
SizedBox(
width: 100.w,
child: Align(
alignment: Alignment.center,
child: Stack(
children: [
SizedBox(
height: 10.h,
width: 100.w,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6j6N8zf-hAETioY1MLsCY_bnydJykgijQog&usqp=CAU',
fit: BoxFit.cover,
),
),
),
Container(
padding: EdgeInsets.all(5.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black.withAlpha(0),
Colors.black45,
Colors.black54
],
))),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {}, icon: const Icon(Icons.arrow_back_ios)),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('TITRE'),
SizedBox(
width: 60.w,
child: const Text(
'Contenu très trèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrèstrès long',
overflow: TextOverflow.visible,
),
),
],
),
const Spacer(),
IconButton(
onPressed: () {}, icon: const Icon(Icons.arrow_forward_ios))
],
)
],
),
),
);
I have tried multiple things so my code can be a little confused sorry !
So my problem is I want to center the row.
Any idea ? Or maybe some package to help me with this panel ?
2
Answers
Ok, so with some pause. My problem was just that I wanted to center the Row, but in reality I needed to center the Column. Just added
mainAxisAlignment: MainAxisAlignment.center
to the Column inside the Row !getwidget has carousel functionality and is very well documented:
https://docs.getwidget.dev/gf-carousel/