0

I want to build a UI on the homescreen where there is a Carousel element and then TabBar below it. I use Listview to hold it, but why is it when it scroll it's not as usual? Scroll it apart between the list on the TabBar element and the whole element on the homescreen.

see this GIF

my code in body:

 @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<MainModel>(builder: (context, child, model) {
      return ListView(
        shrinkWrap: true,
        children: <Widget>[
          Padding(
              padding: EdgeInsets.symmetric(vertical: 10.0), child: instance),
          TabBar(
            isScrollable: false,
            unselectedLabelColor: Color(0xffD8D8DC),
            labelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: BubbleTabIndicator(
              indicatorHeight: 25.0,
              indicatorColor: Colors.black,
              tabBarIndicatorSize: TabBarIndicatorSize.tab,
            ),
            tabs: <Widget>[
              Tab(text: "Categories"),
              Tab(text: "Popular"),
              Tab(text: "What's New"),
            ],
            controller: _carouselController,
          ),
          Container(
            height: 320.0,
            child: TabBarView(
              controller: _carouselController,
              children: <Widget>[
                model.isLoading ? LoadingProgress() : CategoriesTab(),
                PopularTab(),
                WhatsNewTab(),
              ],
            ),
          ),
        ],
      );
    });
  }
}

final List<String> imgList = [
  'https://image01.kota.com/20140403023925/0000/0000/0046/9681/13sep18bliblimcd.jpg',
  'http://pallibazar.com/pub/media/wysiwyg/images/sliders/top-slider-banner-grocery-2.jpg',
  'https://www.familydollar.com/content/dam/familydollar/1.14/FD84881_PTH_WeeklySlider_1.15.png',
  'http://www.beshoffbros.com/wp-content/uploads/2017/01/Beshoff_Hake_Slider.jpg',
];

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }

  return result;
}

//Carousel
final CarouselSlider instance = CarouselSlider(
  items: imgList.map((url) {
    return Container(
        margin: EdgeInsets.all(5.0),
        decoration: new BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: new BorderRadius.circular(10.0),
            boxShadow: <BoxShadow>[
              new BoxShadow(
                  color: Colors.black38,
                  blurRadius: 2.0,
                  spreadRadius: 1.0,
                  offset: new Offset(0.0, 1.0)),
            ]),
        child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
            child: CachedNetworkImage(
                imageUrl: url,
                fit: BoxFit.cover,
                fadeInCurve: Curves.fastOutSlowIn,
                width: 700.0,
                placeholder: Center(
                  child: SpinKitFadingCube(
                    color: Colors.orangeAccent,
                    size: 30,
                  ),
                ))));
  }).toList(),
  viewportFraction: 0.9,
  aspectRatio: 2.0,
  autoPlay: true,
);

any answer will appretiated.

1 Answer 1

1

wrap your carousel inside a Container:

 Container(
 height: MediaQuery.of(context).size.height/3 ;
 child : instance
 ),

do the same for your tab bar :

 Container(
 height: MediaQuery.of(context).size.height/3 ;
 child : //Your TabBar here
 ),

after that insert them both on your parent ListView and done.This will also make the scrolling on each part of the screen independent of the other on their respective parts, but the can both be moved using parent list.

1
  • its great, but i haven't got the right position yet. how to only listview parent that can be scrolling? then the list element in the tabBar follows Feb 13, 2019 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.