Screenutil responsive demo

.screenutil-responsive-demo.md

Dart Flutter ScreenUtil

Screenutil responsive demo

The workaround is to demonstrate correct usage of flutter_screenutil package. The code is runnable in DartPad by mimicking the actual package code implementation since flutter_screenutil isn't supported in DartPad yet.

Note

To see the result you can resizing the running result window to see the sizing behavior. You can run this demo on DartPad, here.

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

class AppConfig {
  BuildContext _context;
  double? _height;
  double? _width;
  double? _heightPadding;
  double? _widthPadding;

  AppConfig(this._context) {
    MediaQueryData _queryData = MediaQuery.of(_context);
    _height = _queryData.size.height / 100.0;
    _width = _queryData.size.width / 100.0;
    _heightPadding = _height! -
        ((_queryData.padding.top + _queryData.padding.bottom) / 100.0);
    _widthPadding =
        _width! - (_queryData.padding.left + _queryData.padding.right) / 100.0;
  }

  double rH(double v) {
    return _height! * v;
  }

  double rW(double v) {
    return _width! * v;
  }

  double rHP(double v) {
    return _heightPadding! * v;
  }

  double rWP(double v) {
    return _widthPadding! * v;
  }
}

void main() {
  runApp(MaterialApp(
//       theme: ThemeData.dark().copyWith(
//         scaffoldBackgroundColor: Colors.white,
//       ),
    debugShowCheckedModeBanner: false,
    home: Maa(),
  ));
}

class Maa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              child: const Text('scrollable mixed'),
              onPressed: () {
                try {
                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => MyWidget()));
                } catch (e) {
                  print(e);
                }
//                   Navigator.push(
//                     context,
//                     MaterialPageRoute(builder: (context) => MyWidget()),
//                   );
              },
            ),
            ElevatedButton(
              child: const Text('scrollable .w'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyWidget2()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _ac = AppConfig(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
        toolbarHeight: _ac.rHP(7),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (_, __) => Container(
          height: _ac.rHP(10),
          margin: EdgeInsets.symmetric(
            horizontal: _ac.rWP(3),
            vertical: _ac.rHP(1),
          ),
          padding: EdgeInsets.symmetric(
            horizontal: _ac.rWP(5),
          ),
          color: Colors.yellow,
          child: Text(
            'child',
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
      floatingActionButton: Container(
        padding: EdgeInsets.symmetric(
          horizontal: _ac.rWP(2),
          vertical: _ac.rHP(2),
        ),
        height: _ac.rHP(10),
        color: Colors.red,
        child: Text(
          'Test',
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}

class MyWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _ac = AppConfig(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
        toolbarHeight: _ac.rWP(7),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (_, __) => Container(
          height: _ac.rWP(10),
          margin: EdgeInsets.symmetric(
            horizontal: _ac.rWP(3),
            vertical: _ac.rWP(1),
          ),
          padding: EdgeInsets.symmetric(
            horizontal: _ac.rWP(5),
          ),
          color: Colors.yellow,
          child: Text(
            'child',
            style: TextStyle(fontSize: 30),
          ),
        ),
      ),
      floatingActionButton: Container(
        padding: EdgeInsets.symmetric(
          horizontal: _ac.rWP(2),
          vertical: _ac.rWP(2),
        ),
        height: _ac.rWP(10),
        color: Colors.red,
        child: Text(
          'Test',
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }
}