I need to create a Stack - Listview - Positioned in Flutter

Question

I need to create a Stack - Listview - Positioned in Flutter

Navigation

#1 by (0 votes)

1

I need to create the following layout.

So far I have this, but as much as I try to understand the logic of the order of the widgets, I can not find what I want.

      body: new Stack(
    children: <Widget>[
      new Container(
        decoration: _recursos.backgroundImageComun(),
      ),
      new Column(
        children: <Widget>[
          new Container(
              height: 196.0,
              child: new Stack(
                children: <Widget>[
                  new ListView(
                    scrollDirection: Axis.horizontal,
                    children: new List.generate(15, (int index) {
                       new Positioned(

                          child: new GestureDetector(
                              onTap: () {
                                randomizer(index);
                              },
                              child: new Container(
                                  width: 110.0,
                                  height: 196.0,
                                  child: new Image(
                                      image: new AssetImage(
                                          'assets/bgcard-a.jpg'),
                                      fit: BoxFit.cover))));
                    }),
                  )
                ],
              ))
        ],
      )
    ],
  ),

UPDATE:

If I do it without the elements: ListView-> Positioned-> GestureDetector I can do it, but it's not the idea.

I need to put it in a listView by the horizontal Scroll, and generate the items dynamically because the number of letters is variable. And logically using the Positioned to give the left "margin". And in the end the GestureDetector to work the selected letter. THOSE elements, are the ones that I can not make them work.

        body: new Stack(children: <Widget>[
      new Container(
        decoration: _recursos.backgroundImageComun(),
      ),
      new Column(
        children: <Widget>[
          new Container(
            height: 196.0,
            child: new Stack(children: <Widget>[
              //ListView->GestureDetector->Positioned
              new Positioned(
                  left: 0.0,
                  child: new Container(
                      width: 110.0,
                      height: 196.0,
                      child: new Image(
                          image: new AssetImage('assets/bgcard-a.jpg'),
                          fit: BoxFit.cover))),
              new Positioned(
                  left: 40.0,
                  child: new Container(
                      width: 110.0,
                      height: 196.0,
                      child: new Image(
                          image: new AssetImage('assets/bgcard-a.jpg'),
                          fit: BoxFit.cover))),
            ]),
          ),
        ],
      ),
    ])

android flutter

asked by Luis Rodriguez 10.08.2018 в 04:00

source

1 answer

how do I upload an image in java? I have the following code Multiple markers at this line

score 0 · Accepted Answer

Finally I have it, with the help of some friends from Flutter, all without using Stack basically the trick was the Align widget, it has a property withFactor in which the width of the Widget can be changed by the proportion that put him Create an item fake at the end so it does not show cut.

Here is the basic example.

    List<int> cardList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        return Container(
          child: Center(
            child: Padding(
              padding: EdgeInsets.all(20.0),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  if (index >= cardList.length) {
                    return Align(
                      widthFactor: 0.5,
                      child: SizedBox(
                        width: 80.0,
                      ),
                    );
                  }
                  final item = cardList[index];
                  return Align(
                    alignment: Alignment.centerLeft,
                    widthFactor: 0.5,
                    child: InkWell(
                      onTap: () => print("click on $item"),
                      child: 
                        child: Image(
                            width: 100.0,
                            height: 140.0,
                            image: new AssetImage('resources/naipe.png'),
                            fit: BoxFit.contain),
                      ,
                    ),
                  );
                },
                itemCount: cardList.length + 1,
              ),
            ),
          ),
        );