Adaptive UI Talk: An example of adapting to window size using MediaQuery.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Forward 2023',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Forward 2023'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: Padding(
          padding: EdgeInsets.all(12.0),
          child: _AdaptiveStar(),
        ),
      ),
    );
  }
}

class _AdaptiveStar extends StatelessWidget {
  const _AdaptiveStar();

  static const double _breakpoint = 800.0;

  @override
  Widget build(BuildContext context) {
    final Size windowSize = MediaQuery.of(context).size;
    final bool isSmall = windowSize.width <= _breakpoint;
    final double starSize = isSmall ? 200.0 : 400.0;

    return AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      alignment: Alignment.center,
      width: starSize,
      height: starSize,
      decoration: ShapeDecoration(
        shape: StarBorder(
          points: 5.0,
          innerRadiusRatio: 0.5,
          valleyRounding: .2,
          pointRounding: .2,
          side: BorderSide(
            color: const HSLColor.fromAHSL(1, 10 % 360.0, 1.0, 0.6).toColor(),
            width: isSmall ? 2 : 6,
          ),
        ),
        color: const HSLColor.fromAHSL(1, 10 % 360.0, 1.0, 0.4).toColor(),
      ),
    );
  }
}