Necesitamos que se expanda el contenido, para esto, tenemos el widget de Expanded; el cual ocupa todo el contenido del padre; así que, lo colocamos dentro del container, que por cuestiones de ser más visible el ejemplo, le colocamos un color al Container para evidenciar que ahora los Container ocupan todo el espacio del padre:
Por defecto, cada Expanded ocupa una misma proporción de tamaño sobre el tamaño total, lo que significa, que cada Expanded tiene el mismo tamaño; pero, podemos personalizar este comportamiento; en nuestro caso, no nos interesa que cada Expanded tenga el mismo tamaño, ya que, queremos que el apartado para el calendario tenga un cuarto del tamaño total; para eso, tenemos que usar la propiedad de flex, en la cual el valor entero positivo es el factor tomado para indicar qué proporción va a ocupar cada Expanded.
Así que, si queremos que tenga un cuarto del tamaño, significa que existen 4 espacios, de los cuales, uno es asignado al Expanded del calendario y los otros 3 para el Expanded del listado:
Como se mencionó, el flex es un factor, por lo tanto, si colocamos valores de 2 y 6, o de 3 y 9, daría exactamente el mismo comportamiento.
class _Content extends StatelessWidget {
const _Content({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
)),
Expanded(
flex: 3,
child: Container(
color: Colors.yellow,
)),
],
);
}
}Y tendremos:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter