Issue
I am working with a flutter project in which I need to fire two different code with the same floating action button:
here is my tab view:
appBar: AppBar(
bottom: TabBar(indicator: BoxDecoration(
color: Colors.black12, borderRadius: BorderRadius.circular(0),
),
tabs: [
Tab(text: 'Drivers'),
Tab(text:'Cars')
],
labelColor: Colors.pink,
),
and my tab bar view:
body: TabBarView(
children:[
SingleChildScrollView(...),
Center(child: Text('add car screen'))
]
),
and a floating button:
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
and here is the image
What I want is whenever Driver tab is selected, and then I press the floating action button it must print "driver tab selected" and whenever I switch tab to car tab, and then I press the button it prints "car tab is selected".
Solution
wrap your Scaffold inside of a Builder and you can then retrieve the tab index with DefaultTabController.of(context).index
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Builder(builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tabs Demo'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.contacts), text: "Drivers"),
Tab(icon: Icon(Icons.camera_alt), text: "Cars")
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if(DefaultTabController.of(context)!.index==1)
{
print("drivers");
}
else
print("cars");
print(
'Current Index: ${DefaultTabController.of(context)!.index}');
},),
body: TabBarView(
children: [
Center(child:Text("Driver")) ,
Center(child:Text("Cars")) ,
],
),
);
}
),
)
);
}
}
Or you can also use onTap method in TabBar
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
int currentScreen=0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Tabs Demo'),
bottom: TabBar(
onTap:(index){
currentScreen=index;
},
tabs: [
Tab(icon: Icon(Icons.contacts), text: "Drivers"),
Tab(icon: Icon(Icons.camera_alt), text: "Cars")
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if(currentScreen==0)
{
print("drivers");
}
else
print("cars");
},),
body: TabBarView(
children: [
Center(child:Text("Driver")) ,
Center(child:Text("Cars")) ,
],
),
)
) );
}
}
Answered By – saurabh
Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)