Flutter - Different floating action button in tabbar
0
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.
Can you help me, please?
A lot of thanks,
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 aplication, 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,
),
),
);
}
}
flutter asked Nov 20 '18 at 18:23
mreigmreig
173
add a comment |
0
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.
Can you help me, please?
A lot of thanks,
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 aplication, 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,
),
),
);
}
}
asked Nov 20 '18 at 18:23
mreigmreig
173
can you please post code, what you tried. I din't get like "different floating button"
– Rahul Mahadik
Nov 20 '18 at 18:27
floating button and tab bar are two different things
– user1462442
Nov 20 '18 at 18:37
Sorry guys, I have add more information. I have an example of tabBarDemo, but I need a different floatinActionButton at any tab. Thanks
– mreig
Nov 20 '18 at 19:26
This is covered by the fab-per-tab demo in the flutter gallery: github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
– Richard Heap
Nov 21 '18 at 2:04
add a comment |
0
0
0
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.
Can you help me, please?
A lot of thanks,
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 aplication, 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,
),
),
);
}
}
asked Nov 20 '18 at 18:23
mreigmreig
173
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.
Can you help me, please?
A lot of thanks,
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 aplication, 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,
),
),
);
}
}
asked Nov 20 '18 at 18:23
mreigmreig
173
asked Nov 20 '18 at 18:23
mreigmreig
173
edited Nov 20 '18 at 19:25
mreig
asked Nov 20 '18 at 18:23
mreigmreig
173
asked Nov 20 '18 at 18:23
mreigmreig
173
asked Nov 20 '18 at 18:23
mreigmreig
173
173
can you please post code, what you tried. I din't get like "different floating button"
– Rahul Mahadik
Nov 20 '18 at 18:27
floating button and tab bar are two different things
– user1462442
Nov 20 '18 at 18:37
Sorry guys, I have add more information. I have an example of tabBarDemo, but I need a different floatinActionButton at any tab. Thanks
– mreig
Nov 20 '18 at 19:26
This is covered by the fab-per-tab demo in the flutter gallery: github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
– Richard Heap
Nov 21 '18 at 2:04
add a comment |
can you please post code, what you tried. I din't get like "different floating button"
– Rahul Mahadik
Nov 20 '18 at 18:27
floating button and tab bar are two different things
– user1462442
Nov 20 '18 at 18:37
Sorry guys, I have add more information. I have an example of tabBarDemo, but I need a different floatinActionButton at any tab. Thanks
– mreig
Nov 20 '18 at 19:26
This is covered by the fab-per-tab demo in the flutter gallery: github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
– Richard Heap
Nov 21 '18 at 2:04
can you please post code, what you tried. I din't get like "different floating button"
– Rahul Mahadik
Nov 20 '18 at 18:27
can you please post code, what you tried. I din't get like "different floating button"
– Rahul Mahadik
Nov 20 '18 at 18:27
floating button and tab bar are two different things
– user1462442
Nov 20 '18 at 18:37
floating button and tab bar are two different things
– user1462442
Nov 20 '18 at 18:37
Sorry guys, I have add more information. I have an example of tabBarDemo, but I need a different floatinActionButton at any tab. Thanks
– mreig
Nov 20 '18 at 19:26
Sorry guys, I have add more information. I have an example of tabBarDemo, but I need a different floatinActionButton at any tab. Thanks
– mreig
Nov 20 '18 at 19:26
This is covered by the fab-per-tab demo in the flutter gallery: github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
– Richard Heap
Nov 21 '18 at 2:04
This is covered by the fab-per-tab demo in the flutter gallery: github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
– Richard Heap
Nov 21 '18 at 2:04
add a comment |
2 Answers
2
active
oldest
votes
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,
),
);
}
}
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
1
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
1
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
add a comment |
0
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.
);
}
}
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399223%2fflutter-different-floating-action-button-in-tabbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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,
),
);
}
}
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
1
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
1
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
add a comment |
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,
),
);
}
}
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
1
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
1
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
add a comment |
1
1
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,
),
);
}
}
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
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,
),
);
}
}
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
answered Nov 21 '18 at 6:08
anmol.majhailanmol.majhail
4,0032320
4,0032320
1
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
1
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
add a comment |
1
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
1
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
1
1
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Hi! Thanks this solved my problem!!! :D A litle question, I don't understand this sintax: return _tabController.index == 0 ? FloatingActionButton( I don't understand the "?", and the ":" (at second part"). Could you explain me, please? Thanks!
– mreig
Nov 21 '18 at 17:33
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
Dart has two operators that let you evaluate expressions that might otherwise require ifelse statements − condition ? expr1 : expr2 If condition is true, then the expression evaluates expr1 (and returns its value); otherwise, it evaluates and returns the value of expr2. expr1 ?? expr2 If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2
– anmol.majhail
Nov 21 '18 at 17:54
1
1
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
Oh perfect! thanks!! :D
– mreig
Nov 21 '18 at 18:08
add a comment |
0
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.
);
}
}
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
add a comment |
0
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.
);
}
}
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
add a comment |
0
0
0
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.
);
}
}
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
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.
);
}
}
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
answered Nov 20 '18 at 18:54
Yousuf AL-MawaliYousuf AL-Mawali
786
786
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
add a comment |
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
Thanks for your help, but I don't need this. I have add more information int the question. Thanks
– mreig
Nov 20 '18 at 19:26
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399223%2fflutter-different-floating-action-button-in-tabbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you please post code, what you tried. I din't get like "different floating button"
– Rahul Mahadik
Nov 20 '18 at 18:27
floating button and tab bar are two different things
– user1462442
Nov 20 '18 at 18:37
Sorry guys, I have add more information. I have an example of tabBarDemo, but I need a different floatinActionButton at any tab. Thanks
– mreig
Nov 20 '18 at 19:26
This is covered by the fab-per-tab demo in the flutter gallery: github.com/flutter/flutter/blob/master/examples/flutter_gallery/…
– Richard Heap
Nov 21 '18 at 2:04