floating action button position en Flutter o como cambiar la posición del botón flotante - 2FORMAS
Hablamos sobre como puedes variar la posición del botón flotante del scaffold en Flutter.
Te quiero mostrar cómo puedes cambiar la ubicación de tu floating action button en Flutter en este caso posicionarlo a la derecha en el centro o a la izquierda que es lo que puedes ver en pantalla en este caso lo tengo en el medio por cualquiera que sea la razón lo puedes colocar yo lo coloqué como una preferencia de usuario Entonces si vengo aquí ahora los post aquí puedes ver que está para la izquierda digo para la derecha y si volvemos para acá lo coloco a la izquierda que es la que faltaría mostrarte vengo acá y ahí lo puedes ver y puedes alterar un poquito la posición con el padding y demás pero al menos así me funciona correctamente
Primera forma, con el FloatingActionButtonLocation
a mí aquí también puedes ver que no es precisamente un floating action buttonn sino es un widget es decir es un floating action button que es este más un widget que tengo por acá arriba por lo tanto la estructura cambia un poco es decir ya no podemos colocar directamente en el floating action button un botón si no viene siendo un widget de este tipo con su columna y el resto de los widgets por eso es que ves aquí un poco el código cambiado hay dos formas se pudiera decir una es empleando el sistema de columnas y filas que nosotros ya conocemos y la otra es empleando una propiedad que es del scaffold que es la que te voy a mostrar a continuación voy a buscar aquí esto Esta es una forma tenemos un atributo llamado flatting action Button location:
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,Segunda forma, con columnas
Justamente este aquí lo puedes descargar si carga claro está justamente este el cual define la localización el problema con este enfoque es que al menos a mí no me funciona para pantallas pequeñas simplemente para pantallas grandes en pantallas pequeñas siempre queda ubicado en el mismo lado que sería el lado derecho y aquí un poco lo mismo colocas el puedes probar cualquiera de estos no voy a entrar mucho en la definición de cada uno pero cualquiera de ellos te va te lo va a colocar en el centro a la derecha o a la izquierda es decir aquí el m sería para la derecha y el top creo que era sería para la izquierda entonces puedes probar también esta solución como te digo a mí no me sirvió porque para pantallas pequeña siempre es línea hacia la derecha independientemente a que lo coloque que lo quiero colocar aquí al inicio o en el centro y también porque requería emplear un widget como que te estoy mostrando en pantalla es decir algo un poco más especializado entonces te muestro aquí un poquito mi solución.
Aquí tenemos el flot action Button le colocamos un padding ya eso es opcional pero para que aparezca tan pegado por aquí le colocamos la columna ya que lo quiero uno encima del otro entonces empleo una columna y ya te voy a mostrar que es esto más o menos lo mismo que te
mostraba ahorita lo coloco a la derecha centro o izquierda y este siempre lo coloco abajo para que aparezca abajo porque si lo coloca centro se va a ir para el medio cosa que no quiero pero bueno si quieres hacer algo así sería jugar con el de main Access alignment por lo demás aquí colocamos el child que otra vez es mi botón sería este esto es un una configuración que tengo que no siempre está presente recuerda que este es el mi custom scaffold que te lo explicaba en otro video entonces si no lo defino le defino un SizeBox y lo mismo para acá:
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()
],
),
),
)En este caso es este widget que tenemos aquí que me da un acceso directo al último curso que estoy visualizando y un poco lo mismo si lo quiero definir o no pero en esencia son dos widget Entonces en cuanto a este valor lo inicializo de la siguiente forma en base a la configuración de usuario que esto es un tipo númer lado por cierto algo personalizado y en base a lo que tenga registrado simplemente le asigno el valor correspondiente en base a lo que ya nosotros conocemos el Main Access alignment Center o el Cross Access Alignment cualquiera de los dos tenemos el Center para centrar los elementos el left para que vaya a la izquierda y el Start para que vaya al inicio y eso es lo único que yo aplico al botón en el custom scaffold tal cual te acabo de mostrar por acá así que en resumen puedes probar el de location qué tal te funciona que sería el esquema definido por excelencia el esquema recomendado por la gente de flurer Pero si te da problemas como a mí puedes utilizar el esquema de las columnas que sera el tradicional y defines aquí la alineación mediante el Cross Access alignment
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter