Search⌘ K
AI Features
Home
Courses
Responsive and Adaptive UI in Flutter

Challenge: Measure your Sizes - Responsive UI Widgets

Explore how to use MediaQuery and LayoutBuilder widgets to create responsive Flutter layouts. Learn to adjust widget arrangements based on screen or parent size, solving layout issues and enhancing user interface adaptability.

We'll cover the following...

Now that we’ve learned about the responsive layout widgets MediaQuery and LayoutBuilder, we’ll use them to fix a broken layout in a simple Flutter application. The following Flutter application has only one screen.

import 'package:flutter/material.dart';

class FlutterIsLove extends StatelessWidget {
  final double size;

  const FlutterIsLove({Key? key, required this.size}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        FlutterLogo(size: size),
        Icon(Icons.favorite, color: Colors.red, size: size),
      ],
    );
  }
}
A Column with the Flutter logo and a favorite icon

The screen ...