tabbed_scaffold 0.0.2+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 71

tabbed_scaffold #

A Scaffold-like widget tailored for tab-bar navigation.

Installation #

See instructions on how to install.

Usage #

The Old Way #

When creating a Scaffold that uses a BottomNavigationBar, it's not uncommon to end up with code like this:

final List<AppBar> _appBars = [
  AppBar(
    title: const Text('Tab 1'),
    actions: [/* Actions */],
    // More properties
  ),
  AppBar(
    title: const Text('Tab 2'),
    actions: [/* Actions */],
    // More properties
  ),
  // more AppBars
];

final List<Widget> _bodies = [
  TabBody1(),
  TabBody2(),
  // more Widgets
];

final List<BottomNavigationBarItem> _bottomNavigationBarItems = [
  BottomNavigationBarItem(
    title: const Text('Tab 1'),
    icon: Icon(Icons.tab1),
  ),
  BottomNavigationBarItem(
    title: const Text('Tab 2'),
    icon: Icon(Icons.tab2),
  ),
  /* More */ // more BottomNavigationBarItems
];

int _currentIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: _appBars[_currentIndex],
    body: _bodies[_currentIndex],
    /* More */
    bottomNavigationBar: BottomNavigationBar(
      items: _bottomNavigationBarItems,
      currentIndex: _currentIndex,
      onTap: onTabPressed,
    )
    /* More */
  );
}

void onTabPressed(int index) {
  setState(() {
    _currentIndex = index;
  });
}

In this pattern, UI elements are grouped by type - i.e. app bars, bodies, bottom navigation bar items, etc. This can be hard to understand and read because what makes up a single "tab" is spread across multiple data structures. Additionally, there is a good amount of boilerplate code:

  • the bare minimum onTap necessary to switch between tabs,
  • the repetition of tab titles in both the AppBar and BottomNavigationBarItem,
  • the manual use of _currentIndex to switch UI components between tabs
  • manual class instantiations for widgets (AppBar, BottomNavBarItem,)

The New Way #

TabbedScaffold aims to reorganize your code so that UI components are grouped by their tab, not their type, and reduce the amount of code you need to write for a tab-bar navigation layout.

The above code can be re-written in the TabbedScaffold pattern as follows:

List<ScaffoldTab> _tabs = [
  ScaffoldTab(
    title: const Text('Queue'),
    body: TabBody1()
    bottomNavigationBarItemIcon: Icon(Icons.tab1),
  ),
  ScaffoldTab(
    title: const Text('Activity'),
    body: Container(color: Colors.green,),
    bottomNavigationBarItemIcon: Icon(Icons.tab2),
  ),
  // more ScaffoldTabs
];

@override
Widget build(BuildContext context) {
  return TabbedScaffold(
    tabs: _tabs,
  );
}

TabbedScaffold takes a list of ScaffoldTab instances. Additionally, it optionally takes any properties normally passed to a Scaffold constructor (these can be thought of property templates).

When determining how to build the Scaffold for a specific tab, TabbedScaffold first looks at the specific properties in the ScaffoldTab instance for that tab. For any properties not defined in the ScaffoldTab, it looks for any templates passed to the TabbedScaffold and applies the properties found there. If no template is passed for a specific category, TabbedScaffold uses a bare instance of that property as a template.

This allows you to specify properties that should be the same across all tabs (for example, AppBar.leading = null) without having to specify as such in each ScaffoldTab.

Here is an example of using AppBar and BottomNavigationBar templates with TabbedScaffold :

TabbedScaffold(
  tabs: _tabs,
  appBar: AppBar( // Applies this to every tab. Gets overridden by any
                  // properties set in _tabs[i]
    leading: null,
    automaticallyImplyLeading: false,
  ),
  bottomNavigationBar: BottomNavigationBar(
    onTap: (index) => { // Do something },
  ),
)

[0.0.1] - June 02, 2019

Initial implementation of TabbedScaffold.

[0.0.2+1]

  • Fix bug that prevented AppBar title from showing up

[0.0.2+2]

  • Update dependencies.

example/example.dart

import 'package:flutter/material.dart';

import 'package:tabbed_scaffold/tabbed_scaffold.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<ScaffoldTab> _tabs = [
    ScaffoldTab(
      title: const Text('Phone'),
      body: Container(
        color: Colors.amber,
      ),
      bottomNavigationBarItemIcon: Icon(Icons.phone),
    ),
    ScaffoldTab(
      title: const Text('Local Activity'),
      body: Container(
        color: Colors.green,
      ),
      bottomNavigationBarItemIcon: Icon(Icons.local_activity),
    ),
    ScaffoldTab(
      title: const Text('Dashboard'),
      body: Container(
        color: Colors.red,
      ),
      bottomNavigationBarItemIcon: Icon(Icons.dashboard),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return TabbedScaffold(
      tabs: _tabs,
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  tabbed_scaffold: ^0.0.2+2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:tabbed_scaffold/tabbed_scaffold.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
46
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
71
Learn more about scoring.

We analyzed this package on Nov 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/tabbed_scaffold.dart.

Run flutter format to format lib/tabbed_scaffold.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
copyable ^0.0.1+2 0.0.1+2
flutter 0.0.0
meta ^1.1.6 1.1.7 1.1.8
Transitive dependencies
analyzer 0.36.4 0.39.1
args 1.5.2
async 2.4.0
build 1.2.2
built_collection 4.2.2 4.3.0
built_value 7.0.0
charcode 1.1.2
code_builder 3.2.1
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.3
csslib 0.16.1
dart_style 1.2.9 1.3.3
fixnum 0.10.11
front_end 0.1.19 0.1.29
glob 1.2.0
html 0.14.0+3
js 0.6.1+1
kernel 0.3.19 0.3.29
logging 0.11.3+2
matcher 0.12.6
node_interop 1.0.3
node_io 1.0.1+2
package_config 1.1.0
path 1.6.4
pedantic 1.8.0+1
pub_semver 1.4.2
quiver 2.1.2+1
sky_engine 0.0.99
source_gen 0.9.4+4 0.9.4+6
source_span 1.5.5
stack_trace 1.9.3
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
watcher 0.9.7+12
yaml 2.2.0
Dev dependencies
flutter_test