Responsible calculator layout with MediaQuery and Flex

flexible_calculator.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final box = MediaQuery.of(context).size;
    return Column(
      children: [
        Expanded(
          flex: 1,
          child: Center(
            child: Text(
              "5+3",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: box.height * 0.1,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: Wrap(
            alignment: WrapAlignment.center,
            spacing: box.width * 0.02,
            runSpacing: box.height * 0.02,
            children: "123+456-789×0./=C✂"
                .split('')
                .map(
                  (c) => CalcButton(
                    number: c,
                    onPressed: () {},
                  ),
                )
                .toList(),
          ),
        ),
      ],
    );
  }
}

class CalcButton extends StatelessWidget {
  final String number;
  final VoidCallback onPressed;
  CalcButton({Key key, this.number = '0', this.onPressed})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final box = MediaQuery.of(context).size;
    return ClipOval(
      child: Container(
        width: box.width * 0.20,
        height: box.height * 0.11,
        child: MaterialButton(
          color: Colors.black87,
          child: Text(
            number,
            style: TextStyle(
              fontSize: box.height * 0.05,
              color: Colors.white,
            ),
          ),
          onPressed: onPressed,
        ),
      ),
    );
  }
}