phone-paddings-code.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: _Content(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final mq = MediaQuery.of(context);

    return Stack(
      children: [
        Positioned(
          left: 0,
          right: 0,
          top: 0,
          height: mq.viewPadding.top,
          child: ColoredBox(color: Colors.red.withOpacity(0.3)),
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          height: mq.viewPadding.bottom,
          child: ColoredBox(color: Colors.red.withOpacity(0.3)),
        ),
        Positioned(
          left: 0,
          top: 0,
          bottom: 0,
          width: mq.viewPadding.left,
          child: ColoredBox(color: Colors.red.withOpacity(0.3)),
        ),
        Positioned(
          right: 0,
          top: 0,
          bottom: 0,
          width: mq.viewPadding.right,
          child: ColoredBox(color: Colors.red.withOpacity(0.3)),
        ),
        Scaffold(
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Stack(
                children: [
                  Positioned(
                    top: 16,
                    left: 0,
                    right: 0,
                    child: Text(
                      'viewPadding.top: ${mq.viewPadding.top}\n'
                      'viewInsets.top: ${mq.viewInsets.top}\n'
                      'padding.top: ${mq.padding.top}',
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Positioned(
                    bottom: 16,
                    left: 0,
                    right: 0,
                    child: Text(
                      'viewPadding.bottom: ${mq.viewPadding.bottom}\n'
                      'viewInsets.bottom: ${mq.viewInsets.bottom}\n'
                      'padding.bottom: ${mq.padding.bottom}',
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Positioned(
                    top: 0,
                    bottom: 0,
                    left: 16,
                    right: 0,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'viewPadding.left: ${mq.viewPadding.left}\n'
                        'viewInsets.left: ${mq.viewInsets.left}\n'
                        'padding.left: ${mq.padding.left}',
                      ),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 16,
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        'viewPadding.right: ${mq.viewPadding.right}\n'
                        'viewInsets.right: ${mq.viewInsets.right}\n'
                        'padding.right: ${mq.padding.right}',
                        textAlign: TextAlign.right,
                      ),
                    ),
                  ),
                  const Center(
                    child: SizedBox(
                      width: 50,
                      child: TextField(),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}