firatcetiner/scrollable_list_tabview

A Flutter widget which syncronize ListView and a custom tab view.

scrollable_list_tabview's Issues

Format tab heading in Listview

Great package, I really like it. It would be even great if Label2 in the screenshot below could be customisable independent of the style of the tab list

For example https://i.ibb.co/BzM9rK4/issue.png

The scrolling of the tab is not smooth.

Even in the package example video, there is no smooth transition between the tabs of the tab view, the transitions are very shaky. The transition also breaks when we scroll the tab view and then tap on any tab.

Draggable list

Hello
I want to use ReorderableListView and this package.

is it possible?

CustomScrollView nested ScrollableListTabView does not display, even with SliverToBoxAdapter

CustomScrollView nested ScrollableListTabView does not display, even with SliverToBoxAdapter

Is it possible to use this widget inside of a CustomScrollView or NestedScrollView?

Hi Firat,

I have a NestedScrollView with the headerSliverBuilder field.
I want to add ScrollableListTabview under body field of the NestedScrollView.

Can you suggest a way to accomplish this?
Thanks.

Using Scrollable List TabView inside Nested ScrollView.

Hello There,
I am using this library inside a nestedListView. I am creating a FlexibleSpaceBar() to show image. Also I am using SliverOverlapAbsorber() and SliverOverlapInjector so that the body of my nested scroll view doesnt hide behind the appbar.
NestedScrollView() body takes a column (Container & ScrollableListTabview()). If i scroll the from container, the flexible appbar collapses but it doesnt collapse when i scroll from the ScrollableListTabview(). I hope you understand the scenario I ll attach the code and image of what i am trying to achieve.

`class ShopScreen extends StatefulWidget {
final Shop shop;

const ShopScreen({
Key key,
@required this.shop,
}) : assert(shop != null),
super(key: key);
@OverRide
_ShopScreenState createState() => _ShopScreenState();
}

class _ShopScreenState extends State {
var top = 0.0;
ScrollController _scrollController;
Color _theme;
Shop _shop;
String _selectedCategory;

@OverRide
void initState() {
super.initState();
_selectedCategory = _shop.categories[0].id;
_theme = Colors.white;
_scrollController = ScrollController()
..addListener(
() => !_isAppBarCollapsed()
? _theme != Colors.white
? setState(
() {
_theme = Colors.white;
print('setState is called');
},
)
: {}
: _theme != Colors.black
? setState(() {
print('setState is called');
_theme = Colors.black;
})
: {},
);
}

bool _isAppBarCollapsed() {
if (_scrollController.hasClients) if (_scrollController.offset >
(170 - kToolbarHeight)) return true;
return false;
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
key: PageStorageKey("NestedScrollView"),
controller: _scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
leading: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 3),
decoration: BoxDecoration(
color: scaffoldColor,
borderRadius: BorderRadius.circular(5),
),
child: GestureDetector(
onTap: () {
AppRouter.pop(context);
},
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
),
expandedHeight: 200,
floating: false,
pinned: true,
forceElevated: innerBoxIsScrolled,
actions: [
IconButton(
icon: Icon(Icons.favorite_border_rounded, color: _theme),
onPressed: () {},
)
],
flexibleSpace: FlexibleSpaceBar(
title: Text(
_shop.name,
style: TextStyle(fontSize: 12.0, color: theme),
),
background: Hero(
tag: "shop ${shop.id} image ",
child: Image.network(
imageURL + shop.image,
fit: BoxFit.cover,
color: primaryColor.withOpacity(0.5),
colorBlendMode: BlendMode.darken,
errorBuilder: (ctx, obj, trace) {
return Placeholder();
},
),
)),
),
),
];
},
body: Builder(builder: (ctx) {
return CustomScrollView(
key: PageStorageKey("CustomeScrollView"),
primary: false,
physics: NeverScrollableScrollPhysics(),
slivers: [
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(ctx),
),
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8, horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(shop.address1,
style: TextStyle(fontSize: 16)),
Pill(
text:
"${num.parse(shop.distance).toStringAsFixed(1)} km",
color: primaryColor,
)
],
),
vSpace(5),
Text("Open Now daily time 9:30 am to 11:00 pm"),
],
),
),
Divider(
height: 20,
thickness: 2,
color: lightGreyColor,
),
Container(
height: MediaQuery.of(context).size.height * 0.84,
child: ScrollableListTabView(
tabHeight: 48,
bodyAnimationDuration:
const Duration(milliseconds: 300),
tabAnimationCurve: Curves.easeOut,
tabAnimationDuration: const Duration(milliseconds: 200),
tabs: [
ScrollableListTab(
tab: ListTab(
label: Text('Vegetables'),
activeBackgroundColor: primaryColor),
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('Vegetables element $index'),
),
)),
ScrollableListTab(
tab: ListTab(label: Text('Fruits')),
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('Fruits element $index'),
),
)),
ScrollableListTab(
tab: ListTab(label: Text('Meat')),
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('Meat element $index'),
),
)),
ScrollableListTab(
tab: ListTab(label: Text('Herbs&Spices')),
body: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (, index) => Card(
child: Center(
child:
Text('Herbs&Spices element $index')),
),
)),
ScrollableListTab(
tab: ListTab(label: Text('Egg')),
body: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
physics: NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (, index) => Card(
child:
Center(child: Text('Egg element $index')),
),
)),
],
),
),
],
),
),
],
);
}),
),
);
}
}
`

and here is what i am trying to make

Can not use anymore because not support null safety

Please update null safety for this package.

Is it possible to change sticky header

Hello. I use this package.
Is it possible to change sticky header>

Non focus option

When I tap the tab, the tab will be set on the left.
Can I select the tab without focusing?

Error: No named parameter with the name 'materialTapTargetSize'.

When I use the plug-in, the following error occurs

Compiler message:
/Users/xjb/Desktop/DevelopmentToot/flutter_1.17.5/.pub-cache/hosted/pub.flutter-io.cn/scrollable_list_tabview-0.1.4/lib/scrollable_list_tabview.dart:105:25: Error: No named parameter with the name 'materialTapTargetSize'.
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
^^^^^^^^^^^^^^^^^^^^^
/Users/xjb/Desktop/DevelopmentToot/flutter_1.17.5/packages/flutter/lib/src/material/outline_button.dart:62:9: Context: Found this candidate, but the arguments don't match.
const OutlineButton({
^^^^^^^^^^^^^
Flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.12.6 16G29, locale
zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[!] Xcode - develop for iOS and macOS (Xcode 9.0)
✗ Flutter requires a minimum Xcode version of 11.0.0.
Download the latest version or update via the Mac App Store.
! CocoaPods 1.6.1 out of date (1.8.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade:
sudo gem install cocoapods
[✓] Android Studio (version 3.6)
[!] IntelliJ IDEA Ultimate Edition (version 2019.3.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.51.1)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

Is it possible to set the background color of the tab?

The background color of the tab header seems to be set to white - it is possible to define what color to use?
Sample image supplied.

Use inside column or custom scroll view

Hello!
this package seems to fit exactly on a screen i have to make. Unfortunately, in the screen there will also be some content before the list (an image and text below it), and thus i need to use a column. Also, the entire page needs to be scrollable in one go.However, this package only works when used as the body of a page.
Is there any way i can use ScrollableListTabView inside a column or custom scrollview? meaning not as the entire body of a screen?

Border Color??

Hi,

Tried changing the border color to but it just remains the same. Also is there a way to keep the border color when the list tab is active?

code snippet:

tab: ListTab( label: Text( 'Label 1', style: TextStyle(color: Colors.black), ), icon: Icon( Icons.group, color: Colors.black, ), showIconOnList: false, activeBackgroundColor: Colors.yellow[400]!, borderColor: Colors.transparent, ),

TabView Icon

I Want to add Icon only in tabview not in scrollable list if we set showIconOnList=false then Icon from horizontal tabview also disabled.

How do I implement with flutter_staggered_grid_view?

I have used flutter_staggered_grid_view to show the grid items with the section.
How can I implement with that?

Thank you so much!

choose widget for parameter tab

The library is fantastic! It would be awesome if you could choose the widget type for the 'tab' parameter, so that you could create custom buttons and styled according to each design.

#BrazilDevs