A Flutter widget which synchronize a ScrollView and a custom tab view

Overview

scrollable_list_tabview

Build Status Codemagic build status Coverage Status

A Flutter widget which synchronize a ScrollView and a custom tab view.

The main idea is to create a custom tab view synchronizing with inner ScrollView. The scroll activity will trigger custom tab view at the top to follow the index of the inner scroll view widget.

Demo

Installation

Add dependency for package on your pubspec.yaml:

dependencies:
    scrollable_list_tabview: 

Usage

To use this widget we must first define how our tabs will look like.

ListTab

Parameter Definition
Widget icon Trailing widget for a tab, typically an Icon.
Widget label Label to be shown in the tab, must be non-null.
BorderRadiusGeometry borderRadius BorderRadius value for a single tab.
Color activeBackgroundColor Color to be used when the tab is selected.
Color inactiveBackgroundColor Color to be used when the tab isn't selected.
bool showIconInList Decide whether show icon widget in the scrollable view.
Color borderColor Color of the border of tab when its not selected

Then we can use LisTab in ScrollableListTab.

ScrollableListTab

Parameter Definition
ListTab tab Data model used for rendering tab widgets.
ScrollView body An individual inner scrollable widget.

Then ScrollableListTabView will take a list of ScrollableListTab as an argument.

ScrollableListTabView

Parameter Definition
List tabs List of tabs to be built.
double height Height of the tab at the top of the view.
Duration tabAnimationDuration Duration of tab change animation.
Duration bodyAnimationDuration Duration of inner scroll view animation.
Curve tabAnimationCurve Animation curve used when animating tab change.
Curve bodyAnimationCurve Animation curve used when changing index of inner ScrollView(s).

Example

import 'package:flutter/material.dart';
import 'package:scrollable_list_tabview/scrollable_list_tabview.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter ScrollableListTabView Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: 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'),
                ),
              )),
        ],
      ),
    );
  }
}

Limitations & Considerations

There are some limitations on this package. For example we only support ScrollView to be the body. Also, we could have used builder pattern to build the widgets.

I would like to thank Google developers for creating awesome package called ScrollablePositionedList.

Contribution

Contributions are accepted via pull requests. For more information about how to contribute to this package, please check the contribution guide.

License

This project is licensed under the MIT license, additional knowledge about the license can be found here.

You might also like...

A widget to provides horizontal or vertical multiple split view for Flutter.

A widget to provides horizontal or vertical multiple split view for Flutter.

Multi split view A widget to provides horizontal or vertical multiple split view for Flutter. Horizontal or vertical Configurable weight or size for e

Dec 28, 2022

A widget with side-by-side source code view.

A widget with side-by-side source code view.

A widget with side-by-side source code view. Extracted from the flutter-catalog open-source app.

Aug 29, 2022

A custom Slider which accepts a list of ordered values.

A custom Slider which accepts a list of ordered values.

MultiSlider A custom Slider which accepts a list of ordered values. It's meant to be as simple as the original Slider! UI with it Usages Continuous sl

Dec 3, 2022

Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Dec 7, 2022

Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter widget to create a group of buttons fast 🚀 Included Radio and CheckBox buttons models with custom groping types 🤤 Show some ❤️ and star the

Dec 26, 2022

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Jul 4, 2022

Custom bottom sheet widget, that can resize by drag and then scroll.

Custom bottom sheet widget, that can resize by drag and then scroll.

Bottom Sheet This package is part of the SurfGear toolkit made by Surf. About Custom bottom sheet widget that can be resized in response to drag gestu

Dec 16, 2022

NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners.

NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners.

NumberPicker NumberPicker is a custom widget designed for choosing an integer or decimal number by scrolling spinners. Example: (See example for more)

Nov 4, 2022

"wi_custom_bar" - a custom bar widget that implements a thermometer gauge bar created by wannai team

About wi_custom_bar "wi_custom_bar" is a custom bar widget that implements a thermometer gauge bar created by wannai team. Installing: In your pubspec

Feb 23, 2022
Owner
Aswanath C K
Self Motivated Flutter Developer
Aswanath C K
Customizable Flutter widget which syncronize ScrollView with PageView as tabs

scrollable_list_tab_scroller Customizable Flutter widget which syncronize ScrollView with PageView as tabs. Create a custom page view as tabs which sy

Railson Ferreira de Souza 4 Dec 21, 2022
Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Hugo Delaunay 196 Dec 2, 2022
Flutter | Snap physics for your scrollview

Snap Scroll Physics When building scrollable views, sometimes you would prefer that the scroll stopped at a given offset, or that it avoids to stop in

Jaime Blasco 46 Nov 21, 2022
A Flutter library to add bubble tab indicator to TabBar

Bubble Tab Indicator A Flutter library to add bubble tab indicator to TabBar. Getting Started Add package from github by adding the following to your

Vipul Asri 184 Nov 23, 2022
A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator.

flutter_tab_indicator A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator. Showcases Installation Showcases Showcases

CrabMan 14 Jun 19, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
Displays a scrollable timeline with custom child widgets and custom icons.

Flutter Timeline Widget Displays a scrollable timeline with custom child widgets and custom icons. Installation In your pubspec.yaml file within your

Furkan Tektas 375 Nov 20, 2022
Custom-Position-Popup - Custom Position Popup For Flutter

Custom-Position-Popup before clone the GitHub repository please give a star on t

Blackshadow Software Ltd 11 Oct 17, 2022
PowerFileView - A powerful file view widget, support a variety of file types, such as Doc Eexcl PPT TXT PDF and so on, Android is implemented by Tencent X5, iOS is implemented by WKWebView.

PowerFileView - A powerful file view widget, support a variety of file types, such as Doc Eexcl PPT TXT PDF and so on, Android is implemented by Tencent X5, iOS is implemented by WKWebView.

Yao 8 Oct 22, 2022