We need the content to expand, for this, we have the Expanded widget; which occupies all the content of the parent; so, we place it inside the container, for reasons of making the example more visible, we put a color on the Container to show that the Containers now occupy the entire space of the parent:
By default, each Expanded occupies the same proportion of size over the total size, which means that each Expanded has the same size; but, we can customize this behavior; In our case, we are not interested in each Expanded having the same size, since we want the calendar section to have a quarter of the total size; For that, we have to use the flex property, in which the positive integer value is the factor taken to indicate what proportion each Expanded will occupy.
So, if we want it to be a quarter of the size, it means that there are 4 spaces, of which one is assigned to the Expanded of the calendar and the other 3 to the Expanded of the list:
As mentioned, flex is a factor, therefore, if we put values of 2 and 6, or 3 and 9, it would give exactly the same behavior.
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,
)),
],
);
}
}And we will have:
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter