...

/

Solution: Different Widgets for Different Sizes

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 ...