How to add vertical and horizontal list in single list

Question

I want to add vertical and horizontal list in single list but problem is when i want to put horizontal and vertical list in single list i have give height to container but for vertical list i want to scroll in full screen but it is not possible i have to put height to vertical list also please help me.

class mydynamic extends StatefulWidget {
@override
_mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {

 List<String> my_text = [
"Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda"
 ];

 @override
 void dispose() {
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: Text(
      "Videolist",
      style: TextStyle(color: Colors.white),
    ),
  ),
  body:ListView(

      children: <Widget>[

        _horizantal_list(),
        _vertical_list()
      ],

  ),
);
}



Widget _horizantal_list()
 {

  return Container(

    height:50.0,
    child: ListView.builder(
      
      itemCount: my_text.length,
      scrollDirection: Axis.horizontal,
      itemBuilder:(context,index){
        
          return Card(

            child: Text(my_text[index]),
          );
          

      }),
  );

}

 Widget _vertical_list()
  {

  return Container(
      height: 150,
    child:  ListView.builder(

        itemCount: my_text.length,
        itemBuilder: (context, index){

            return Card(
                
                child:Text(my_text[index]),
            );

        },

    ),
  );
      

}
}

please any solution for this Thank you

score 5 · Accepted Answer · answered Jun 29 '20 at 07:45

You can copy paste run full code below
Step 1: body use Column
Step 2: _vertical_list use Expanded

 Widget _vertical_list() {
    return Expanded(
      child: ListView.builder(

working demo

full code

import 'package:flutter/material.dart';

class mydynamic extends StatefulWidget {
  @override
  _mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {
  List<String> my_text = [
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
  ];

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Videolist",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Column(
        children: <Widget>[_horizantal_list(), _vertical_list()],
      ),
    );
  }

  Widget _horizantal_list() {
    return Container(
      height: 50.0,
      child: ListView.builder(
          itemCount: my_text.length,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            return Card(
              child: Text(my_text[index]),
            );
          }),
    );
  }

  Widget _vertical_list() {
    return Expanded(
      child: ListView.builder(
        itemCount: my_text.length,
        itemBuilder: (context, index) {
          return Card(
            child: Text(my_text[index]),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: mydynamic(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Thank you sir its working fine but i want to like this please watch this [video](https://drive.google.com/file/d/1qiCGEvbyYMuAtg8g2tacmxzgRusM-H9A/view?usp=sharing) — Prototype, Jun 29 '20 at 08:12
Sir i want to scroll both vertical and horizontal list also please code for this thank you — Prototype, Jun 29 '20 at 09:02
It's not a easy case. you can try solution here https://stackoverflow.com/a/56327933/2179571 — chunhunghan, Jun 29 '20 at 09:13
Sir i am using sliverlist for this but problem is that when i am putting my horizontal list inside `SliverChildListDelegate([Column(children:[verticallist(), horizontalist() ] ) ])` the vertical list working fine but horizontal list not working — Prototype, Jun 29 '20 at 09:27
ok i got that problem sir i used `shrinkWrap=true` to fix this and for scroll `physics: ClampingScrollPhysics(),` Thank you :) — Prototype, Jun 29 '20 at 09:42

score 0 · Answer 2 · answered Jun 29 '20 at 09:49

Here i updated my code

 class mydynamic extends StatefulWidget {
 @override
 _mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {

List<String> my_text = [
"Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",

  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",
  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",
  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",
  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",

];

@override
void dispose() {
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(
      "Videolist",
      style: TextStyle(color: Colors.white),
    ),
  ),
  body: CustomScrollView(

     slivers: <Widget>[

       SliverList(delegate:SliverChildListDelegate([

          Column(

            children: <Widget>[

               _vertical_list(),
               _horizontal_list(),
                _vertical_list(),
             
            ],
          )

       ]))

     ],

  ),
 
);
 }



Widget _vertical_list()
{
  return Column(

  children: <Widget>[

    ListView.builder(
      scrollDirection: Axis.vertical,
      physics: ClampingScrollPhysics(),
      shrinkWrap: true,
      itemCount: my_text.length,
      itemBuilder: (context,index){

          return Card(child:Text(my_text[index]));


    })
  ],

 );
}

Widget _horizontal_list()
{


  return Container(
  height:50.0,
  child: ListView.builder(
   shrinkWrap: true,
    scrollDirection: Axis.horizontal,
   itemCount: my_text.length,
   itemBuilder:(context,index){
    
    return Card(

      child: Center(child: Container(child: Text(my_text[index]))),
    );

 }),
);
}

}

How to add vertical and horizontal list in single list

2 Answers2