Vincent
Vincent

Reputation: 3314

Place a listview into a column

I want to place a listview(1000+ items) into a column, I tried Expanded, not worked. In the column, there is a swiper and a listview.

Is there any solution? Here is my code:

Widget build(BuildContext context) {
    return DefaultTabController(
      length: _list.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text("ListView in Column"),
          centerTitle: true,
          bottom: TabBar(
            isScrollable: false,
            tabs: _list.map((String ss) {
              return Tab(text: ss);
            }).toList(),
          ),
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 200,
              width: MediaQuery.of(context).size.width,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return _swiperImage[index];
                },
                itemCount: _swiperImage.length,
                autoplay: true,
                loop: true,
                pagination: SwiperPagination(),
                control: SwiperControl(),
                onTap: (index) =>
                    Fluttertoast.showToast(msg: 'Clicked ${index + 1}'),
              ),
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return ListItemExamStrategyWidget(_listExamStrategy[index]);
                },
                itemCount: _listExamStrategy.length,
              ),
            )
          ],
        ),
      ),
    );
  }

enter image description here

Upvotes: 0

Views: 50

Answers (2)

Aravindh Kumar
Aravindh Kumar

Reputation: 1243

It works in a column with swiper and expanded widget that holds listview with 1000 texts

Here is my working code

    final List<String> _list = <String>['tab-1', 'tab-2'];
  final List<String> _swiperImage = <String>[
    'http://via.placeholder.com/350x150',
    'http://via.placeholder.com/350x150'
  ];

  @override
  Widget build(BuildContext context) {
      return DefaultTabController(
        length: _list.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('ListView in Column'),
            centerTitle: true,
            bottom: TabBar(
              isScrollable: false,
              tabs: _list.map((String ss) {
                return Tab(text: ss);
              }).toList(),
            ),
          ),
          body: Column(
            children: <Widget>[
              Container(
                height: 200,
                width: MediaQuery.of(context).size.width,
                child: Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return new Image.network(
                        _swiperImage[index],
                        fit: BoxFit.fill,
                      );
                    },
                    itemCount: _swiperImage.length,
                    autoplay: true,
                    loop: true,
                    pagination: const SwiperPagination(),
                    control: const SwiperControl(),
                    onTap: (int index) {
                      print('----------$index');
                    }),
              ),
              new Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, int index) {
                    return new Container(
                      padding: const EdgeInsets.all(15.0),
                      child: new Text('index ${index.toString()}'),
                    );
                  },
                  itemCount: 100,
                ),
              )
            ],
          ),
        ),
      );
  }

Sample screen

Upvotes: 1

diegoveloper
diegoveloper

Reputation: 103561

A few changes:

  • Wrap your Column inside SingleChildScrollView.

    body: SingleChildScrollView(
      child: Column(
    
  • Remove Expanded widget parent from your ListView

  • Set the physics of your ListView to NeverScrollableScrollPhysics

    ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
    

Upvotes: 1

Related Questions