CODEWITHSUNDEEP
flutterflutter-layout
Midhilaj
Midhilaj

Reputation: 4987

Listview inside stack widget is not working ( scrollDirection: Axis.vertical)

I need to make this design

enter image description here

This is my code result

enter image description here

But when i add listview it is not working

I need vertical listing not horizontal
ListView.builder( scrollDirection: Axis.vertical, shrinkWrap: true, itemCount: 12, itemBuilder: (context,index){ return Text("my widget card will add here"); })

This is my code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; 

class MyAppNameAppTemplesListing extends StatefulWidget {
  MyAppNameAppTemplesListing({Key key}) : super(key: key);

  @override
  _MyAppNameAppTemplesListingState createState() =>
      _MyAppNameAppTemplesListingState();
}

class _MyAppNameAppTemplesListingState
    extends State<MyAppNameAppTemplesListing> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height*.4,
        ),
        Container(
          height: MediaQuery.of(context).size.height*.14,
          color: Colors.pink[100],
        ),
       Positioned(
         child:  Padding(
           padding: const EdgeInsets.all(8.0),
           child: Text("Temples",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
         ),
       ),
        Positioned(
          top: 55,
          child: Padding(
            padding: const EdgeInsets.only(left: 4,right: 4),
            child:

            Column(

              mainAxisSize: MainAxisSize.min,

              children: <Widget>[
                Stack(
                  children: <Widget>[
                    Container(
                      height: 50.0,
                      width: MediaQuery.of(context).size.width*.97,
                      color: Colors.transparent,
                      child: new Container(
                          decoration: new BoxDecoration(
                              color: Colors.white,
                              borderRadius: new BorderRadius.only(
                                  topLeft: const Radius.circular(40.0),
                                  bottomLeft: const Radius.circular(40.0),
                                  bottomRight: const Radius.circular(40.0),
                                  topRight: const Radius.circular(40.0))),
                          child: new Center(
                            child: Container(
                                margin: EdgeInsets.only(left: MediaQuery.of(context).size.width*.4),
                                child: new Text("Favourite",style: TextStyle(fontSize: 16, color: Colors.grey,fontWeight: FontWeight.bold),)),
                          )),
                    ),
                    Container(
                      height: 50.0,
                      width: MediaQuery.of(context).size.width*.5,
                      color: Colors.transparent,
                      child: new Container(

                          decoration: new BoxDecoration(
                              gradient: LinearGradient(
                                // Where the linear gradient begins and ends
                                begin: Alignment.topRight,
                                end: Alignment.bottomLeft,
                                // Add one stop for each color. Stops should increase from 0 to 1
                                stops: [0.1, 0.5, 0.7, 0.9],
                                colors: [
                                  // Colors are easy thanks to Flutter's Colors class.
                                  Colors.pink[800],
                                  Colors.pink[700],
                                  Colors.red[600],
                                  Colors.red[400],
                                ],
                              ),
                              color: Colors.redAccent[100],
                              borderRadius: new BorderRadius.only(
                                  topLeft: const Radius.circular(40.0),
                                  bottomLeft: const Radius.circular(40.0),
                                  bottomRight: const Radius.circular(40.0),
                                  topRight: const Radius.circular(40.0))),
                          child: new Center(
                            child: new Text("ALL",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
                          )),
                    ),

                  ],
                ),
               ListView.builder(
                   scrollDirection: Axis.vertical,
                   shrinkWrap: true,
                   itemCount: 2,
                   itemBuilder: (context,index){
                     return Text("my widget card will add here");
                   })

              ],
            ),

          ),
        ),
      ],
    );
  }
}

Upvotes: 8

Views: 18915

Answers (8)

Rockey Pandit
Rockey Pandit

Reputation: 11

  • Wrap Listview.builder into Container and set the height.

  • In your Listview.builder set property physics: BouncingScrollPhysics()

    SizedBox(
  height: 350,
  child: ListView.builder(
    shrinkWrap: true,
    physics: const BouncingScrollPhysics(),
    scrollDirection: Axis.horizontal,
    itemCount: 5,
    itemBuilder: (context, index) {
      return _card(index);
    },
  ),
)

Upvotes: 0

Ovidiu Uşvat
Ovidiu Uşvat

Reputation: 833

You need to wrap your ListView.builder in an Positioned widget and give it all the parameters.

Example:

Positioned(
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          child: ListView(),
        ),

This will take full size of the Stack parent.

UPDATE:

You can also use Positioned.fill() which will do the same thing.

Upvotes: 14

sifat ullah shah
sifat ullah shah

Reputation: 67

i was facing same issue when scroll direction was set to horizontal then was facing issue ,

i have solved it by by setting container width and height of listview parent widget, now working fine

Upvotes: 0

Hema Chandran
Hema Chandran

Reputation: 183

Yes, I'm also the one faced the issue! Use Expanded() as a parent of every child of Stack().

Upvotes: -4

Hassan Osama
Hassan Osama

Reputation: 54

Yes wrap listview with container but also add width and margin: EdgeInsects.only(left: 10.0) before widget you are calling image and image description data.

Upvotes: 0

OMi Shah
OMi Shah

Reputation: 6186

First of all, you really need to optimize your widgets. You could have achieved the design in a much easier way.

Now, you have made a little mistake with your current widget design pattern. You need to wrap your Stack() under Column() and move ListView() from Stack() and make it as second child of Column() and it should work.

Full source code:

Column(children: <Widget>[
          Stack(children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height * .4,
            ),
            Container(
              height: MediaQuery.of(context).size.height * .14,
              color: Colors.pink[100],
            ),
            Positioned(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  "Temples",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            Positioned(
              top: 95,
              child: Padding(
                padding: const EdgeInsets.only(left: 4, right: 4),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Stack(
                      children: <Widget>[
                        Container(
                          height: 50.0,
                          width: MediaQuery.of(context).size.width * .97,
                          color: Colors.transparent,
                          child: new Container(
                              decoration: new BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: new BorderRadius.only(
                                      topLeft: const Radius.circular(40.0),
                                      bottomLeft: const Radius.circular(40.0),
                                      bottomRight: const Radius.circular(40.0),
                                      topRight: const Radius.circular(40.0))),
                              child: new Center(
                                child: Container(
                                    margin: EdgeInsets.only(
                                        left:
                                            MediaQuery.of(context).size.width *
                                                .4),
                                    child: new Text(
                                      "Favourite",
                                      style: TextStyle(
                                          fontSize: 16,
                                          color: Colors.grey,
                                          fontWeight: FontWeight.bold),
                                    )),
                              )),
                        ),
                        Container(
                          height: 50.0,
                          width: MediaQuery.of(context).size.width * .5,
                          color: Colors.transparent,
                          child: new Container(
                              decoration: new BoxDecoration(
                                  gradient: LinearGradient(
                                    // Where the linear gradient begins and ends
                                    begin: Alignment.topRight,
                                    end: Alignment.bottomLeft,
                                    // Add one stop for each color. Stops should increase from 0 to 1
                                    stops: [0.1, 0.5, 0.7, 0.9],
                                    colors: [
                                      // Colors are easy thanks to Flutter's Colors class.
                                      Colors.pink[800],
                                      Colors.pink[700],
                                      Colors.red[600],
                                      Colors.red[400],
                                    ],
                                  ),
                                  color: Colors.redAccent[100],
                                  borderRadius: new BorderRadius.only(
                                      topLeft: const Radius.circular(40.0),
                                      bottomLeft: const Radius.circular(40.0),
                                      bottomRight: const Radius.circular(40.0),
                                      topRight: const Radius.circular(40.0))),
                              child: new Center(
                                child: new Text(
                                  "ALL",
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                              )),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ]),
          ListView.builder(
              primary: false,
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: 2,
              itemBuilder: (context, index) {
                return Text("my widget card will add here");
              })
        ])

Upvotes: 0

CodeforCore
CodeforCore

Reputation: 691

You need to define a fixed height to a horizontally scrollable widget. Please try wrapping your listview with a container or sized box with defined height.

 Container(
  height: MediaQuery.of(context).size.height*0.3,
  // height: 50,
      child: ListView.builder(
                 scrollDirection: Axis.horizontal,
                 shrinkWrap: true,
                 itemCount: 12,
                 itemBuilder: (context,index){
                   return Text("my widget card will add here");
                 }),
)

Upvotes: 2

Alun
Alun

Reputation: 149

you must wrap listview inside a container or sizedbox..

Container(
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    itemCount: 2,
    itemBuilder: (context,index){
       return Text("my widget card will add here");
   }),
),

if the list still no appear, try give height and width on container.

Upvotes: 3

Related Questions