Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Trying to build horizontal scrollable ListView

I want to build a horizontal scrollable ListView with 2 containers on top of each other. The idea is to build something like this:

Expected

My idea for this is to be a SizedBox with ListView builder child. However, I cannot find how to stack those 2 containers on the top of each other. Should I be using Stack widget or something else? A guidance here would be very appreciated.

This is where I’m so far:

SizedBox(
  height: deviceWidth * 0.55,
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemBuilder: (BuildContext context, int index) => Card(
        child: Stack(
      alignment: AlignmentDirectional.center,
      children: [
        Container(color: whitePrimary),
        Container(
          color: Colors.purple,
        )
      ],
    )),
  ),
),

Where my goal was to display 2 containers on top of each other, just to test out the Stack Widget, but without success..

In the code above, the deviceHeight property is:

Size size = MediaQuery.of(context).size;

double deviceHeight = size.height;
Tags:

2

Answers


  1. 0

    try this

    SizedBox(
          height: 100,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 4,
            itemBuilder: (context, index) {
              return Stack(children: [
                Container(
                  height: 150,
                  width: 120,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  height: 100,
                  width: 120,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  decoration: BoxDecoration(
                      color: Colors.purpleAccent,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black,
                            offset: Offset(0, 5),
                            blurRadius: 10)
                      ]),
                )
              ]);
            },
          ),
        )
    Login or Signup to reply.
  2. 0

    You can wrap the Container with Align to align it in the Stack. You also need to give the Container actual child widget so it starts appearing on the screen.

    Stack(
  alignment: AlignmentDirectional.center,
  children: [
    Container(
      color: Colors.white,
      child: Text('This is a sentence'),
    ),
    Align( // Align the second Container to the top center of the Stack
      alignment: Alignment.topCenter,
      child: Container(
        color: Colors.purple,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 30),
          child: Text('This is on the top container'),
        ),
      ),
    )
  ],
)

    Another option is to use the Positioned widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search