Flexible es un widget incorporado en flutter que controla cómo un elemento secundario de los widgets flexibles base que son Fila, Columna y Flex llenará el espacio disponible para él. El widget Expandido en flutter es una abreviatura de Flexible con el ajuste predeterminado de FlexFit.tight . El widget flexible juega un papel muy importante en la creación de una aplicación receptiva que se ve y se siente igual en varios tamaños de dispositivos. Pero si uno solo quiere llenar espacios básicos con widgets, Expanded también es un buen candidato para eso.
Constructor de Clase Flexible:
const Flexible(
{Key key,
int flex: 1,
FlexFit fit: FlexFit.loose,
@required Widget child}
)
Propiedades del widget flexible:
- debugTypicalAncestorWidgetClass: esta propiedad toma Type como parámetro para configurar ParentData para los mensajes de error.
- fit: Esta propiedad toma el valor de FlexFit como parámetro. Decide cómo un widget secundario flexible llenará el espacio disponible para él. Un widget infantil puede optar por tomar el área máxima con FlexFit . valor ajustado o puede elegir un área mínima con FlexFit . valor suelto . O se le pueden asignar valores FlexFit.
- flex: Esta propiedad toma un número entero como parámetro. Decide el tamaño del widget secundario a lo largo del eje principal (para Fila es horizontal y vertical para Columna ) con respecto a otros widgets secundarios.
Ejemplo 1: aplicación que no responde
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
tooltip: 'Menu',
) //IconButton
), //AppBar
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 175,
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
), //BoxDecoration
), //Container
SizedBox(
width: 20,
), //SizedBox
Container(
width: 175,
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
) //BoxDecoration
) //Container
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.center,
), //Row
Container(
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue), //BoxDecoration
), //Container
Row(
children: <Widget>[
Container(
width: 180,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.cyan,
), //BoxDecoration
), //Container
SizedBox(
width: 20,
), //SizedBox
Container(
width: 180,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.cyan,
) //BoxedDecoration
) //Container
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.center,
), //Row
], //<widget>[]
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
), //Column
) //Padding
), //Container
) //Center
), //Scaffold
debugShowCheckedModeBanner: false,
)); //MaterialApp
}
Producción:
Explicación: Echando un vistazo al código, podemos ver que en la parte superior de la pantalla tenemos una barra de aplicación básica construida con el widget AppBar que contiene un IconButton de menú principal dentro. El color de fondo de la barra de la aplicación es greenAccent[400] y el ícono tiene una información sobre herramientas que dice ‘menú’. En el cuerpo de la aplicación, el widget principal es Centro seguido de Contenedor y Relleno. Después de eso, tenemos un widget de columna que toma una lista de widgets como elementos secundarios. En esa lista, el primer widget es una Fila que tiene dos Contenedores y un SizedBox dentro. A los Contenedores se les da una altura yancho de 175 cada uno y con la ayuda de la propiedad de decoración, el color se establece en rojo y el radio del borde en 10. El siguiente es un contenedor fuera de la fila con un ancho de 380 y una altura de 200. El color se establece en azul y el radio del borde a 10. A esto le sigue otra Fila que contiene dos Contenedores dentro, cada uno de color cian, una altura de 300 y un ancho de 180. Entre los contenedores, hay un widget SizedBox que tiene un ancho de 20. En ambas filas, la alineación del eje principal se establece en el centro y en la columna, la alineación del eje principal se establece en el espacio entrela alineación del eje transversal se establece en el centro.
Podemos ver en esta aplicación que hay cinco contenedores que no cambian de tamaño según el tamaño de la pantalla, lo que significa que los widgets no responden.
Ejemplo 2: aplicación con capacidad de respuesta horizontal.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
tooltip: 'Menu',
) //IconButton
), //AppBar
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
), //BoxDecoration
), //Container
), //Flexible
SizedBox(
width: 20,
), //SizedBox
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
) //BoxDecoration
), //Container
) //Flexible
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.center,
), //Row
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue), //BoxDecoration
), //Container
), //Flexible
Row(
children: <Widget>[
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Container(
width: 180,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.cyan,
), //BoxDecoration
), //Container
), //Flexible
SizedBox(
width: 20,
), //SizedBox
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Container(
width: 180,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.cyan,
) //BoxDecoration
) //Container,
) //Flexible
], //<widget>[]
mainAxisAlignment: MainAxisAlignment.center,
), //Row
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
), //Column
) //Padding
), //Container
) //Center
), //Scaffold
debugShowCheckedModeBanner: false,
)); //MaterialApp
}
Producción:
Explicación: Nuevamente, al observar el código de la aplicación, podemos ver que esta vez cada widget de Contenedor se golpea con el widget Flexible . Dentro de los widgets de contenedor en la fila superior , la propiedad flexible se establece en 1 para ambos contenedores , lo que controla cómo se distribuirá el área entre estos, y la propiedad de ajuste se establece en FlexFlit.loose para ambos, lo que garantiza que ambos contenedores los widgets tienen la opción de ocupar un área mínima. Y nuevamente para el Contenedor azul , la propiedad flex se establece en 1 y la propiedad fit se establece en FlexFlit.loose. En los widgets de contenedor de la fila inferiorla propiedad flex se establece en 2, también van a ocupar la mitad del espacio igual, hemos logrado el mismo resultado al hacer que la flexión sea 1 en la Fila superior . Y el ajuste, en este caso, se establece en FlexFit.tight para ambos contenedores , lo que los obligará a ocupar el máximo espacio disponible para ellos.
Se puede ver que cuando el tamaño de la pantalla aumenta en la dirección horizontal, el ancho de los contenedores en las filas cambia para ajustarse de acuerdo con el tamaño de la pantalla, pero el contenedor azul no cambia su ancho ya que es un hijo directo de Columna y Flexible . El widget solo permite cambiar el tamaño del elemento secundario a lo largo del eje principal del elemento principal, que es vertical en el caso de Column . Y cuando se cambia el tamaño de la pantalla en la dirección vertical, podemos ver que la altura del contenedor azul cambia, pero otros contenedores no responden en esta dirección, ya que son elementos secundarios del widget Fila .
Ejemplo 3: envolver los widgets de fila superior e inferior con widgets flexibles
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
tooltip: 'Menu',
) //IconButton
), //AppBar
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Column(
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Row(
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
), //BoxDecoration
), //Container
), //Flexible
SizedBox(
width: 20,
), //SizedBox
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
) //BoxDecoration
), //Container
) //Flexible
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.center,
), //Row
), //Flexible
SizedBox(
height: 20,
), //SizedBox
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue), //BoxDecoration
), //Container
), //Flexible
SizedBox(
height: 20,
), //SizedBox
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Row(
children: <Widget>[
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Container(
width: 180,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.cyan,
), //BoxDecoration
), //Container
), //Flexible
SizedBox(
width: 20,
), //SizedBox
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Container(
width: 180,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.cyan,
) //BoxDecoration
), //Container
) //Flexible
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.center,
), //Row
), //Flexible
], //<Widget>[]
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
), //Column
) //Padding
), //Container
) //Container
), //Scaffold
debugShowCheckedModeBanner: false,
)); //MaterialApp
}
Producción:
Explicación: ahora, en esta aplicación, hemos envuelto los widgets de fila superior e inferior con widgets flexibles , cada uno con un valor flexible de 1. Todas las propiedades de ajuste en esta aplicación son cambios en FlexFit.tight para obligar a los widgets secundarios a tomar todas las espacio disponible para ellos. También hay una adición de dos widgets SizeBox , uno en la parte superior del contenedor azul y otro debajo.
Nuevamente, al observar la aplicación, podemos ver que cuando el tamaño de la pantalla cambia en dirección vertical, la altura de todos los contenedores también cambia de acuerdo con eso, pero cuando el tamaño de la pantalla cambia en dirección horizontal, excepto el ancho del contenedor azul de todos los contenedores. cambia también. Esto se debe a que el Contenedor azul es solo un elemento secundario directo del widget Columna, lo que le permite cambiar de dirección en la única dirección vertical. Aunque también podemos hacer que el Contenedor azul responda golpeándolo con un widget de Fila , lo que le dará la capacidad de ajustar su tamaño en la dirección horizontal también cuando se envuelva con Flexible ,
Entonces, así es como podemos hacer que los widgets de toda la aplicación respondan en un abrir y cerrar de ojos, usando el widget Flexible .
Publicación traducida automáticamente
Artículo escrito por ankit_kumar_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA