0

I am attempting to put a ListView.builder widgets in a Column widget however the common solution provided by the flutter team is to place the unbounded ListView.builder in a Expanded or Flexible widget. The problem with this is the ListView.builder now fills as much space as it can in the column (as seen bellow).

Is there a way to have the ListView.builder only take up the space it requires?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Text> lst = [Text('first'), Text('second')];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ListView',
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: <Widget>[
              Flexible(
                child: ListView.builder(
                  itemCount: lst.length,
                  itemBuilder: (context, index) {
                    return Center(
                      child: lst[index],
                    );
                  },
                ),
              ),
              FlatButton(
                color: Colors.blue,
                child: Text("Add Third"),
                onPressed: () {
                  setState(() {
                    lst.add(Text("Third"));
                  });
                },
              ),
              Text("Next Item"),
            ],
          ),
        ),
      ),
    );
  }
}

enter image description here

Callum
  • 154
  • 1
  • 6

1 Answers1

0

You can use shrinkWrap: true property of listview to limit the list view size.

 child: ListView.builder(
                  shrinkWrap: true, //added line
                  itemCount: lst.length,
Viren V Varasadiya
  • 25,492
  • 9
  • 45
  • 61