Search⌘ K
AI Features

Solution: Different Widgets for Different Sizes

Explore techniques to optimize Flutter interfaces by adapting widgets to varying screen sizes. Learn to constrain video height, conditionally display descriptions, and implement buttons for improved user interaction depending on available space.

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