skip to Main Content

I want to make a slide panel in my app. Like this :

Figma example

For now I have made this :

Code

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


  1. Chosen as BEST ANSWER

    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 !


  2. getwidget has carousel functionality and is very well documented:

    https://docs.getwidget.dev/gf-carousel/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search