ContentSizeTabBarView
A Flutter package that combines the functionalities of autoscale_tabbarview
and expandable_page_view
to provide a ContentSizeTabBarView
widget. This widget allows you to create a tab bar view where each tab's height automatically adjusts to fit its content.
- It uses
autoscale_tabbarview
to ensure smooth tab switching animation with theTabController
andexpandable_page_view
to resize the tab bar view's content. - This package aims to address a specific use case where
autoscale_tabbarview
on release mode may not resize its content properly, especially when there is aGridView
or similar widget inside it and the AutoScaleTabBarView itself is inside SingleChildScrollView/CustomScrollView. - It has been created to provide a solution to this issue while leveraging the strengths of the aforementioned packages.
Problem in autoscale_tabbarview package
I have created the problem where autoscale_tabbarview fails, it is inside the example folder in this package repository. Just try to replace ContentSizeTabBarView with AutoScaleTabBarView in debug mode you will not see any problem but when you build apk and use that apk the problem will be visible. If you are not able to recreate the same problem create a issue and i'll help as much as i can.
- Below image shows how autoscale_tabbarview behave when it is inside a CustomScrollView and it contains gridview on release.apk.
Credits
- The
ContentSizeTabBarView
widget is inspired by and incorporates components from the following packages:- autoscale_tabbarview: For smooth tab switching animation and
TabController
integration. - expandable_page_view: For dynamically resizing tab bar content based on its contents.
- autoscale_tabbarview: For smooth tab switching animation and
All credits go to the authors and contributors of these packages for their valuable contributions to the Flutter community.
Installation
To use this package, follow these steps:
- Add the latest version of the package to your
pubspec.yaml
file and rundart pub get
:
dependencies:
content_size_tabbarview: ^0.0.2
- Import the package in your Dart code and use it in your Flutter app:
import 'package:content_size_tabbarview/content_size_tabbarview.dart';
Usage
- Most of the things in this package is similar to autoscale_tabbarview package
Here's an example of how to use the ContentSizeTabBarView widget in your Flutter application:
import 'package:flutter/material.dart';
import 'package:content_size_tabbarview/content_size_tabbarview.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ContentSizeTabBarView Example'),
),
body: DefaultTabController(
child: ContentSizeTabBarView(
children: [
Center(child: Text('Tab 1 Content')),
Center(child: Text('Tab 2 Content')),
],
),
),
),
);
}
}