pixel_snap 0.0.2

Sharp looking Flutter applications at any pixel scaling factor.

example/lib/main.dart

import 'package:pixel_snap/material.dart';
// import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

const _simpleDecoration = BoxDecoration(
  border: Border.fromBorderSide(BorderSide(color: Colors.black, width: 1)),
);

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

  @override
  Widget build(BuildContext context) {
    return PixelSnapDebugBar(
      child: MaterialApp(
        home: Builder(builder: (context) {
          return MediaQuery(
            // data: MediaQuery.of(context).copyWith(devicePixelRatio: 1.75),
            data: MediaQuery.of(context),
            child: Scaffold(
              backgroundColor: Colors.grey,
              body: Align(
                alignment: Alignment.center,
                // heightFactor: 1.0,
                // widthFactor: 1.0,
                child: ListView(
                  children: List.generate(10, (index) {
                    return Center(
                      child: Image(
                        // height: 40.0,
                        fit: BoxFit.fitHeight,
                        // alignment: Alignment.topCenter,
                        image: NetworkImage(
                          'https://placehold.jp/fff/ccc/633x100.png',
                          // scale: 1.75,
                          // scale: 30,
                        ),
                      ),
                    );
                  }),
                ),
              ),
              // body: Column(
              //   mainAxisSize: MainAxisSize.max,
              //   crossAxisAlignment: CrossAxisAlignment.stretch,
              //   children: [
              //     Align(
              //       alignment: Alignment.topLeft,
              //       child: Container(
              //         margin: const EdgeInsets.all(10),
              //         decoration: _simpleDecoration,
              //         width: 40,
              //         height: 20,
              //       ),
              //     ),
              //     Align(
              //       alignment: Alignment.topLeft,
              //       child: Container(
              //         margin: const EdgeInsets.all(10).copyWith(top: 0),
              //         decoration: _simpleDecoration,
              //         width: 80,
              //         height: 20,
              //         alignment: Alignment.center,
              //         child: Container(
              //           decoration: _simpleDecoration,
              //           width: 51,
              //           height: 7,
              //         ),
              //       ),
              //     ),
              //     Container(
              //       margin: const EdgeInsets.all(10).copyWith(top: 0),
              //       decoration: _simpleDecoration,
              //       padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
              //       child: Row(
              //         children: List.generate(
              //           3,
              //           (index) => Expanded(
              //             child: Container(
              //               margin: const EdgeInsets.all(4),
              //               decoration: _simpleDecoration,
              //               height: 20,
              //             ),
              //           ),
              //         ),
              //       ),
              //     ),
              //     Container(
              //       margin: const EdgeInsets.all(10).copyWith(top: 0),
              //       decoration: _simpleDecoration,
              //       padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
              //       child: Row(
              //         mainAxisAlignment: MainAxisAlignment.spaceAround,
              //         children: List.generate(
              //           3,
              //           (index) => Container(
              //             margin: const EdgeInsets.all(4),
              //             decoration: _simpleDecoration,
              //             width: 40,
              //             height: 10,
              //           ),
              //         ),
              //       ),
              //     ),
              //     Container(
              //       margin: const EdgeInsets.all(10).copyWith(top: 0),
              //       decoration: _simpleDecoration,
              //       padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
              //       child: Row(
              //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
              //         children: List.generate(
              //           3,
              //           (index) => Container(
              //             margin: const EdgeInsets.all(4),
              //             decoration: _simpleDecoration,
              //             width: 40,
              //             height: 10,
              //           ),
              //         ),
              //       ),
              //     ),
              //     Container(
              //       margin: const EdgeInsets.all(10).copyWith(top: 0),
              //       decoration: _simpleDecoration,
              //       padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
              //       child: Row(
              //         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              //         children: List.generate(
              //           3,
              //           (index) => Container(
              //             margin: const EdgeInsets.all(4),
              //             decoration: _simpleDecoration,
              //             width: 40,
              //             height: 10,
              //           ),
              //         ),
              //       ),
              //     ),
              //     Flexible(
              //       flex: 2,
              //       child: Container(
              //         margin: const EdgeInsets.all(10).copyWith(top: 0),
              //         decoration: _simpleDecoration,
              //         alignment: Alignment.center,
              //         child: FractionallySizedBox(
              //           alignment: Alignment.center,
              //           widthFactor: 0.7,
              //           heightFactor: 0.7,
              //           child: Container(
              //             decoration: _simpleDecoration,
              //           ),
              //         ),
              //       ),
              //     ),
              //     Flexible(
              //       flex: 1,
              //       child: Container(
              //         margin: const EdgeInsets.all(10).copyWith(top: 0),
              //         decoration: _simpleDecoration,
              //         alignment: Alignment.center,
              //         child: FractionallySizedBox(
              //           alignment: Alignment.center,
              //           widthFactor: 0.7,
              //           heightFactor: 0.7,
              //           child: Container(
              //             decoration: _simpleDecoration,
              //           ),
              //         ),
              //       ),
              //     ),
              //   ],
              // ),
            ),
          );
        }),
      ),
    );
  }
}