How to convert my horizontal listview in vertical mode like in Disney+ app?

user_12893654 0
Viewed 47
:SliverToBoxAdapter(
        child: SizedBox(
          child: Column(
            children: [
              // ignore: prefer_const_constructors
              Padding(
                padding: const EdgeInsets.only(right: 210.0),
                // ignore: prefer_const_constructors
                child: Text(
                  "Great Personality",
                  // ignore: prefer_const_constructors
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  ),
                ),
              ),
              Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SizedBox(
                      height: 200,
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: InkWell(
                              child: Container(
                                width: 120,
                                color: Colors.amber,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              width: 120,
                              color: Colors.white,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              width: 120,
                              color: Colors.white,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              width: 120,
                              color: Colors.white,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              width: 120,
                              color: Colors.white,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              width: 120,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),

I want my UI to convert in vertical style whenever I tap on the arrow button like in Disney App Homepage from this: enter image description here to this: enter image description here

Which Widget I should Use so that Whenever Someone clicks on the right arrow button, it navigate to another page, and whatever Container in horizontal listview gets converted to vertical mode?

dart flutter
1 Answers

You might want a list view inside a list view

Here is an example code:

 Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
  margin: EdgeInsets.symmetric(vertical: 20.0),
  height: 200.0,
  child: new ListView(
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(width: 160.0, color: Colors.red,),
    Container(width: 160.0, color: Colors.orange,),
    Container(width: 160.0, color: Colors.pink,),
    Container(width: 160.0, color: Colors.yellow,),
  ],
)
);
Widget horizontalList2 = new Container(
    margin: EdgeInsets.symmetric(vertical: 20.0),
    height: 200.0,
    child: new ListView(
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(width: 160.0, color: Colors.blue,),
    Container(width: 160.0, color: Colors.green,),
    Container(width: 160.0, color: Colors.cyan,),
    Container(width: 160.0, color: Colors.black,),
  ],
)
);
return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(
    child: new Container(
      child: ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
          horizontalList1,
          horizontalList2,
        ],
      ),
    ),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

Here is the result:

Horizontal List view inside list view

user_178440270
Related