pixel_snap 0.0.4

Sharp looking Flutter applications at any pixel scaling factor.

example/lib/main.dart

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

// ignore: unused_import, no_leading_underscores_for_library_prefixes
import 'package:flutter/widgets.dart' as _w;

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: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: List.generate(10, (index) {
                  // 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,
                  //   ),
                  // ),

                  return Expanded(
                    child: FittedBox(
                      // clipBehavior: Clip.hardEdge,
                      // fit: BoxFit.fitWidth,
                      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,
              //           ),
              //         ),
              //       ),
              //     ),
              //   ],
              // ),
            ),
          );
        }),
      ),
    );
  }
}