CODEWITHSUNDEEP
flutterdart
Bill Tertis
Bill Tertis

Reputation: 207

How to put a Listview under the existing one Listview. Flutter/Dart

hello there i want to add another one listview on the same screen, how can i do that?

hello there i want to add another one listview on the same screen, how can i do that?

enter image description here

here is my code:

return Scaffold(
        appBar: AppBar(title: Text('detailsPage'),
        ),
        body: ListView(
          children: [
            Card(
                child: ListTile(
                  title:new Center(child:new Text(utf8.decode(appController.userName.runes.toList()) + " " + utf8.decode(appController.userSurname.runes.toList()))),
                  subtitle:new Center(child:new Text('UserID: '+appController.userid.toString())),
                )
            ),
            Card(
              child: ListTile(
                title:new Center(child:new  Text(months[index])),
                subtitle:new Center(child:new Text("This month you have done "+appController.Totaleachlength[index].toString()+' charges')),
              ),
            ),
            Card(
                child: ListTile(
                  title:new Center(child:new  Text(appController.Totaleachlist[index].toStringAsFixed(3)+"€")),
                  subtitle:new Center(child:new Text("Total amount")),

                )
            ),
            ElevatedButton(child: Text('Download Bill pdf'),
                onPressed: ()  => ''),
            ListTile(
              title: new Center(child: new Text('Details of your charges'),),
            ),
          ],
          shrinkWrap: true,
        ),
      );

Upvotes: 0

Views: 75

Answers (3)

Mohamed Gawdat
Mohamed Gawdat

Reputation: 121

  • You have to use shrinkWrap in your child ListView to extend the size in the screen

  • dont forget to add ClampingScrollPhysics to scroll from parent pehavior

    class NestedListView extends StatelessWidget { const NestedListView({Key? key}) : super(key: key);

    @override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(
      children: [
        ...List.generate(
            20, (index) => Text('Parent List View Index $index')),
        ListView(
          ///  * [ClampingScrollPhysics], which provides the clamping overscroll behavior
          physics: const ClampingScrollPhysics(),

          ///  * [shrinkWrap], which provides the Max size of list in screen
          shrinkWrap: true,
          children: List.generate(
              20, (index) => Text('List View ONE Index $index')),
        ),
        ListView(
          physics: const ClampingScrollPhysics(),
          shrinkWrap: true,
          children: List.generate(
              20, (index) => Text('List View Two Index $index')),
        ),
      ],
    ),
  );
}

    }

Exapmle

Upvotes: 0

pmatatias
pmatatias

Reputation: 4404

if you want to divide your screen, you can use Column

return Scaffold(
  appBar: AppBar(title: Text('detailsPage'),),
  body : Column(
  children: [
   Expanded(flex: 2 // you can customize as you need
     child: ListView()
   ),
   Expanded(flex: 3 // you can customize as you need
     child: ListView()
   ),
])

Upvotes: 1

mohammad esmaili
mohammad esmaili

Reputation: 1737

Column:(
    children: [
        ListView1(),
        ListView2(),
    ]
),

If each list didnt scroll, wrap your each one with SingleChildScrollView and if you like to listviews expand all height you can use Expanded

You can also add your another ListView at last child like

ListView:(
   children: [
      Card()
      ListView()
   ]
)

Upvotes: 1

Related Questions