[FLUTTER]Scroll changes tabs [closed] - user-interface

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this 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

Answer 1

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'),
),
)),
],
),
);