floating action button position in Flutter or how to change the position of the floating button - 2WAYS
We talked about how you can vary the position of the floating scaffold button in Flutter.
I want to show you how you can change the location of your floating action button in Flutter, in this case position it to the right, center or left, which is what you can see on the screen. In this case, I have it in the middle, for whatever reason, you can place it. I placed it as a user preference. So if I come here now, in the posts here, you can see that it is to the left, I mean to the right, and if we come back here, I place it to the left, which is what I would need to show you. I come here and there you can see it and you can alter the position a little bit with the padding and so on, but at least this is how it works for me correctly.
First way, with the FloatingActionButtonLocation
Here you can also see that it is not exactly a floating action button but it is a widget, that is to say, it is a floating action button which is this one plus a widget that I have up here, therefore the structure changes a bit, that is to say, we can no longer place a button directly on the floating action button if it is not a widget of this type with its column and the rest of the widgets, that is why you see the code here a little changed, there are two ways, you could say, one is using the system of columns and rows that we already know and the other is using a property that is from the scaffold which is the one I am going to show you next, I am going to look for this here. This is one way we have an attribute called flatting action Button location:
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,Second form, with columns
Right here you can download it if it loads of course it is precisely this one which defines the location the problem with this approach is that at least for me it does not work for small screens simply for large screens on small screens it is always located on the same side which would be the right side and here a bit the same you place the you can try any of these I am not going to go into much detail about the definition of each one but any of them will place it in the center to the right or to the left, that is to say here the m would be for the right and the top I think it was would be for the left then you can also try this solution as I told you it did not work for me because for small screens it is always a line to the right regardless of what I place it that I want to place it here at the beginning or in the center and also because it required using a widget like the one I am showing you on the screen, that is to say something a bit more specialized so I am showing you here a little bit of my solution.
Here we have the float action Button we put a padding and that is optional but so that it appears so stuck together here we put the column since I want one on top of the other then I use a column and I will show you what this is more or less the same as I was showing you just now I place it to the right, center or left and I always place it below so that it appears below because if I place it in the center it will go to the middle, which I don't want but anyway if you want to do something like that it would be to play with the main Access alignment for the rest here we place the child which again is my button would be this this is a configuration that I have that is not always present remember that this is my custom scaffold that I explained to you in another video so if I don't define it I define a SizeBox and the same thing for here:
enum FABPosition { left, right, center }
***
if (appModel.fabposition == FABPosition.center.toString()) {
_floatingActionButtonLocation = MainAxisAlignment.center;
_floatingActionButtonLocationCross = CrossAxisAlignment.center;
} else if (appModel.fabposition == FABPosition.left.toString()) {
_floatingActionButtonLocation = MainAxisAlignment.start;
_floatingActionButtonLocationCross = CrossAxisAlignment.start;
}
***
Scaffold(
floatingActionButton: Padding(
padding: const EdgeInsets.only(left: 30),
child: Column(
crossAxisAlignment: _floatingActionButtonLocationCross,
mainAxisAlignment: MainAxisAlignment.end,
// mainAxisAlignment: _floatingActionButtonLocation,
children: [
widget.showLastCourseWidget && appModel.showLastCourseWidget
? lastClassViewInCourse()
: const SizedBox(),
const SizedBox(height: 10),
fab ?? const SizedBox()
],
),
),
)In this case it is this widget that we have here that gives me a shortcut to the last course that I am viewing and a bit the same if I want to define it or not but in essence they are two widgets. So as for this value I initialize it in the following way based on the user configuration that this is a number type by the way something personalized and based on what I have registered I simply assign the corresponding value based on what we already know the Main Access alignment Center or the Cross Access Alignment either of the two we have the Center to center the elements the left so that it goes to the left and the Start so that it goes to the beginning and that is the only thing that I apply to the button in the custom scaffold as I just showed you here so in summary you can try the location one to see how it works for you that would be the scheme defined par excellence the scheme recommended by the people of flurer But if it gives you problems like me you can use the scheme of the columns that will be the traditional one and you define here the alignment using the Cross Access alignment
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter