Responsive and Adaptive UI in Flutter/

...

/

Challenge: Measure your Sizes - Responsive UI Widgets

Challenge: Measure your Sizes - Responsive UI Widgets

Apply what you’ve learned about MediaQuery and LayoutBuilder in a coding challenge.

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