screen_size_test.dart

/*
  Jorge Wander Santana Urena
  jorgesanure@gmail.com
*/

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Demo',
        builder: (context, child) => ScreenSizeTest(
          child: child ?? SizedBox(),
        ),
        home: Scaffold(
          body: ListView(
            children: List.generate(
                20,
                (index) => Container(
                      padding: EdgeInsets.all(10),
                      child: Column(
                        children: [
                          Text(
                            'Veniam cillum esse ex aliqua nostrud cupidatat quis laborum. Aliqua nisi elit consectetur qui cillum magna ea exercitation id. Exercitation quis id cillum elit amet ut non laborum.',
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          ),
                          SizedBox(
                            height: 5,
                          ),
                          SizedBox(height: 50, child: Placeholder()),
                        ],
                      ),
                    )),
          ),
        ),
      );
}

class ScreenSizeTest extends StatefulWidget {
  final Widget? child;

  const ScreenSizeTest({Key? key, this.child}) : super(key: key);

  @override
  _ScreenSizeTestState createState() => _ScreenSizeTestState();
}

class _ScreenSizeTestState extends State<ScreenSizeTest> {
  double? _screenHeight;
  double? _screenHeightMax;
  double? _screenWidth;
  double? _screenWidthMax;

  final double _sliderHeight = 50;

  @override
  Widget build(BuildContext context) {
    if (_screenWidth == null)
      _screenWidthMax = _screenWidth = MediaQuery.of(context).size.width;
    if (_screenHeight == null)
      _screenHeightMax = _screenHeight =
          MediaQuery.of(context).size.height - (_sliderHeight * 2);

    return Column(
      children: [
        Expanded(
            child: Column(
          children: [
            Container(
              width: _screenWidth,
              height: _screenHeight,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: Colors.black, width: 2))),
              child: widget.child,
            ),
          ],
        )),
        _buildSlider(
            max: _screenWidthMax,
            value: _screenWidth,
            label: 'W : ',
            onChange: (value) {
              if (value != 0.0) setState(() => _screenWidth = value);
            }),
        _buildSlider(
            max: _screenHeightMax,
            label: 'H : ',
            value: _screenHeight,
            onChange: (value) {
              if (value != 0.0) setState(() => _screenHeight = value);
            }),
      ],
    );
  }

  Widget _buildSlider(
      {String? label,
      double? max,
      double? value,
      Function()? onTap,
      Function(double)? onChange}) {
    return Container(
      alignment: Alignment.center,
      height: _sliderHeight,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      width: double.infinity,
      color: Colors.white,
      child: Builder(
        builder: (context) => Scaffold(
          body: InkWell(
            onTap: onTap,
            child: Row(
              children: [
                Text((label ?? '') + (value ?? 0).round().toStringAsFixed(2)),
                Expanded(
                  child: Slider(
                    max: max ?? 100,
                    min: 0,
                    value: value ?? 0,
                    onChanged: onChange,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}