Flutter - Different floating action button in TabBar - flutter

Question

I'm trying to get a different floatting button in a TabBar in flutter. But I will try a lot of option, but I don't know how.
Sorry, I add more details:
I want to do a app with a TabBar, like this flutter example.
If you see this is a tabBarDemo application, I can change between tabs,
but I don't know how to change the floating button between tabs. Thanks
Like this gif: https://i.stack.imgur.com/bxtN4.gif
class TabBarDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
floatingActionButton: FloatingActionButton.extended
(onPressed: null,
icon: Icon(Icons.add, color: Colors.white,),
label: new Text('FLOATING TO CHANGE'),
),
floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat,
),
),
);
}
}

Answer 1

A Minimal Example of what you want:
class TabsDemo extends StatefulWidget {
#override
_TabsDemoState createState() => _TabsDemoState();
}
class _TabsDemoState extends State<TabsDemo>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this, initialIndex: 0);
_tabController.addListener(_handleTabIndex);
}
#override
void dispose() {
_tabController.removeListener(_handleTabIndex);
_tabController.dispose();
super.dispose();
}
void _handleTabIndex() {
setState(() {});
}
#override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Scaffold(
appBar: AppBar(
title: Text('Demo'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(
text: "Tab1",
),
Tab(
text: "Tab2",
),
],
),
), // floatingActionButton: _buildFloatingActionButton(context),
body: TabBarView(controller: _tabController, children: [
Center(
child: Container(
child: Text('Tab 1'),
),
),
Center(
child: Container(
child: Text('Tab 2'),
),
),
]),
floatingActionButton: _bottomButtons(),
),
);
}
Widget _bottomButtons() {
return _tabController.index == 0
? FloatingActionButton(
shape: StadiumBorder(),
onPressed: null,
backgroundColor: Colors.redAccent,
child: Icon(
Icons.message,
size: 20.0,
))
: FloatingActionButton(
shape: StadiumBorder(),
onPressed: null,
backgroundColor: Colors.redAccent,
child: Icon(
Icons.edit,
size: 20.0,
),
);
}
}

Answer 2

you can achieve this by TabController
Declaration: TabController _tabController;
Initialization: in initState()
_tabController = TabController(length: 2, vsync: this, initialIndex: 0);
_tabController.addListener(_handleTabChange);
and just pass setState((){}) in method _handleTabChange to reflect ontime like
_handleTabChange(){
setState((){});
}
Now Bind or Inject in both of widget TabBar and TabBarView in their controller property.
TabBarView(
controller: _tabController,
children: [
Widget(),
Widget()
],
),
TabBar(
controller: _tabController,
tabs:[
Tab(...),
Tab(...),
]
)
Now place your different FAB button to different Tabs by according to _tabController index
floatingActionButton: _tabController.index == 0
? FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: () {},
)
: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {},
),
Keep coding ;)

Answer 3

Check this
import 'package:flutter/material.dart';
class Lista extends StatefulWidget {
#override
_ListaState createState() => _ListaState();
}
class _ListaState extends State<Lista> {
int indexTab=0;
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Scaffold(
appBar: AppBar (
title: Text("Test"),
bottom: TabBar(
onTap: (index){
setState(() {
indexTab = index;
});
},
tabs: <Widget>[
Tab(icon: Icon(Icons.calendar_today)),
Tab(icon: Icon(Icons.whatshot)),
],
),
),
floatingActionButton: indexTab==0? FloatingActionButton (
onPressed: () {},
child: Icon(Icons.add),
):FloatingActionButton (
onPressed: () {},
child: Text('test'),
),
body: TabBarView(
children: <Widget>[
Text('1'),
Text('2'),
],
)
),
);
}
}

Answer 4

I found that the accepted answer was not providing a good enough solution for me. The problem is that animation feels laggy and untimely.
The main point of change is listening to Animation of TabController instead of TabController state.
There is my approach to create a more or less reusable solution:
class MultipleHidableFabs extends StatefulWidget {
#override
State<MultipleHidableFabs> createState() => _MultipleHidableFabsState();
}
class _MultipleHidableFabsState extends State<MultipleHidableFabs>
with SingleTickerProviderStateMixin {
// Index of initially opened tab
static const initialIndex = 0;
// Number of tabs
static const tabsCount = 3;
// List with current scales for each tab's fab
// Initialize with 1.0 for initial opened tab, 0.0 for others
final tabScales =
List.generate(tabsCount, (index) => index == initialIndex ? 1.0 : 0.0);
late TabController tabController;
#override
void initState() {
super.initState();
tabController = TabController(
length: tabsCount,
initialIndex: initialIndex,
vsync: this,
);
// Adding listener to animation gives us opportunity to track changes more
// frequently compared to listener of TabController itself
tabController.animation!.addListener(() {
setState(() {
// Current animation value. It ranges from 0 to (tabsCount - 1)
final animationValue = tabController.animation!.value;
// Simple rounding gives us understanding of what tab is showing
final currentTabIndex = animationValue.round();
// currentOffset equals 0 when tabs are not swiped
// currentOffset ranges from -0.5 to 0.5
final currentOffset = currentTabIndex - animationValue;
for (int i = 0; i < tabsCount; i++) {
if (i == currentTabIndex) {
// For current tab bringing currentOffset to range from 0.0 to 1.0
tabScales[i] = (0.5 - currentOffset.abs()) / 0.5;
} else {
// For other tabs setting scale to 0.0
tabScales[i] = 0.0;
}
}
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: tabController,
tabs: [
Tab(icon: Icon(Icons.one_k)),
Tab(icon: Icon(Icons.two_k)),
Tab(icon: Icon(Icons.three_k)),
],
),
),
body: SafeArea(
child: TabBarView(
controller: tabController,
children: [Icon(Icons.one_k), Icon(Icons.two_k), Icon(Icons.three_k)],
),
),
floatingActionButton: createScaledFab(),
);
}
Widget? createScaledFab() {
// Searching for index of a tab with not 0.0 scale
final indexOfCurrentFab = tabScales.indexWhere((fabScale) => fabScale != 0);
// If there are no fabs with non-zero opacity return nothing
if (indexOfCurrentFab == -1) {
return null;
}
// Creating fab for current index
final fab = createFab(indexOfCurrentFab);
// If no fab created return nothing
if (fab == null) {
return null;
}
final currentFabScale = tabScales[indexOfCurrentFab];
// Scale created fab with
// You can use different Widgets to create different effects of switching
// fabs. E.g. you can use Opacity widget or Transform.translate to create
// custom animation effects
return Transform.scale(scale: currentFabScale, child: fab);
}
// Create fab for provided index
// You can skip creating fab for any indexes you want
Widget? createFab(final int index) {
if (index == 0) {
return FloatingActionButton(
onPressed: () => print("On first fab clicked"),
child: Icon(Icons.one_k),
);
}
// Not created fab for 1 index deliberately
if (index == 2) {
return FloatingActionButton(
onPressed: () => print("On third fab clicked"),
child: Icon(Icons.three_k),
);
}
}
}
Advantages of this approach:
Synchronized animation between swiping and showing fabs
Tapping on tabs also animates in a right manner
Ability to easily skip creating fabs for selected indexes
See an example in action:

Answer 5

Based on this answer from Ilia Kurtov, here's a reusable component for tab-dependent FABs.
Implementation
import 'package:flutter/material.dart';
typedef FabBuilder = Widget? Function(int tabIndex);
typedef TransformBuilder = Widget Function(
BuildContext context, Widget child, double t);
The basic idea is to transform the animation from the tab controller to an index and distance (TabFocus class) using a custom subclass of Animatable.
/// Represent a tab index with a distance metric.
class TabFocus {
/// Distance to the tab
///
/// from 0.0 (on tab) to 1.0 (half way to next or previous tab)
final double distance;
/// Index of the tab that closest to the current `t`.
final int index;
const TabFocus._({required this.distance, required this.index});
/// Get the tab focus at a tab position
factory TabFocus.at(double t) {
final index = t.round();
final t0 = index.toDouble();
final distance = (t - t0).abs() * 2;
return TabFocus._(distance: distance, index: index);
}
}
/// Subclass of [Animatable] that transforms a `double t` tab position into a [TabFocus].
class TabFocusAnimatable extends Animatable<TabFocus> {
#override
TabFocus transform(double t) => TabFocus.at(t);
const TabFocusAnimatable();
}
When we create our widget, we turn this Animatable<TabFocus> into an Animation<TabFocus> by attaching it to the TabController.animation
/// A tab-dependent FAB based on <https://stackoverflow.com/a/71123870/4087068>
class TabbedFab extends StatefulWidget {
TabbedFab(
{Key? key,
required TabController tabController,
FabBuilder? builder,
Animatable<TabFocus> focusAnimatable = const TabFocusAnimatable(),
TransformBuilder? transformBuilder})
: this._(
key: key,
builder: builder,
tabController: tabController,
fabAnimation: focusAnimatable.animate(tabController.animation!));
const TabbedFab._(
{Key? key,
required this.tabController,
required this.fabAnimation,
this.transform = _defaultTransform,
this.builder})
: super(key: key);
final TransformBuilder transform;
final Animation<TabFocus> fabAnimation;
final TabController tabController;
final FabBuilder? builder;
#override
State<TabbedFab> createState() => _TabbedFabState();
}
We also define a default transformation, that just scales a widget (the FAB) based on a t from 0.0 to 1.0.
/// By default, scale the current floating action button, so that it is full
/// size when the tab is selected
Widget _defaultTransform(BuildContext context, Widget child, double t) {
return Transform.scale(scale: t, child: child);
}
In the widget state class, we listen to the fabAnimation and call setState only when the index changes.
class _TabbedFabState extends State<TabbedFab> {
int currentTab = 0;
_onTabAnimation() {
final animationIndex = widget.fabAnimation.value.index;
if (animationIndex != currentTab) {
setState(() {
currentTab = animationIndex;
});
}
}
#override
void dispose() {
widget.fabAnimation.removeListener(_onTabAnimation);
super.dispose();
}
#override
void initState() {
currentTab = widget.tabController.index;
widget.fabAnimation.addListener(_onTabAnimation);
super.initState();
}
/* build method, see below */
}
Finally, we use an AnimatedBuilder with our transform to scale the widget while the animation is running.
#override
Widget build(BuildContext context) {
// Creating fab for current index
final fab = widget.builder?.call(currentTab);
// If no fab created return nothing
if (fab == null) {
return const SizedBox.shrink();
}
return AnimatedBuilder(
animation: widget.fabAnimation,
builder: (context, child) {
// fall back to 0.0 if the animation rolled over, but we're still calling the old builder
final t = (currentTab == widget.fabAnimation.value.index)
? 1.0 - widget.fabAnimation.value.distance
: 0.0;
return widget.transform(context, child!, t);
},
child: fab,
);
}
Usage
To use it, add it to your Scaffold like so:
Widget? _createFab(index) {
return (index == 0)
? FloatingActionButton(
onPressed: () => print("Click!"),
child: const Icon(Icons.add),
)
: null;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
tabs: const <Tab>[
Tab(text: "Tab 1"),
Tab(text: "Tab 2")
],
)),
body: TabBarView(
controller: _tabController,
children: const <Widget>[
Center(child: Text("Tab 1")),
Center(child: Text("Tab 2")),
]),
floatingActionButton:
TabbedFab(tabController: _tabController, builder: _createFab));
}

Answer 6

you can use this code :
floatingActionButton: new Container(
height: 140.0,
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomRight,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: 60.0,
child: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
),
new Container(
height: 20.0,
), // a space
Container(
height: 60.0,
child: new FloatingActionButton(
onPressed: _decremenrCounter,
backgroundColor: Colors.red,
tooltip: 'Increment',
child: new Icon(Icons.remove),
),
),
],
),
)
],
),
)
screenshot :
here is all the code if you want it : main.dart
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decremenrCounter() {
setState(() {
_counter--;
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new Container(
height: 140.0,
child: new Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomRight,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: 60.0,
child: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
),
new Container(
height: 20.0,
), // a space
Container(
height: 60.0,
child: new FloatingActionButton(
onPressed: _decremenrCounter,
backgroundColor: Colors.red,
tooltip: 'Increment',
child: new Icon(Icons.remove),
),
),
],
),
)
],
),
) // This trailing comma makes auto-formatting nicer for build methods.
);
}
}