POC para mostrar o use de MediaQuery.of vs MediaQuery.sizeOf com o use de construtores const e não const.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  double customPadding = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MediaQuery Rebuild Test')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 20),
            Text(
              'Clique no botão e veja o console!',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  customPadding += 10;
                });
                print('\n📢 Botão clicado! Padding agora: $customPadding\n');
              },
              child: Text('Mudar Padding (muda MediaQuery, mas não o SIZE)'),
            ),
            SizedBox(height: 20),
            
            // Widget usando MediaQuery.of - vai rebuildar
            MediaQuery(
              data: MediaQuery.of(context).copyWith(
                padding: EdgeInsets.all(customPadding),
              ),
              child: Column(
                children: [
                  Text('Widgets COM const (não rebuildam):',
                    style: TextStyle(fontWeight: FontWeight.bold)),
                  SizedBox(height: 10),
                  const WidgetUsandoOf(id: 'CONST #1'),
                  SizedBox(height: 10),
                  const WidgetUsandoSizeOf(id: 'CONST #2'),
                  
                  SizedBox(height: 30),
                  Divider(thickness: 3),
                  SizedBox(height: 10),
                  
                  Text('Widgets SEM const (testam rebuilds):',
                    style: TextStyle(fontWeight: FontWeight.bold)),
                  SizedBox(height: 10),
                  WidgetUsandoOf(id: 'SEM CONST #3'),
                  SizedBox(height: 10),
                  WidgetUsandoSizeOf(id: 'SEM CONST #4'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class WidgetUsandoOf extends StatelessWidget {
  final String id;
  
  const WidgetUsandoOf({Key? key, required this.id}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('🔴 WidgetUsandoOf [$id] REBUILDOU!');
    
    final size = MediaQuery.of(context).size;
    
    return Container(
      color: Colors.red.withOpacity(0.3),
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Text(
            'MediaQuery.of() - $id',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          Text('Width: ${size.width.toStringAsFixed(0)}'),
        ],
      ),
    );
  }
}

class WidgetUsandoSizeOf extends StatelessWidget {
  final String id;
  
  const WidgetUsandoSizeOf({Key? key, required this.id}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('🟢 WidgetUsandoSizeOf [$id] REBUILDOU!');
    
    final size = MediaQuery.sizeOf(context);
    
    return Container(
      color: Colors.green.withOpacity(0.3),
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Text(
            'MediaQuery.sizeOf() - $id',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          Text('Width: ${size.width.toStringAsFixed(0)}'),
        ],
      ),
    );
  }
}