[FLUTTER]Scroll changes tabs

Question

I want to build this UI where the tabs changes on certain scroll-point.Please tell how should I approach,is there any package already available?

UI LINK:

https://www.youtube.com/watch?v=LrOR5QOCHBI

Solution

Check this you will get an idea what to do https://dartpad.dev/a1d76ac8c733a492995538730d0fc2df

Basically i have created a row which can track current tab. Now the list view has element of fixed size. Now on scroll we calculate which tab should be highlited.

    import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({ Key key }) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int currTab=0;
  ScrollController _scrollController;
  
  @override
void initState() {
  super.initState();
  _scrollController = ScrollController()
    ..addListener(() {
      //print("offset = ${_scrollController.offset}");
       currTab=(_scrollController.offset)~/(100*30);
      print(currTab);
      setState(() {
        
      });
       
  });
}
  

  @override
void dispose() {
  _scrollController.dispose(); // it is a good practice to dispose the controller
  super.dispose();
}
  
  
  @override
  Widget build(BuildContext context) {
    return 
      
      Column(
    
    children: <Widget>[
      Row(
              children: <Widget>[
                for(int i=0;i<5;i++)
                  Container(
                    decoration: new BoxDecoration(
              color:  i==currTab?Colors.red:Colors.blue,
              borderRadius: new BorderRadius.all(Radius.circular(10.0)
              )),
                    width: 100, child: Text("Tab "+i.toString(),style: TextStyle(color: Colors.white),textAlign: TextAlign.center,))
              ],
              
              ),
      Expanded(
        child: ListView(
    controller: _scrollController, 
    children: <Widget>[
      for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 0 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 1 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 2 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 3 -"+ i.toString())),
            for(int i=0;i<100;i++)
              Container(height: 30, child: Text("Conten at 4 -"+ i.toString())),
    ],
  )
      ),
       
    ],)
       ;
  }
}

OR JUST USE THE LIB: scrollable_list_tabview

https://pub.dev/packages/scrollable_list_tabview

ScrollableListTabView(
    tabHeight: 48,
    tabs: [
      ScrollableListTab(
          tab: ListTab(label: Text('Label 1'), icon: Icon(Icons.group)),
          body: ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: 10,
            itemBuilder: (_, index) => ListTile(
              leading: Container(
                height: 40,
                width: 40,
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.grey),
                alignment: Alignment.center,
                child: Text(index.toString()),
              ),
              title: Text('List element $index'),
            ),
          )),
    ],
  ),
);

Comments

[Rohan Patil]

This will do.Thank You!

[Vinoth Vino]

How can I do this if I have a dynamic view? I want to change the tab for each section?

[BIS Tech]

when we click tab, need to scroll certain point right?

[Dev]

yes, added that use-case too in above dartpad. Check link

[Phan Sinh]

Did you solve with a dynamic view @Dev?

[Mahmoud Eidarous]

Thank you! But how do I make it dynamic when each section will have a different number other than 100?