skip to Main Content

I am trying to create the nested Listview using the two listview.builder but the problem is it causing unbounded height. I have tried all the possible solution like using CustomScrollview with sliver and using expanded widget but didn’t worked .

Using shrink Wrap will solve the problem but it is quite expensive as it will render all widget at once and also I don’t want to use the constraint height.

I might be wrong will using it so can anyone help me out.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Multiple List"),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (contex, index) {
          return const NestedWidget();
        },
      ),
    );
  }
}

class NestedWidget extends StatelessWidget {
  const NestedWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 30,
          width: double.infinity,
          color: Colors.blueAccent,
          child: const Text("Hello I am Testing"),
        ),
        ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text((index + 1).toString()),
            );
          },
        )
      ],
    );
  }
}

2

Answers


  1. You dont need to put nested ListView which is causing the layout issue. You can loop inside Column

    class NestedWidget extends StatelessWidget {
      const NestedWidget({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 30,
              width: double.infinity,
              color: Colors.blueAccent,
              child: const Text("Hello I am Testing"),
            ),
            for (int index = 0; index < 10; index++)
              ListTile(
                title: Text((index + 1).toString()),
              )
          ],
        );
      }
    }
    

    Also I will suggest using CustomScrollView for this case.

    Login or Signup to reply.
  2. Please add shrinkWrap: true in the Nested widget, below is your updated nested widget :

    class NestedWidget extends StatelessWidget {
      const NestedWidget({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 30,
              width: double.infinity,
              color: Colors.blueAccent,
              child: const Text("Hello I am Testing"),
            ),
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 100,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text((index + 1).toString()),
                );
              },
            )
          ],
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search