Solution: Different Widgets for Different Sizes
Solution to the last challenge using MediaQuery and LayoutBuilder.
We'll cover the following...
Here are the solutions to the challenge of the previous lesson. We start by limiting the height of the video to the available height of the parent.
import 'package:flutter/material.dart'; class VideoPlayer extends StatelessWidget { const VideoPlayer({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { return Column( children: [ ConstrainedBox( constraints: BoxConstraints(maxHeight: constraints.maxHeight), child: AspectRatio( aspectRatio: 16 / 9, child: Container( color: Colors.black, child: const Center( child: Icon( Icons.play_circle, color: Colors.white, ), ), ), ), ), const VideoDescription(), ], ); }); } } class VideoDescription extends StatelessWidget { const VideoDescription({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: const [ Text( 'Video Title', overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 24), ), Text( 'Video description', overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 18), ), Text( 'Likes: 34', overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 16), ), ], ), ); } }
Limit the height of the video to the maximum height of the parent widget
In video_player.dart
, we wrap the entire Column
in a LayoutBuilder
in line 8. In lines 12 and 13, we wrap AspectRatio
in a ConstrainedBox
...