Mixing
Move up floating action button
1
I am adding animated icons in my floating action button at bottom navigation bar. But after adding 2 buttons my FAB moved down.
I am using following code
Widget _buildCenterTab(){
return new Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: blueColor,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
);
}
Here is screenshot of my problem:
dart
flutter asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
add a comment |
1
I am adding animated icons in my floating action button at bottom navigation bar. But after adding 2 buttons my FAB moved down.
I am using following code
Widget _buildCenterTab(){
return new Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: blueColor,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
);
}
Here is screenshot of my problem:
dart
flutter asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
can u wrap other two floating buttons inside TransformWidget and animate the position of buttons using Matrix4.translationValues to corresponding height relative to the main FabbarButton or share the full source code with in some gist
– Ajay Beniwal
Jan 2 at 9:40
I didn't understand what you mean.
– Code Hunter
Jan 2 at 10:00
Could you Please share gist of your code so a solution could be proposed
– Ajay Beniwal
Jan 2 at 10:02
add a comment |
1
1
1
I am adding animated icons in my floating action button at bottom navigation bar. But after adding 2 buttons my FAB moved down.
I am using following code
Widget _buildCenterTab(){
return new Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: blueColor,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
);
}
Here is screenshot of my problem:
dart
flutter asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
I am adding animated icons in my floating action button at bottom navigation bar. But after adding 2 buttons my FAB moved down.
I am using following code
Widget _buildCenterTab(){
return new Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: blueColor,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
);
}
Here is screenshot of my problem:
dart
flutter dart
flutter asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
asked Jan 2 at 7:56
Code HunterCode Hunter
1,45541731
1,45541731
can u wrap other two floating buttons inside TransformWidget and animate the position of buttons using Matrix4.translationValues to corresponding height relative to the main FabbarButton or share the full source code with in some gist
– Ajay Beniwal
Jan 2 at 9:40
I didn't understand what you mean.
– Code Hunter
Jan 2 at 10:00
Could you Please share gist of your code so a solution could be proposed
– Ajay Beniwal
Jan 2 at 10:02
add a comment |
can u wrap other two floating buttons inside TransformWidget and animate the position of buttons using Matrix4.translationValues to corresponding height relative to the main FabbarButton or share the full source code with in some gist
– Ajay Beniwal
Jan 2 at 9:40
I didn't understand what you mean.
– Code Hunter
Jan 2 at 10:00
Could you Please share gist of your code so a solution could be proposed
– Ajay Beniwal
Jan 2 at 10:02
can u wrap other two floating buttons inside TransformWidget and animate the position of buttons using Matrix4.translationValues to corresponding height relative to the main FabbarButton or share the full source code with in some gist
– Ajay Beniwal
Jan 2 at 9:40
can u wrap other two floating buttons inside TransformWidget and animate the position of buttons using Matrix4.translationValues to corresponding height relative to the main FabbarButton or share the full source code with in some gist
– Ajay Beniwal
Jan 2 at 9:40
I didn't understand what you mean.
– Code Hunter
Jan 2 at 10:00
I didn't understand what you mean.
– Code Hunter
Jan 2 at 10:00
Could you Please share gist of your code so a solution could be proposed
– Ajay Beniwal
Jan 2 at 10:02
Could you Please share gist of your code so a solution could be proposed
– Ajay Beniwal
Jan 2 at 10:02
add a comment |
2 Answers
2
active
oldest
votes
0
One way to get around this would be to create your own FloatingActionButtonLocation
class _CustomCenterDockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _CustomCenterDockedFloatingActionButtonLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
return Offset(fabX, getDockedY(scaffoldGeometry));
}
double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
double fabY = contentBottom - fabHeight / 2.0;
// The FAB should sit with a margin between it and the snack bar.
if (snackBarHeight > 0.0)
fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
// The FAB should sit with its center in front of the top of the bottom sheet.
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
return math.min(maxFabY, fabY);
}
}
This is using the same code as FloatingActionButtonLocation.centerDocked taken from the source and then you can use it in a Scaffold like so:
Scaffold(
body: Container(),
floatingActionButton: _buildCenterTab(),
floatingActionButtonLocation: _CustomCenterDockedFloatingActionButtonLocation(),
...
);
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
its not working for me.
– Code Hunter
Jan 2 at 10:41
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
add a comment |
0
check this code you can wrap your entire column with a container and using transform property to shift it up by 56/2 to center dock it.
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget{
@override
HomeScreenState createState() {
return new HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
List<IconData> icons = [(Icons.add),(Icons.clear),(Icons.forward)];
AnimationController _controller ;
@override
void initState() {
_controller = AnimationController(vsync: this,duration: Duration(seconds: 1));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.map),
title: Text("Hi")),
BottomNavigationBarItem(
icon:Icon(Icons.image),
title:Text("There"),
)
]
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 56.0,
height: 56.0*4,
transform: Matrix4.translationValues(0, -56/2, 0),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: Colors.blue,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
),
),
);
}
}
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
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%2f54002977%2fmove-up-floating-action-button%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
0
One way to get around this would be to create your own FloatingActionButtonLocation
class _CustomCenterDockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _CustomCenterDockedFloatingActionButtonLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
return Offset(fabX, getDockedY(scaffoldGeometry));
}
double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
double fabY = contentBottom - fabHeight / 2.0;
// The FAB should sit with a margin between it and the snack bar.
if (snackBarHeight > 0.0)
fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
// The FAB should sit with its center in front of the top of the bottom sheet.
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
return math.min(maxFabY, fabY);
}
}
This is using the same code as FloatingActionButtonLocation.centerDocked taken from the source and then you can use it in a Scaffold like so:
Scaffold(
body: Container(),
floatingActionButton: _buildCenterTab(),
floatingActionButtonLocation: _CustomCenterDockedFloatingActionButtonLocation(),
...
);
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
its not working for me.
– Code Hunter
Jan 2 at 10:41
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
add a comment |
0
One way to get around this would be to create your own FloatingActionButtonLocation
class _CustomCenterDockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _CustomCenterDockedFloatingActionButtonLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
return Offset(fabX, getDockedY(scaffoldGeometry));
}
double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
double fabY = contentBottom - fabHeight / 2.0;
// The FAB should sit with a margin between it and the snack bar.
if (snackBarHeight > 0.0)
fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
// The FAB should sit with its center in front of the top of the bottom sheet.
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
return math.min(maxFabY, fabY);
}
}
This is using the same code as FloatingActionButtonLocation.centerDocked taken from the source and then you can use it in a Scaffold like so:
Scaffold(
body: Container(),
floatingActionButton: _buildCenterTab(),
floatingActionButtonLocation: _CustomCenterDockedFloatingActionButtonLocation(),
...
);
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
its not working for me.
– Code Hunter
Jan 2 at 10:41
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
add a comment |
0
0
0
One way to get around this would be to create your own FloatingActionButtonLocation
class _CustomCenterDockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _CustomCenterDockedFloatingActionButtonLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
return Offset(fabX, getDockedY(scaffoldGeometry));
}
double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
double fabY = contentBottom - fabHeight / 2.0;
// The FAB should sit with a margin between it and the snack bar.
if (snackBarHeight > 0.0)
fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
// The FAB should sit with its center in front of the top of the bottom sheet.
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
return math.min(maxFabY, fabY);
}
}
This is using the same code as FloatingActionButtonLocation.centerDocked taken from the source and then you can use it in a Scaffold like so:
Scaffold(
body: Container(),
floatingActionButton: _buildCenterTab(),
floatingActionButtonLocation: _CustomCenterDockedFloatingActionButtonLocation(),
...
);
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
One way to get around this would be to create your own FloatingActionButtonLocation
class _CustomCenterDockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
const _CustomCenterDockedFloatingActionButtonLocation();
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
return Offset(fabX, getDockedY(scaffoldGeometry));
}
double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
final double contentBottom = scaffoldGeometry.contentBottom;
final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
final double snackBarHeight = scaffoldGeometry.snackBarSize.height;
double fabY = contentBottom - fabHeight / 2.0;
// The FAB should sit with a margin between it and the snack bar.
if (snackBarHeight > 0.0)
fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
// The FAB should sit with its center in front of the top of the bottom sheet.
if (bottomSheetHeight > 0.0)
fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);
final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
return math.min(maxFabY, fabY);
}
}
This is using the same code as FloatingActionButtonLocation.centerDocked taken from the source and then you can use it in a Scaffold like so:
Scaffold(
body: Container(),
floatingActionButton: _buildCenterTab(),
floatingActionButtonLocation: _CustomCenterDockedFloatingActionButtonLocation(),
...
);
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
answered Jan 2 at 10:10
Jordan DaviesJordan Davies
1,324520
1,324520
its not working for me.
– Code Hunter
Jan 2 at 10:41
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
add a comment |
its not working for me.
– Code Hunter
Jan 2 at 10:41
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
its not working for me.
– Code Hunter
Jan 2 at 10:41
its not working for me.
– Code Hunter
Jan 2 at 10:41
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
I've copied this straight from the Flutter source code so it will work exactly the same as the current FloatingActionButtonLocation.centerDocked code, you'll need to have a play around with the code yourself to make it fit your needs.
– Jordan Davies
Jan 2 at 11:01
add a comment |
0
check this code you can wrap your entire column with a container and using transform property to shift it up by 56/2 to center dock it.
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget{
@override
HomeScreenState createState() {
return new HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
List<IconData> icons = [(Icons.add),(Icons.clear),(Icons.forward)];
AnimationController _controller ;
@override
void initState() {
_controller = AnimationController(vsync: this,duration: Duration(seconds: 1));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.map),
title: Text("Hi")),
BottomNavigationBarItem(
icon:Icon(Icons.image),
title:Text("There"),
)
]
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 56.0,
height: 56.0*4,
transform: Matrix4.translationValues(0, -56/2, 0),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: Colors.blue,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
),
),
);
}
}
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
add a comment |
0
check this code you can wrap your entire column with a container and using transform property to shift it up by 56/2 to center dock it.
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget{
@override
HomeScreenState createState() {
return new HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
List<IconData> icons = [(Icons.add),(Icons.clear),(Icons.forward)];
AnimationController _controller ;
@override
void initState() {
_controller = AnimationController(vsync: this,duration: Duration(seconds: 1));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.map),
title: Text("Hi")),
BottomNavigationBarItem(
icon:Icon(Icons.image),
title:Text("There"),
)
]
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 56.0,
height: 56.0*4,
transform: Matrix4.translationValues(0, -56/2, 0),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: Colors.blue,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
),
),
);
}
}
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
add a comment |
0
0
0
check this code you can wrap your entire column with a container and using transform property to shift it up by 56/2 to center dock it.
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget{
@override
HomeScreenState createState() {
return new HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
List<IconData> icons = [(Icons.add),(Icons.clear),(Icons.forward)];
AnimationController _controller ;
@override
void initState() {
_controller = AnimationController(vsync: this,duration: Duration(seconds: 1));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.map),
title: Text("Hi")),
BottomNavigationBarItem(
icon:Icon(Icons.image),
title:Text("There"),
)
]
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 56.0,
height: 56.0*4,
transform: Matrix4.translationValues(0, -56/2, 0),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: Colors.blue,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
),
),
);
}
}
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
check this code you can wrap your entire column with a container and using transform property to shift it up by 56/2 to center dock it.
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget{
@override
HomeScreenState createState() {
return new HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
List<IconData> icons = [(Icons.add),(Icons.clear),(Icons.forward)];
AnimationController _controller ;
@override
void initState() {
_controller = AnimationController(vsync: this,duration: Duration(seconds: 1));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.map),
title: Text("Hi")),
BottomNavigationBarItem(
icon:Icon(Icons.image),
title:Text("There"),
)
]
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 56.0,
height: 56.0*4,
transform: Matrix4.translationValues(0, -56/2, 0),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 56.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index / icons.length / 2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
heroTag: null,
backgroundColor: Colors.blue,
mini: true,
child: new Icon(icons[index], color: Colors.white),
onPressed: () {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
heroTag: null,
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.pi),
alignment: FractionalOffset.center,
child: new Icon(
_controller.isDismissed
? Icons.add
: Icons.close),
);
},
),
onPressed: () {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
),
),
);
}
}
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
answered Jan 2 at 11:43
Saed NabilSaed Nabil
1,293310
1,293310
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
add a comment |
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
This also not helping me. It does only notch design change.
– Code Hunter
Jan 2 at 12:03
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
if you want to implement this behavior you can check this question stackoverflow.com/questions/51894449/… you can check this repository to get an idea how it is implemented github.com/tiagojencmartins/unicornspeeddial
– Saed Nabil
Jan 2 at 16:07
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%2f54002977%2fmove-up-floating-action-button%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 u wrap other two floating buttons inside TransformWidget and animate the position of buttons using Matrix4.translationValues to corresponding height relative to the main FabbarButton or share the full source code with in some gist
– Ajay Beniwal
Jan 2 at 9:40
I didn't understand what you mean.
– Code Hunter
Jan 2 at 10:00
Could you Please share gist of your code so a solution could be proposed
– Ajay Beniwal
Jan 2 at 10:02