diff --git a/.github/workflows/config.yaml b/.github/workflows/config.yaml index 7b30920..96903d8 100644 --- a/.github/workflows/config.yaml +++ b/.github/workflows/config.yaml @@ -3,7 +3,10 @@ name: test on: pull_request: branches: - - master + - main + - dev + push: + - dev jobs: flutter_test: @@ -20,9 +23,10 @@ jobs: - run: | flutter doctor flutter pub get + flutter test # flutter test --coverage # bash <(curl -s https://codecov.io/bash) - - run: | - flutter test - working-directory: ./example + # - run: | + # flutter test + # working-directory: ./example diff --git a/CHANGELOG.md b/CHANGELOG.md index 4fd2cf3..9a46fa7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## 0.0.2 +* add inkWell to shapes + ## 0.0.1 * Initial release diff --git a/example/README.md b/example/README.md index 2b3fce4..e612fb2 100644 --- a/example/README.md +++ b/example/README.md @@ -1,16 +1,48 @@ -# example -A new Flutter project. +# shape_builder examples ## Getting Started +First, make sure you have installed `shape_builder` package. +
-This project is a starting point for a Flutter application. -A few resources to get you started if this is your first Flutter project: +## Objective -- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) +In these examples, you will learn how to draw different shapes from basic to more advanced ones. + + +## Layout logics + +- [01: Shape layout logics](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_01_shape_layout.dart) +
Description: + Shapes Size is determined following the following logics + * If the Shape has no child, no `height`, no `width`, and `shouldExpand` parameter is set to false (the default value), then Shape tries to size as small as possible. + * If the Shape has no `height`, no `width`, and `shouldExpand` parameter is set to false, then Shape tries to size as big as possible. + * If the Shape has child, but no `height`, no `width`, then Shape tries to size so to fit its child. + * If the Shape has `height` or `width`, then Shape tries take the given `height` or `width` respecting the constraint coming form parent. + +- [02: Shape color and gradient](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_02_color_and_gradient.dart) +
Description: + This example demonstrate how to color shapes and how to add gradients. + +- [03: Add shadow to a shape](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_03_shadow.dart) +
Description: + This example demonstrate how to add shaw to shapes. + +- [04: Child to Shape alignment](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_04_child_alignment.dart) +
Description: + This example demonstrate the logic of alignment of the child to the Shape. + +- [05: Use shapes as clipper](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_05_clip_behaviour.dart) +
Description: + This example demonstrate to use Shapes to clip widgets. + +- [06: Use shapes to clipper images](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_06_clip_behaviour_image.dart) +
Description: + This example demonstrate to use Shapes to clip images. + + + +## Questions & Suggestions +Please feel free to post an issue or PR. As always, your feedback makes this library become better and better. -For help getting started with Flutter development, view the -[online documentation](https://docs.flutter.dev/), which offers tutorials, -samples, guidance on mobile development, and a full API reference. diff --git a/example/lib/ex_001_basic_shapes/ex_01_shape_layout.dart b/example/lib/ex_001_basic_shapes/ex_01_shape_layout.dart new file mode 100644 index 0000000..33b4642 --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_01_shape_layout.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: _MyHomePage(), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + // shapes trie to size itself, in the following order: + // * to honor the `width`, `height`, + // * to be as big as possible if the parameter "shouldExpand" is set to true, + // * to ba as small as it child if the latter is defined, + // * to be as small as possible. + // + // TO TRY: + // Use RRectangle or Oval instead of Rectangle and try different combination + // of width, height, child and shouldExpand + child: Rectangle( + shouldExpand: true, + // width: 200, + // height: 200, + // child: Text('Child'), + ), + ), + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_02_color_and_gradient.dart b/example/lib/ex_001_basic_shapes/ex_02_color_and_gradient.dart new file mode 100644 index 0000000..2df7fe2 --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_02_color_and_gradient.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: _MyHomePage(), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SingleChildScrollView( + child: Column( + children: [ + // color defaults to the primary color + Rectangle( + width: 200, + height: 200, + ), + const Divider(), + // to set the color use the color parameter + RRectangle( + color: Colors.amber, + width: 200, + height: 200, + ), + const Divider(), + // ColorWithGradient class to set a gradient + Oval( + color: ColorWithGradient( + const LinearGradient(colors: [Colors.blue, Colors.amber]), + ), + width: 200, + height: 200, + ), + const Divider(), + Oval.circle( + color: ColorWithGradient( + const RadialGradient(colors: [Colors.blue, Colors.amber]), + ), + radius: 200 / 2, + ), + ], + ), + ), + ), + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_03_shadow.dart b/example/lib/ex_001_basic_shapes/ex_03_shadow.dart new file mode 100644 index 0000000..3ee877c --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_03_shadow.dart @@ -0,0 +1,64 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: _MyHomePage(), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Column( + children: [ + // Use box shadow to add a shadow + Oval.circle( + radius: 100, + boxShadow: const [ + BoxShadow( + color: Colors.grey, + spreadRadius: 7, + blurRadius: 7, + offset: Offset(10, 10), + ) + ], + ), + const Divider(), + Oval.circle( + radius: 100, + swipeAngle: 4, + boxShadow: const [ + BoxShadow( + color: Colors.grey, + spreadRadius: 7, + blurRadius: 7, + ) + ], + ), + const Divider(), + // You can use BoxShadowWithElevation to add shadow from elevation + Oval.circle( + radius: 100, + swipeAngle: 4, + boxShadow: BoxShadowWithElevation(12, color: Colors.amber), + ), + ], + ), + ), + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_04_child_alignment.dart b/example/lib/ex_001_basic_shapes/ex_04_child_alignment.dart new file mode 100644 index 0000000..8c84b2f --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_04_child_alignment.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: _MyHomePage(), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Column( + children: [ + // FIRST CASE: Child is grater than Shape dimension + // + // Default alignment is Alignment.center + Rectangle.square( + child: const Text('This is a ME'), + ), + const Divider(), + // + // Because child size is greater than shape size the shape is aligned + // to the child + Rectangle.square( + alignment: Alignment.topLeft, + child: const Text('This is a ME'), + ), + const Divider(), + Rectangle.square( + side: 50, + alignment: Alignment.centerRight, + child: const Text('This is a ME'), + ), + const Divider(), + // Second CASE: Shape size is greater than child size + // + // Default alignment is Alignment.center + Rectangle.square( + side: 150, + child: const Text('This is a ME'), + ), + const Divider(), + // Because of the shape size is greater than child size the child is aligned + // to the shape + Rectangle.square( + side: 150, + alignment: Alignment.topLeft, + child: const Text('This is a ME'), + ), + const Divider(), + Rectangle.square( + side: 150, + alignment: Alignment.bottomRight, + child: const Text('This is a ME'), + ), + ], + ), + ), + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_05_clip_behaviour.dart b/example/lib/ex_001_basic_shapes/ex_05_clip_behaviour.dart new file mode 100644 index 0000000..7599e01 --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_05_clip_behaviour.dart @@ -0,0 +1,136 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: _MyHomePage(), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SingleChildScrollView( + child: Column( + children: [ + // Text without clipping + Rectangle( + // Default to Clip.none + clipBehavior: Clip.none, + child: const Text('This is a TEXT'), + ), + const Divider(), + // Text with clipping + Rectangle( + width: 50, + shrinkToClippedSize: false, + clipBehavior: Clip.antiAlias, + child: const Text('This is a TEXT'), + ), + const Divider(), + // By default the The shape size collapses to the clipped size + Container( + // We add a red container to see the size of the shape + // and compare it to the size of the clipped zone + color: Colors.red, + padding: const EdgeInsets.all(4), + child: Rectangle( + width: 50, + clipBehavior: Clip.antiAlias, + child: const Text('This is a TEXT'), + ), + ), + const Divider(), + Container( + color: Colors.red, + padding: const EdgeInsets.all(4), + child: Rectangle( + width: 50, + clipBehavior: Clip.antiAlias, + // if we set shrinkToClippedSize is set to false, + // the size of the shape is equal to the size of the child + shrinkToClippedSize: false, + child: const Text('This is a TEXT'), + ), + ), + const Divider(), + // Clip an image inside a circle + // TRY RESIZE THE WINDOW OF THE APP, and see the the image keeps + // its aspect ration + Oval.circle( + radius: 100, + clipBehavior: Clip.antiAlias, + child: Image.network( + 'https://placebear.com/1200/300', + fit: BoxFit.cover, + ), + ), + const Divider(), + // Clip an image inside an Oval and add Border using PaintStyle + Oval( + width: 200, + height: 120, + clipBehavior: Clip.antiAlias, + paintStyle: PaintStyle( + style: PaintingStyle.stroke, + strokeWidth: 8, + ), + childIsInTheForeground: false, + child: Image.network( + 'https://placebear.com/1200/300', + fit: BoxFit.cover, + ), + ), + const Divider(), + // Clip an image inside a rounded rectangle. + // Here we add a gradient from black to transparent. + // This is a common use case where the image may have a white color + // and we want to ensure texts are readable. + RRectangle( + width: 200, + height: 120, + clipBehavior: Clip.antiAlias, + childIsInTheForeground: false, + color: ColorWithGradient( + LinearGradient( + colors: [Colors.black.withOpacity(0.8), Colors.transparent], + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + ), + ), + child: Image.network( + 'https://placebear.com/400/240', + fit: BoxFit.cover, + width: 400, + height: 240, + ), + ) + .foreground( + alignment: const Alignment(0, .8), + ) + .build( + const Text( + 'Bear', + style: TextStyle(color: Colors.white), + ), + ) + ], + ), + ), + ), + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_06_clip_behaviour_image.dart b/example/lib/ex_001_basic_shapes/ex_06_clip_behaviour_image.dart new file mode 100644 index 0000000..6f8638e --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_06_clip_behaviour_image.dart @@ -0,0 +1,131 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: Scaffold( + body: Padding( + padding: EdgeInsets.all(8.0), + child: _MyHomePage(), + )), + ); + } +} + +class _MyHomePage extends StatefulWidget { + const _MyHomePage({super.key}); + + @override + State<_MyHomePage> createState() => __MyHomePageState(); +} + +class __MyHomePageState extends State<_MyHomePage> { + double _alignmentX = 0.0; + double _alignmentY = 0.0; + bool _shrinkClippedZone = true; + bool _shouldExpand = false; + bool _expandToFullWidth = false; + @override + Widget build(BuildContext context) { + return Column( + children: [ + ..._Sliders(), + const Divider(), + SizedBox( + width: _expandToFullWidth ? double.infinity : null, + child: Rectangle( + width: 120, + height: 100, + clipBehavior: Clip.antiAlias, + alignment: Alignment(_alignmentX, _alignmentY), + shrinkToClippedSize: _shrinkClippedZone, + shouldExpand: _shouldExpand, + inkWell: InkWell(onTap: () {}), + child: Image.network( + 'https://placebear.com/600/240', + fit: BoxFit.cover, + width: 600, + height: 240, + ), + ).colorize(), + ), + ], + ); + } + + List _Sliders() { + return [ + Row( + children: [ + const Text('X alignment'), + Expanded( + child: Slider( + min: -1.0, + max: 1.0, + value: _alignmentX, + onChanged: (value) => setState(() { + _alignmentX = value; + }), + ), + ), + ], + ), + Row( + children: [ + const Text('Y alignment'), + Expanded( + child: Slider( + min: -1.0, + max: 1.0, + value: _alignmentY, + onChanged: (value) => setState(() { + _alignmentY = value; + }), + ), + ), + ], + ), + Row( + children: [ + const Text('Shrink clipped zone'), + Checkbox( + value: _shrinkClippedZone, + onChanged: (value) => setState( + () { + _shrinkClippedZone = value!; + }, + ), + ), + const Spacer(), + const Text('Should Expand'), + Checkbox( + value: _shouldExpand, + onChanged: (value) => setState( + () { + _shouldExpand = value!; + }, + ), + ), + const Spacer(), + const Text('Fill width'), + Checkbox( + value: _expandToFullWidth, + onChanged: (value) => setState( + () { + _expandToFullWidth = value!; + }, + ), + ) + ], + ), + ]; + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_07_background.dart b/example/lib/ex_001_basic_shapes/ex_07_background.dart new file mode 100644 index 0000000..d501d5e --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_07_background.dart @@ -0,0 +1,94 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: Scaffold( + body: Padding( + padding: EdgeInsets.all(8.0), + child: _MyHomePage(), + )), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage({super.key}); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Oval.circle( + color: Colors.purple, + radius: 35, + ) + .background(color: Colors.blue) + .buildCircle(radius: 55) + .background( + color: Colors.amber, + clipBehavior: Clip.antiAlias, + ) + .buildCircle(radius: 75), + const Divider(), + const Text('4') + .background(color: Colors.red) + .buildSquare(50) + .background(color: Colors.black, alignment: Alignment.topLeft) + .buildSquare(100) + .background(color: Colors.blue, alignment: Alignment.bottomRight) + .buildSquare(150), + const Divider(), + const Icon( + Icons.favorite, + size: 48, + color: Colors.white, + ) + .background( + clipBehavior: Clip.antiAlias, + boxShadow: BoxShadowWithElevation( + 8, + color: const Color.fromARGB(122, 4, 4, 4), + ), + color: ColorWithGradient( + LinearGradient( + colors: [Colors.blue.shade300, Colors.blue.shade900], + ), + ), + ) + .buildCircle(radius: 100) + .background( + alignment: const Alignment(1, 1) / 1.1, + ) + .build( + Padding( + padding: const EdgeInsets.all(12), + child: Text( + '5', + style: Theme.of(context).textTheme.titleLarge!.copyWith( + color: Colors.white, + ), + ), + ) + .background( + clipBehavior: Clip.antiAliasWithSaveLayer, + color: Colors.blue.shade900, + boxShadow: BoxShadowWithElevation( + 12, + color: Colors.white, + ), + ) + .buildCircle(), + ), + ], + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_08_foreground.dart b/example/lib/ex_001_basic_shapes/ex_08_foreground.dart new file mode 100644 index 0000000..61bc738 --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_08_foreground.dart @@ -0,0 +1,86 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: Scaffold( + body: Padding( + padding: EdgeInsets.all(8.0), + child: _MyHomePage(), + )), + ); + } +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage({super.key}); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Oval.circle(color: Colors.amber, radius: 75) + .foreground(color: Colors.blue) + .buildCircle(radius: 55) + .foreground(color: Colors.purple) + .buildCircle(radius: 35), + const Divider(), + Rectangle.square( + side: 150, + ) + .foreground(color: Colors.black, alignment: Alignment.bottomRight) + .buildSquare(100) + .foreground(color: Colors.red) + .buildSquare(50) + .foreground(color: Colors.blue) + .build(const Text('4')), + const Divider(), + const Icon( + Icons.favorite, + size: 48, + color: Colors.white, + ) + .background( + boxShadow: BoxShadowWithElevation( + 8, + color: const Color.fromARGB(122, 4, 4, 4), + ), + color: ColorWithGradient( + LinearGradient( + colors: [Colors.blue.shade300, Colors.blue.shade900], + ), + ), + ) + .buildCircle(radius: 100) + .foreground(alignment: const Alignment(1, 1) / 1.1) + .build( + Padding( + padding: const EdgeInsets.all(12), + child: Text( + '5', + style: Theme.of(context).textTheme.titleLarge!.copyWith( + color: Colors.white, + ), + ), + ) + .background( + color: Colors.blue.shade900, + boxShadow: BoxShadowWithElevation( + 12, + color: Colors.white, + ), + ) + .buildCircle(), + ), + ], + ); + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_09_oval_and_circle.dart b/example/lib/ex_001_basic_shapes/ex_09_oval_and_circle.dart new file mode 100644 index 0000000..58ebdba --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_09_oval_and_circle.dart @@ -0,0 +1,196 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: Scaffold( + body: Padding( + padding: EdgeInsets.all(16.0), + child: _MyHomePage(), + ), + ), + ); + } +} + +class _MyHomePage extends StatefulWidget { + const _MyHomePage({super.key}); + + @override + State<_MyHomePage> createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State<_MyHomePage> { + double _value1 = 10; + double _value2 = 10; + double _value3 = 10; + double _strokeWidth = 4.0; + bool _shouldClosePathToCenter = true; + bool _useStroke = false; + @override + Widget build(BuildContext context) { + return Column( + children: [ + ..._sliders(), + const Divider(), + Expanded( + child: Oval.circle( + shouldClosePathToCenter: _shouldClosePathToCenter, + radius: 100, + startAngle: 0, + swipeAngle: _getSwipeAngle(_value1), + inkWell: InkWell( + onTap: () {}, + ), + paintStyle: _useStroke + ? PaintStyle( + style: PaintingStyle.stroke, + strokeWidth: _strokeWidth, + ) + : null, + ) + .foreground( + color: Colors.amber, + paintStyle: _useStroke + ? PaintStyle( + style: PaintingStyle.stroke, + strokeWidth: _strokeWidth, + ) + : null, + ) + .inkWell( + InkWell( + onTap: () {}, + ), + ) + .buildCircle( + startAngle: _getSwipeAngle(_value1), + swipeAngle: _getSwipeAngle(_value2), + shouldClosePathToCenter: _shouldClosePathToCenter, + ) + .foreground( + color: Colors.green, + paintStyle: _useStroke + ? PaintStyle( + style: PaintingStyle.stroke, + strokeWidth: _strokeWidth, + ) + : null, + ) + .buildCircle( + startAngle: _getSwipeAngle(_value1) + _getSwipeAngle(_value2), + swipeAngle: _getSwipeAngle(_value3), + shouldClosePathToCenter: _shouldClosePathToCenter, + ), + ), + ], + ); + } + + double _getSwipeAngle(double value) { + final total = _value1 + _value2 + _value3; + if (total == 0) return 0; + return 2 * pi * value / total; + } + + List _sliders() { + return [ + Row( + children: [ + const Text('value 1'), + Expanded( + child: Slider( + min: 0, + max: 100, + value: _value1, + onChanged: (value) => setState(() { + _value1 = value; + }), + ), + ), + ], + ), + Row( + children: [ + const Text('value 2'), + Expanded( + child: Slider( + min: 0, + max: 100, + value: _value2, + activeColor: Colors.amber, + onChanged: (value) => setState(() { + _value2 = value; + }), + ), + ), + ], + ), + Row( + children: [ + const Text('value 3'), + Expanded( + child: Slider( + min: 0, + max: 100, + value: _value3, + activeColor: Colors.green, + onChanged: (value) => setState(() { + _value3 = value; + }), + ), + ), + ], + ), + Row( + children: [ + const Text('Close Path To Center'), + Checkbox( + value: _shouldClosePathToCenter, + onChanged: (v) => setState( + () { + _shouldClosePathToCenter = v!; + }, + ), + ), + const Spacer(), + const Text('Use stroke'), + Checkbox( + value: _useStroke, + onChanged: (v) => setState( + () { + _useStroke = v!; + }, + ), + ) + ], + ), + if (_useStroke) + Row( + children: [ + const Text('Stroke width'), + Expanded( + child: Slider( + min: 0, + max: 100, + value: _strokeWidth, + onChanged: (value) => setState(() { + _strokeWidth = value; + }), + ), + ), + ], + ), + ]; + } +} diff --git a/example/lib/ex_001_basic_shapes/ex_10_dating.dart b/example/lib/ex_001_basic_shapes/ex_10_dating.dart new file mode 100644 index 0000000..c4de500 --- /dev/null +++ b/example/lib/ex_001_basic_shapes/ex_10_dating.dart @@ -0,0 +1,247 @@ +import 'package:flutter/material.dart'; +import 'package:shape_builder/shape_builder.dart'; + +void main(List args) { + runApp(const _MyApp()); +} + +class _MyHomePage extends StatelessWidget { + const _MyHomePage(); + + @override + Widget build(BuildContext context) { + final User user = fakeUser; + return Scaffold( + body: Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + children: [ + RRectangle( + height: MediaQuery.of(context).size.height / 1.4, + width: MediaQuery.of(context).size.width, + borderRadius: const BorderRadius.all(Radius.circular(8.0)), + color: ColorWithGradient( + const LinearGradient( + colors: [ + Color.fromARGB(200, 0, 0, 0), + Color.fromARGB(0, 0, 0, 0) + ], + begin: Alignment.bottomCenter, + end: Alignment.center, + ), + ), + boxShadow: [ + BoxShadow( + color: Colors.grey.withOpacity(.5), + spreadRadius: 4, + blurRadius: 4, + offset: const Offset(3, 3), + ) + ], + clipBehavior: Clip.antiAlias, + childIsInTheForeground: false, + child: Image.network( + user.imageUrls[0], + fit: BoxFit.cover, + ), + ) + .foreground( + alignment: const Alignment(-.7, .8), + ) + .build( + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + '${user.name}, ${user.age}', + style: Theme.of(context) + .textTheme + .headline3! + .copyWith(color: Colors.white), + ), + Text( + user.jobTitle, + style: Theme.of(context).textTheme.headline6!.copyWith( + color: Colors.white, fontWeight: FontWeight.normal), + ), + const SizedBox(height: 16), + SizedBox( + height: 70, + child: ListView.builder( + shrinkWrap: true, + scrollDirection: Axis.horizontal, + itemCount: user.imageUrls.length + 1, + itemBuilder: (builder, index) { + return (index < user.imageUrls.length) + ? Image.network( + user.imageUrls[index], + ) + .background( + boxShadow: BoxShadowWithElevation( + 2, + color: Colors.white60, + ), + ) + .buildRRect() + .paddingInsets + .right() + : Icon( + Icons.info_outline, + size: 25, + color: Theme.of(context).primaryColor, + ) + .background(color: Colors.white) + .buildCircle(radius: 30); + }, + ), + ), + ], + ), + ), + const SizedBox(height: 16), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const ChoiceButton( + color: Color(0xFFE84545), + icon: Icons.clear_rounded, + ), + const ChoiceButton( + width: 80, + height: 80, + size: 30, + color: Colors.white, + hasGradient: true, + icon: Icons.favorite, + ).paddingInsets.horizontal(), + const ChoiceButton( + color: Color(0xFF2B2E4A), + icon: Icons.watch_later, + ), + ], + ) + ], + ), + ), + ); + } +} + +class ChoiceButton extends StatelessWidget { + final double width; + final double height; + final double size; + final bool hasGradient; + final Color? color; + final IconData icon; + + const ChoiceButton({ + Key? key, + this.width = 60, + this.height = 60, + this.size = 25, + this.hasGradient = false, + required this.color, + required this.icon, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Icon( + icon, + size: size, + color: color, + ) + .background( + color: hasGradient + ? ColorWithGradient( + const LinearGradient( + colors: [ + Color(0xFF2B2E4A), + Color(0xFFE84545), + ], + begin: Alignment.centerLeft, + end: Alignment.centerRight, + ), + ) + : Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.grey.withOpacity(0.5), + spreadRadius: 4, + blurRadius: 4, + offset: const Offset(3, 3), + ), + ], + clipBehavior: Clip.antiAlias, + ) + .inkWell( + InkWell( + onTap: () { + print('ontap'); + }, + onDoubleTap: () { + print('doubletap'); + }, + ), + ) + .buildOval( + width: width, + height: height, + ); + } +} + +class _MyApp extends StatelessWidget { + const _MyApp(); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: _MyHomePage(), + ); + } +} + +class User { + final String? id; + final String name; + final int age; + final String gender; + final List imageUrls; + final List interests; + final String bio; + final String jobTitle; + final String location; + User({ + this.id, + required this.name, + required this.age, + required this.gender, + required this.imageUrls, + required this.interests, + required this.bio, + required this.jobTitle, + required this.location, + }); +} + +final fakeUser = User( + id: '1', + name: 'John', + age: 25, + gender: 'Male', + imageUrls: [ + 'https://images.unsplash.com/photo-1595623238469-fc58b3839cf6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80', + 'https://images.unsplash.com/photo-1595623238469-fc58b3839cf6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80', + 'https://images.unsplash.com/photo-1595623238469-fc58b3839cf6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80', + 'https://images.unsplash.com/photo-1595623238469-fc58b3839cf6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80', + 'https://images.unsplash.com/photo-1595623238469-fc58b3839cf6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80', + ], + jobTitle: 'Job Title Here', + interests: ['Music', 'Economics', 'Football'], + bio: + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.', + location: 'Milan', +); diff --git a/example/lib/main.dart b/example/lib/main.dart index c6a974a..809d160 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -24,75 +24,49 @@ class MyHomeBody extends StatelessWidget { @override Widget build(BuildContext context) { - return SingleChildScrollView( - child: Column( - children: [ - Rectangle( - child: const Text('This is A Rectangle').padding.all(), - ), - const SizedBox(height: 8), - const Text('This is A Rounded Rectangle') - .padding - .all() - .background() - .buildRRect(), - const SizedBox(height: 8), - RRectangle.capsule( - width: double.infinity, - child: const Text('This is A Capsule').padding.all(), - ), - const SizedBox(height: 8), - const Text('This is An Oval') - .padding - .all() - .background() - .buildOval(width: double.infinity), - const SizedBox(height: 8), - Rectangle.square( - color: Colors.amber, - side: 150, - child: const Text('This is A Square').padding.all(), - ), - const SizedBox(height: 8), - const Text('This is A Circle') - .background(color: Colors.amber) - .buildCircle(radius: 75, swipeAngle: 5), - const SizedBox(height: 8), - const Text('This is A Circle') - .background( - color: Colors.amber, - paintStyle: PaintStyle( - style: PaintingStyle.stroke, - strokeWidth: 4, - ), - ) - .buildCircle( - radius: 75, - swipeAngle: 5, - shouldClosePathToCenter: true, - ), - const SizedBox(height: 8), - const Text('This is A Circle') - .background( - color: ColorWithGradient( - const RadialGradient(colors: [Colors.white, Colors.amber]), - ), - ) - .buildCircle(radius: 75), - const SizedBox(height: 8), - Oval.circle( - radius: 75, - boxShadow: const [BoxShadow(offset: Offset(4, 4), blurRadius: 6)], - child: const Text('This is A Rectangle'), - ), - const SizedBox(height: 8), - Oval.circle( - radius: 75, - boxShadow: BoxShadowWithElevation(7, color: Colors.amber), - child: const Text('This is A Rectangle'), - ), - ], - ).padding.all(), + return SizedBox( + width: double.infinity, + child: FittedBox( + child: Stack( + children: [ + Column( + children: [ + const Icon( + Icons.add, + size: 162, + ).paddingInsets.all(16), + const Icon( + Icons.add, + size: 262, + ).paddingInsets.all(16), + ], + ), + Row( + children: [ + const Icon( + Icons.edit, + size: 162, + ).paddingInsets.all(16), + const Icon( + Icons.edit, + size: 262, + ).paddingInsets.all(16) + ], + ) + ], + ) + .foreground( + color: Colors.amber.withOpacity(.5), + // shouldExpand: true, + clipBehavior: Clip.antiAlias, + // alignment: Alignment.topCenter, + // fit: BoxFit.fitHeight, + ) + .buildRRect( + // height: 300, + width: 160, + ), + ), ); } } diff --git a/example/lib/main1.dart b/example/lib/main1.dart deleted file mode 100644 index f9fcea5..0000000 --- a/example/lib/main1.dart +++ /dev/null @@ -1,1085 +0,0 @@ -import 'dart:ui'; - -import 'package:flutter/material.dart'; -import 'package:shape_builder/shape_builder.dart'; - -void main() { - runApp(const MyApp()); -} - -class MyApp extends StatelessWidget { - const MyApp({super.key}); - - // This widget is the root of your application. - @override - Widget build(BuildContext context) { - return MaterialApp( - debugShowCheckedModeBanner: false, - title: 'Flutter Demo', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: // - // const Example1(), - // const TextFliedExample(), - // const fromParent.width(), - // AdaptiveLayout(), - // WelcomePage(), - AdaptiveExample(), - // FixedExample(), - ); - } -} - -class AdaptiveExample extends StatelessWidget { - AdaptiveExample({super.key}) { - InheritedLayout.scaleFactor = 1; - ScaffoldInheritedLayout.query = [ - Query.constant(step: 800), - Query.linear(step: 1000), - Query.constant(), - ]; - } - - @override - Widget build(BuildContext context) { - const example = 1; - return ScaffoldInheritedLayout.singleChildScrollView( - builder: (_, __) => Builder( - builder: (context) { - if (example == 6) { - return Scaffold( - appBar: AppBar( - title: const Text('Title'), - // centerTitle: true, - ), - body: const Center( - child: Text('Center text1'), - ), - ).resize().adaptive(); - } - return Scaffold( - body: Builder( - builder: (context) { - if (example == 1) { - return Row( - children: [ - const Text( - 'This is a text', - style: TextStyle(fontSize: 48), - ), - ], - ).resizeAdaptive().colorize(); - } - if (example == 2) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Text( - 'This is a text', - style: TextStyle(fontSize: 48), - ).resize().adaptive(), - const Text( - 'This is a text', - style: TextStyle(fontSize: 22), - ).resize().adaptive(), - Checkbox(value: true, onChanged: (_) {}), - Checkbox(value: true, onChanged: (_) {}) - .resize() - .adaptive(), - Checkbox(value: true, onChanged: (_) {}) - .resize() - .adaptive(2) - ], - ); - } - if (example == 3) { - return Padding( - padding: const EdgeInsets.all(8.0), - child: SingleChildScrollView( - child: Column( - children: [ - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 0.25 title'), - ).resize().adaptive(.25).colorize(), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 0.50 title'), - ).resize().adaptive(.5), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 0.75 title'), - ).resize().adaptive(.75), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 1.00 refrence'), - ).resize().adaptive(), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 1.25 title'), - ).resize().adaptive(1.25), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 1.50 title'), - ).resize().adaptive(1.5), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 1.75 title'), - ).resize().adaptive(1.75), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 2.00 title'), - ).resize().adaptive(2), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 2.25 title'), - ).resize().adaptive(2.25), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 2.50 title'), - ).resize().adaptive(2.5), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 2.75 title'), - ).resize().adaptive(2.75), - CheckboxListTile( - value: true, - onChanged: (_) {}, - title: const Text('This is the 3.00 title'), - ).resize().adaptive(3), - ], - ).resize().adaptive(), - ), - ); - } - - if (example == 4) { - return Padding( - padding: const EdgeInsets.all(8.0), - child: Center( - child: SizedBox( - // width: 400, - child: SingleChildScrollView( - child: Column( - children: [ - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(0.25), - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(0.5), - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(0.75), - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ), - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(1.25), - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(1.5), - const TextField( - decoration: InputDecoration( - icon: Icon(Icons.abc), - suffixIcon: Icon(Icons.ac_unit_sharp), - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(1.75), - const TextField( - decoration: InputDecoration( - label: Text('This is a text Fliend'), - ), - ).resize().adaptive(2), - ], - ), - ), - ), - ), - ); - } - - if (example == 5) { - return SizedBox( - width: 600, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - // const Expanded(child: Text('This is text 1')), - const Text('This is text 22'), - const Text('This is text 3'), - const Text('This is text 4'), - const Text('This is text 5'), - ], - ), - ).resize().adaptive(); - } - - return Column( - children: [ - const Text('No example'), - ], - ); - }, - ), - // body: Text( - // 'This is a text', - // style: TextStyle(fontSize: 48), - // ).resize().adaptiveTest(), - // body: Column( - // // mainAxisSize: MainAxisSize.min, - // children: [ - // Text( - // 'HI', - // ), - // // ListTile( - // // title: Text('Title'), - // // ) - // ], - // ).colorize().resize().adaptiveTest(), - ); - }, - ), - ); - } -} - -class FixedExample extends StatelessWidget { - const FixedExample({super.key}); - - @override - Widget build(BuildContext context) { - final example = 1; - return Scaffold( - body: Builder(builder: (context) { - if (example == 1) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Text('This is me, and that is you'), - const Text('This is me, and that is you') - .resize() - .fixed(width: 2), - const Text('ljl'), - ], - ); - } - return const Text('NO EXAMPLE'); - }), - ); - } -} - -class AdaptiveLayout extends StatelessWidget { - AdaptiveLayout({super.key}) { - InheritedLayout.scaleFactor = .1; - ScaffoldInheritedLayout.query = [ - Query.constant(step: 600), - Query.linear(step: 1000), - Query.constant(), - ]; - } - - @override - Widget build(BuildContext context) { - return Scaffold( - body: ScaffoldInheritedLayout( - builder: (context, size) { - return Column( - children: [ - Text('${MediaQuery.of(context).size}') - .resizeWithFlex() - .fromDevice - .width(width: .5), - const Text('PARENT').resizeWithFlex().fromParent.width(width: .5), - Text('$size').resizeWithFlex().fromEffectiveWidth(.5, null), - ], - ); - }, - ), - ); - } -} - -class FromParentWidth extends StatelessWidget { - const FromParentWidth({super.key}); - - @override - Widget build(BuildContext context) { - const example = 5; - return Scaffold( - body: Builder( - builder: (context) { - if (example == 0) { - return Column( - children: [ - const Text('lskdjf').resize().fixed(), - ], - ); - } - if (example == 1) { - return SizedBox( - width: 200, - height: 100, - child: const Text('From device screen') - .resize(fitTheShortestSide: false) - .fromDevice - .width(width: .1, height: .1) - .colorize(), - ); - } - if (example == 2) { - return SizedBox( - width: 200, - height: 100, - child: const Text('From parent size') - .resize(fitTheShortestSide: false) - .fromParent - .width(width: 1, height: 1) - .colorize(), - ); - } - if (example == 3) { - return const Text('This is me From parent') - .resize(fitTheShortestSide: true) - .fromParent - .width( - width: 1, - height: 1, - ) - .colorize(); - } - if (example == 4) { - return SizedBox( - // width: 500, - // height: 100, - child: Column( - children: [ - const Text('This is Normal Text 1'), - const Flexible(child: Text('This is Normal Flex text')), - const Text('This is me From parent') - .resize() - .fromParent - .width(), - Flexible( - child: const Text('This is me From parent') - .resize() - .fromParent - .width(), - ), - Flexible( - flex: 10, - fit: FlexFit.tight, - child: const Text( - 'This is me From parent', - // style: TextStyle(f), - ).resize().fromParent.width(width: 0.1), - ), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.2) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.3) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.4) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.5) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.6) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.7) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.8) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 0.9) - .colorize(), - const Text('This is me From parent') - .resize() - .fromParent - .width(width: 1) - .colorize(), - - // Text('This is me From parent') - // .resize() - // .fromParent.width(height: 0.1), - // Flexible( - // child: Text('This is me From parent') - // .resize() - // .fromParent.width(height: 0.1), - // ), - // Flexible( - // child: Text('This is me From parent') - // .resize() - // .fromParent.width(height: 0.4), - // ), - // Flexible( - // flex: 2, - // child: Text('This is me From parent') - // .resize() - // .fromParent.width(height: 0.4), - // ), - ], - ), - ); - } - - if (example == 5) { - return Padding( - padding: const EdgeInsets.all(8.0), - child: SizedBox( - // width: 500, - // height: 100, - child: SingleChildScrollView( - child: Column( - children: [ - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.04), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.06), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.08), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.1), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.12), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.14), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.16), - const SizedBox().resize().fromParent.width(height: .02), - const TextField( - decoration: InputDecoration( - labelText: 'Lable text', - border: OutlineInputBorder(), - ), - ).resize().fromParent.width(height: 0.18), - ], - ), - ), - ), - ); - } - return const Text('NO example'); - }, - ), - ); - } -} - -class FromDeviceWidthExample extends StatelessWidget { - const FromDeviceWidthExample({super.key}); - @override - Widget build(BuildContext context) { - const example = 1; - return Scaffold( - body: Builder(builder: (context) { - if (example == 1) { - return Column( - // mainAxisSize: MainAxisSize.min, - children: [ - Row( - children: [ - Center( - child: const SizedBox( - width: 100, - height: 110, - child: Text('From W and H'), - ) - .colorize() - .resize() - .fromDevice - .widthAndHeight(width: 0.2, height: 0.2) - .colorize(Colors.amber.withOpacity(0.5)), - ), - Center( - child: const SizedBox( - width: 100, - height: 110, - child: Text('From W'), - ) - .colorize() - .resize() - .fromDevice - .width(width: 0.2, height: 0.2) - .colorize(Colors.amber.withOpacity(0.5)), - ), - ], - ), - Center( - child: const SizedBox( - width: 120, - height: 110, - child: Text('From H'), - ) - .colorize() - .resize(fitTheShortestSide: true) - .fromDevice - .height(height: 0.2) - .colorize(Colors.amber.withOpacity(0.5)), - ), - ], - ); - } - return Column( - children: [ - // SizedBox( - // width: 1, - // height: 1, - // ).colorize().resize().fromDevice.width(), - // SizedBox( - // width: 1, - // height: 1, - // ).colorize().resize().fromDevice.width(widthFraction: 0.2), - // SizedBox(height: 8), - // SizedBox( - // width: 1, - // height: 2, - // ) - // .colorize() - // .resize() - // .fromDevice.width(widthFraction: .2, heightFraction: 0.4), - // SizedBox(height: 8), - const SizedBox( - width: 2, - height: 1, - ) - .colorize() - .resize() - .fromDevice - .height(width: .4, height: 0.2) - .colorize(), - - // SizedBox( - // width: 1, - // height: 2, - // ) - // .colorize() - // .resize() - // .fromDevice.widthAndHeight(widthFraction: .2, heightFraction: 0.4), - ], - ); - }), - ); - } -} - -class Example1 extends StatelessWidget { - const Example1({super.key}); - - @override - Widget build(BuildContext context) { - const example = 3; - return Directionality( - textDirection: TextDirection.ltr, - child: Scaffold( - // WITH COLUMN - body: Builder(builder: (context) { - if (example == 0) { - return Column( - children: [ - const Text('This is you').resize().fixed(width: 50, height: 10), - const SizedBox( - height: 50, - child: FittedBox( - fit: BoxFit.fill, - child: Text( - 'This is FITTED', - overflow: TextOverflow.ellipsis, - ), - ), - ).colorize(Colors.amber), - const Text( - 'This is you', - overflow: TextOverflow.ellipsis, - ).resize().fixed(height: 50), - const Text( - 'This is you', - overflow: TextOverflow.ellipsis, - ).resize(fitTheShortestSide: true).fixed(height: 50).colorize(), - const Text( - 'This is you', - overflow: TextOverflow.ellipsis, - ).resize().fixed(height: 50, width: 2000), - const Text( - 'This is you', - overflow: TextOverflow.ellipsis, - ) - .resize(fitTheShortestSide: true) - .fixed(height: 50, width: 2000) - .colorize(), - const Center(child: Text('This is Center')) - .resize() - .fixed(height: 50), - ], - ); - } - if (example == 1) { - return Column( - children: [ - const SizedBox( - width: 500, - height: 100, - child: FittedBox( - child: Text('This is FITTED'), - ), - ).colorize(Colors.amber), - const Text('This is RESIZ') - .resize() - .fixed(width: 500, height: 100) - .colorize(), - const Text('This is RESIZ') - .resize(fitTheShortestSide: true) - .fixed(width: 500, height: 100) - .colorize(), - const SizedBox(height: 20), - const SizedBox( - width: 50, - height: 10, - child: FittedBox( - child: Text('This is you'), - ), - ).colorize(Colors.amber), - const Text('This is you') - .resize() - .fixed(width: 50, height: 10) - .colorize(), - ], - ); - } - if (example == 2) { - return SizedBox( - width: 200, - height: 100, - child: const Text('This is you') - .colorize() - .resize() - .fixed(width: 300, height: double.infinity), - ); - } - if (example == 3) { - // try resize the window - return SingleChildScrollView( - child: Column( - children: [ - ListTile( - title: const Text( - 'This is me', - overflow: TextOverflow.ellipsis, - ), - subtitle: const Text( - 'Yes, this is Normal tile', - // overflow: TextOverflow.ellipsis, - ), - leading: const Text('L'), - trailing: Material( - child: InkWell( - onTap: () {}, - child: const Text('T'), - ), - ), - ), - ListTile( - title: const Text( - 'This is me', - overflow: TextOverflow.ellipsis, - ), - subtitle: const Text( - 'Yes, this is biggest', - overflow: TextOverflow.ellipsis, - ), - leading: const Text('L'), - trailing: Material( - child: InkWell( - onTap: () {}, - child: const Text('T'), - ), - ), - ) - .colorize() // - .resize(fitTheShortestSide: true) - .fixed(height: 206) - .colorize(Colors.amber), - const Text('GGGGGG'), - ListTile( - title: const Text( - 'This is me', - overflow: TextOverflow.ellipsis, - ), - subtitle: const Text('Yes, this is Smaller'), - leading: const Text('L'), - trailing: Material( - child: InkWell( - onTap: () {}, - child: const Text('T'), - ), - ), - ) - .colorize() // - .resize() - .fixed(height: 60), - const Text('GGGGGG'), - ListTile( - title: const Text( - 'This is me', - overflow: TextOverflow.ellipsis, - ), - subtitle: const Text('Yes, this is Smallest'), - leading: const Text('L'), - trailing: Material( - child: InkWell( - onTap: () {}, - child: const Text('T'), - ), - ), - ) - .colorize() // - .resize() - .fixed(height: 30), - ], - ), - ); - } - - if (example == 4) { - return Column( - children: [ - Center( - child: TextButton.icon( - // style: TextButton.styleFr, - onPressed: () {}, - icon: const Icon(Icons.favorite), - label: const Text('Respect A R '), - ) - .colorize(Colors.amber) // - .resize(fitTheShortestSide: true) - .fixed(height: 70, width: 300) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - ), - const Text('HHHHHHH'), - Center( - child: TextButton.icon( - // style: TextButton.styleFr, - onPressed: () {}, - icon: const Icon(Icons.favorite), - label: const Text('NO Respect '), - ) - .colorize(Colors.amber) // - .resize() - .fixed(height: 70, width: 300) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - ), - const Text('HHHHHHH'), - Center( - child: TextButton.icon( - // style: TextButton.styleFr, - onPressed: () {}, - icon: const Icon(Icons.favorite), - label: const Text('Respect A R '), - ) - .colorize(Colors.amber) // - .resize() - .fixed(height: 70) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - ), - const Text('HHHHHHH'), - Center( - child: TextButton.icon( - // style: TextButton.styleFr, - onPressed: () {}, - icon: const Icon(Icons.favorite), - label: const Text('NO Respect '), - ) - .colorize(Colors.amber) // - .resize() - .fixed(height: 70) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - ), - const Text('HHHHHHH'), - Center( - child: TextButton.icon( - // style: TextButton.styleFr, - onPressed: () {}, - icon: const Icon(Icons.favorite), - label: const Text('Respect A R '), - ) - .colorize(Colors.amber) // - .resize() - .fixed(width: 370) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - ), - const Text('HHHHHHH'), - Center( - child: TextButton.icon( - // style: TextButton.styleFr, - onPressed: () {}, - icon: const Icon(Icons.favorite), - label: const Text('NO Respect A R '), - ) - .colorize(Colors.amber) // - .resize() - .fixed(width: 370) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - ), - const Text('HHHHHHH'), - // Center( - // child: TextButton.icon( - // // style: TextButton.styleFr, - // onPressed: () {}, - // icon: const Icon(Icons.favorite), - // label: const Text('KAOUTHAR '), - // ) - // .colorize(Colors.amber) // - // .resize() - // .fixed(width: 400) - // .background(clipBehavior: Clip.antiAlias) - // .buildCapsule(), - // ), - // Center( - // child: TextButton.icon( - // // style: TextButton.styleFr, - // onPressed: () {}, - // icon: const Icon(Icons.favorite), - // label: const Text('KAOUTHAR '), - // ) - // .colorize(Colors.transparent) // - // .resize() - // .fixed(width: 50) - // // .background( - // // color: Colors.transparent, - // // clipBehavior: Clip.antiAlias) - // // .buildCapsule(), - // ) - ], - ); - } - - return Column( - children: [ - const Text('normal'), - const Text('fixed()').resize().fixed(), - const Text('fixed(width: 40)') - .colorize() - .resize() - .fixed(width: 60), - const Text('ixed(width: 140)') - .colorize() - .resize() - .fixed(width: 140), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - const Text('Inside Row'), - const Text('fixed(height: 10)') - .colorize() - .resize() - .fixed(height: 10), - const Text('fixed(height: 70') - .colorize() - .resize() - .fixed(height: 70), - const SizedBox( - // width: double.infinity, - - // height: 50, - ) - .resize() - .fixed(), - ], - ), - const Text('This is Him') - .colorize() - .resize() - .fixed(width: 40, height: 10), - const SizedBox().colorize().resize().fixed(), - ], - ); - }), - ), - ); - } -} - -class TextFliedExample extends StatelessWidget { - const TextFliedExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - children: [ - const TextField(), - const TextField().resize().fixed(height: 60), - const TextField().resize().fixed(height: 160), - ], - ).resize().fixed(width: 600, height: double.infinity), - ), - ); - } -} - -class WelcomePage extends StatefulWidget { - const WelcomePage({Key? key}) : super(key: key); - static const routeName = '/welcome-page'; - - @override - State createState() => _WelcomePageState(); -} - -class _WelcomePageState extends State { - @override - Widget build(BuildContext context) { - InheritedLayout.scaleFactor = 2; - ScaffoldInheritedLayout.query = [ - Query.constant(step: 600), - Query.linear(step: 1000), - Query.constant(), - ]; - return Material( - child: - // Image.asset( - // 'assets/welcome_image_bg.jpg', - // fit: BoxFit.cover, - // ) - - const SizedBox().foreground(color: Colors.blue.shade200).build( - const _Foreground(), - ), - ); - } -} - -class _Foreground extends StatelessWidget { - const _Foreground({super.key}); - final factor = 20; - @override - Widget build(BuildContext context) { - return ScaffoldInheritedLayout(builder: (context, size) { - return Column( - children: [ - const FlexSpacer() * factor, - const Text( - 'بِسْمِ اللَّـهِ الرَّحْمَـٰنِ الرَّحِيمِ ', - textAlign: TextAlign.center, - ).resize().fromEffectiveWidth(null, .05), - const FlexSpacer() * factor * 4, - const Text( - 'إِنَّهُ لَقُرْآنٌ كَرِيمٌ', - ).resize().fromEffectiveWidth(null, .1), - const FlexSpacer() * factor * 4, - const Text( - 'اللهم اجعلنا من أهل القرآن حفظاً وعلماً وعملاً', - textAlign: TextAlign.center, - ).resize().fromEffectiveWidth(null, .05), - const FlexSpacer.expand() * factor, - - // Spacer(), - - Padding( - padding: const EdgeInsets.all(8.0), - child: ElevatedButton( - onPressed: () { - // navigator.toReplacement('/'); - }, - - // child: Text('lksdjf'), - child: const Text( - 'إبدأ', - ) - .background(color: Colors.transparent) - .buildRect(width: double.infinity), - ).resize(fitTheShortestSide: true).fromEffectiveWidth(null, .1), - ) - ], - ); - }); - } -} diff --git a/example/lib/main2.dart b/example/lib/main2.dart deleted file mode 100644 index 3afb836..0000000 --- a/example/lib/main2.dart +++ /dev/null @@ -1,1012 +0,0 @@ -// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables - -import 'package:flutter/material.dart'; -import 'package:shape_builder/shape_builder.dart'; - -void main() { - runApp(const MyApp()); -} - -class MyApp extends StatelessWidget { - const MyApp({super.key}); - - // This widget is the root of your application. - @override - Widget build(BuildContext context) { - return MaterialApp( - debugShowCheckedModeBanner: false, - title: 'Flutter Demo', - theme: ThemeData( - primarySwatch: Colors.blue, - ), - - // home: const WorkShop(), - // home: const FrameExample(), - // home: const FrameExample1(), - // home: const OverlayExample(), - // home: const CircleExample(), - // home: const RectangleExample(), - // home: const RRectangleExample(), - // home: const FavoriteExample(), - // home: const ClipExample(), - home: const ImageClipper(), - // home: const GradientColorExample(), - // home: const MyCoranWidget(), - // home: const AdaptiveLayout(), - ); - } -} - -class AdaptiveLayout extends StatelessWidget { - const AdaptiveLayout({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: // - // Column( - // children: [ - // SizedBox( - // width: 280, - // height: 180, - // child: FittedBox( - // fit: BoxFit.contain, - // child: LimitedBox( - // // maxHeight: height ?? constraints.maxHeight, - // // maxWidth: width ?? constraints.maxWidth, - // child: Text('lh'), - // ), - // ).colorize(), - // ), - // Text('lh').resize().fixed(width: 280, height: 180).colorize(), - - // ], - // ), - // Column( - // children: [ - // SizedBox( - // height: 150, - // child: TextField().colorize(Colors.amber.withOpacity(0.2))), - // SizedBox( - // height: 12, - // ), - // Padding( - // padding: const EdgeInsets.all(80.0), - // child: TextField() - // .colorize(Colors.red) - // .resize(respectAspectRatio: true) - // .fixed( - // // width: 250, - // height: 180, - // ) - // // .colorize(), - // ).colorize(Colors.amber), - // Text('l44'), - // ], - // ) - // .resize(respectAspectRatio: true) // - // .fixed() - // .colorize(Colors.amber), - // - // - - Column( - children: [ - SizedBox( - width: 600, - height: 200, - child: FittedBox( - fit: BoxFit.contain, - child: LimitedBox( - // maxHeight: height ?? constraints.maxHeight, - // maxWidth: width ?? constraints.maxWidth, - child: Text('This is me'), - ), - ).colorize(), - ), - Text('This is me1') - .resize() - .fixed(height: 200, width: double.infinity), - ], - ), - // ListTile(title: Text('lskdjfsldkj').colorize()) - // .resize(respectAspectRatio: true) - // .fixed(), - // - // - // SizedBox( - // // height: 30, - // child: Column( - // children: [ - // Text('This isme'), - // ], - // ).colorize().resize().fixed( - // // - // width: 200), - // ) // - ); - } -} - -class WorkShop extends StatelessWidget { - const WorkShop({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: const EdgeInsets.all(10.0), - child: SizedBox( - // width: double.infinity, - // height: double.infinity, - child: RRectangle.square( - // isOverlay: true, - // side: 500, - // width: double.infinity, - // // height: double.infinity, - // height: 80, - // radius: 250, - // width: double.infinity, - // height: double.infinity, - child: SizedBox( - child: Text('GI lskdjfls d lsdkfj sldf lksdfkj sdlkf sdlkf ')), - alignment: Alignment.bottomRight, - ), - ), - ).colorize(Color.fromARGB(70, 255, 193, 7)), - ); - } -} - -class GradientColorExample extends StatelessWidget { - const GradientColorExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Rectangle.square( - color: ColorWithGradient( - LinearGradient(colors: [Colors.red, Colors.blue])), - ), - ], - ), - ); - } -} - -class MyCoranWidget extends StatelessWidget { - const MyCoranWidget({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Expanded( - flex: 10, - child: RRectangle( - width: double.infinity, - outerVBorderRadius: BorderRadius.only( - bottomRight: Radius.circular(50), - ), - child: const Text('This is yours'), - ), - ), - Spacer( - flex: 6, - ), - ], - ).foreground().build( - Column( - children: [ - Spacer( - flex: 10, - ), - Expanded( - flex: 4, - child: RRectangle( - width: double.infinity, - boxShadow: [BoxShadow(blurRadius: 5, spreadRadius: 0.5)], - borderRadius: BorderRadius.only( - topRight: Radius.elliptical(50, 50), - bottomLeft: Radius.elliptical(50, 50), - ), - outerVBorderRadius: BorderRadius.only( - topLeft: Radius.elliptical(50, 50), - bottomRight: Radius.elliptical(50, 50), - ), - color: Colors.amber, - child: Text('This is you'), - ), - ), - Expanded( - flex: 2, - child: Center(child: Text('This is me')), - ), - ], - ), - ), - ); - } -} - -class ImageClipper extends StatelessWidget { - const ImageClipper({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - // body: Image.network( - // 'https://twistedsifter.com/wp-content/uploads/2010/11/funny-splash-mountain-28.jpg', - // // fit: BoxFit.scaleDown, - // fit: BoxFit.cover, - // ) - // .foreground( - // color: Colors.green.withOpacity(0.1), - // // clipBehavior: Clip.antiAlias, - // alignment: Alignment.center, - // ) - // .buildCircle(radius: 300), - // .buildRect(), - body: true - ? Center( - child: SizedBox( - // height: 500, - // width: 500, - child: Rectangle( - width: 705, - height: 400, - clipBehavior: Clip.antiAlias, - alignment: Alignment(0, -1), - boxShadow: BoxShadowWithElevation(6), - // isOverlay: false, - child: Image.network( - 'https://freequranlearning.com/images/alquran/30/536.jpg', - fit: BoxFit.cover, - width: 805, - // height: 700, - alignment: Alignment.center, - // fit: BoxFit.cover, - ), - ).colorize(Colors.green).colorize(), - ), - ) - : Container( - child: Column( - children: [ - const SizedBox(height: 16), - Expanded( - child: Rectangle( - // width: 405, - // height: 400, - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - boxShadow: BoxShadowWithElevation(6), - paintStyle: PaintStyle( - style: PaintingStyle.stroke, - strokeWidth: 8, - ), - isOverlay: false, - child: Image.network( - 'https://freequranlearning.com/images/alquran/30/536.jpg', - fit: BoxFit.cover, - // width: 805, - // height: 700, - alignment: Alignment.center, - // fit: BoxFit.cover, - ), - ).colorize(Colors.green).colorize(), - ), - - // DecoratedBox( - // decoration: BoxDecoration( - // color: Colors.blue, - // shape: BoxShape.circle, - // // backgroundBlendMode: BlendMode, - // image: DecorationImage( - // fit: BoxFit.none, - // image: NetworkImage( - // 'https://twistedsifter.com/wp-content/uploads/2010/11/funny-splash-mountain-28.jpg', - // ), - // ), - // ), - // ), - // child: SizedBox.square( - // dimension: 300, - // ), - // ), - // SizedBox( - // width: 600, - // height: 400, - // child: Image.network( - // 'https://twistedsifter.com/wp-content/uploads/2010/11/funny-splash-mountain-28.jpg', - // fit: BoxFit.none, - // // fit: BoxFit.cover, - // )), - // SizedBox( - // width: 600, - // height: 400, - // child: Image.network( - // 'https://twistedsifter.com/wp-content/uploads/2010/11/funny-splash-mountain-28.jpg', - // fit: BoxFit.none, - // // fit: BoxFit.cover, - // ), - // ) - // .foreground( - // alignment: Alignment.topLeft, - // // color: Colors.red, - // color: Colors.transparent, - // // color: ColorWithGradient( - // // LinearGradient(colors: [Colors.transparent, Colors.blue]), - // // blendMode: BlendMode.difference, - // // ), - - // clipBehavior: Clip.antiAlias, - // // alignment: Alignment.bottomRight, - // ) - // .buildCircle(radius: 150) - // .colorize(), - - // SizedBox( - // width: 600, - // height: 400, - // child: Image.network( - // 'https://twistedsifter.com/wp-content/uploads/2010/11/funny-splash-mountain-28.jpg', - // fit: BoxFit.cover, - // // fit: BoxFit.cover, - // )) - // .foreground( - // alignment: Alignment.bottomRight, - // color: Colors.transparent, - // // color: ColorWithBlendMode(Colors.red, BlendMode.colorBurn), - // // color: ColorWithGradient( - // // LinearGradient(colors: [Colors.transparent, Colors.blue]), - // // blendMode: BlendMode.difference, - // // ), - // clipBehavior: Clip.antiAlias, - // // alignment: Alignment.bottomRight, - // ) - // .buildCircle(radius: 150) - // .colorize(), - - // // .background( - // // alignment: Alignment.topLeft, - // // clipBehavior: Clip.antiAlias, - // // ) - // // .buildCircle(radius: 100) - - // // .buildCapsule(height: 300), - // Image.network( - // 'https://twistedsifter.com/wp-content/uploads/2010/11/funny-splash-mountain-28.jpg', - // // fit: BoxFit.scaleDown, - // fit: BoxFit.cover, - // // colorBlendMode: BlendMode.colorBurn, - // ) - // .foreground( - // color: Colors.red.withOpacity(.3), - // clipBehavior: Clip.antiAlias, - // alignment: Alignment.center, - // ) - // .buildCapsule(height: 300, width: 600), - - // // .buildOval(height: 80, width: 150), - ], - ), - ), - ); - } -} - -class FrameExample extends StatelessWidget { - const FrameExample({super.key}); - - @override - Widget build(BuildContext context) { - return Directionality( - textDirection: TextDirection.ltr, - child: Scaffold( - // body: Center( - // child: Padding( - // padding: const EdgeInsets.all(8.0), - // child: Stack( - // children: [ - // // Text('Hi this is me') - // // .frame( - // // alignment: Alignment.bottomRight, - // // elevation: 10, - // // shadowColor: Colors.red, - // // ) - // // .buildRRect(height: 100, width: double.infinity) - // // .frame( - // // isOverlay: true, - // // color: Colors.red, - // // alignment: Alignment.topLeft, - // // ) - // // .buildRect(width: 10, height: 10), - // Ovel.circle(), - // Text('That is not me') - // .frame(elevation: 4) - // .buildRSquare(side: 50), - // Text('This is me') - // .frame( - // alignment: Alignment.topLeft, - // elevation: 6, - // // clipBehaviour: Clip.antiAlias, - // ) - // .buildCircle(swipAngle: 5) - // .colorize(Colors.red), - // // SizedBox(height: 10), - // // Row( - // // children: [ - // // Text('This is me') - // // .frame(alignment: Alignment.center) - // // .buildSquare(50), - // // // SizedBox(height: 10), - // // Text('This is me') - // // .frame(alignment: Alignment.center) - // // .buildRSquare(side: 50, radius: Radius.zero), - // // ], - // // ) - // // RRectangle( - // // height: 100, - // // width: double.infinity, - // // alignment: Alignment.bottomRight, - // // elevation: 10, - // // shadowColor: Colors.red, - // // child: Text('Hi this is me'), - // // ), - // // SizedBox(height: 10), - // // RRectangle( - // // height: 100, - // // width: double.infinity, - // // elevation: 10, - // // shadowColor: Colors.red, - // // ) - // // .overlay( - // // Alignment.bottomRight, - // // ) - // // .build( - // // Text('Hi this is me'), - // // ), - // ], - // ), - // ), - // ), - - body: Center( - child: const Text('Hello, world') - .background(color: Colors.red) - .buildRRect() - .background(color: Colors.orange) - .buildRRect(height: 100) - .background(color: Colors.purple) - .buildRRect(width: 150) - .background(color: Colors.pink, alignment: Alignment.center) - .buildRRect(width: double.infinity) - .background(color: Colors.green) - .buildRRect(height: 400) - .background(color: Colors.yellow, alignment: Alignment.center) - .buildRRect(height: double.infinity), - )), - ); - } -} - -class FrameExample1 extends StatelessWidget { - const FrameExample1({super.key}); - - @override - Widget build(BuildContext context) { - final shadow = [ - BoxShadow( - color: Colors.red, - offset: Offset(1, 1), - spreadRadius: 10, - blurRadius: 5, - ), - BoxShadow( - color: Colors.green, - offset: Offset(10, 10), - spreadRadius: 10, - blurRadius: 10, - ) - ]; - return Scaffold( - body: Padding( - padding: const EdgeInsets.all(8.0), - child: Column(children: [ - DecoratedBox( - decoration: BoxDecoration( - boxShadow: shadow, - color: Colors.white, - shape: BoxShape.circle, - ), - child: SizedBox.square( - dimension: 88, - ), - ), - // Material( - // shape: CircleBorder(), - // elevation: 8, - // color: Colors.red, - // child: Padding( - // padding: const EdgeInsets.all(8.0), - // child: Text('XXXXX'), - // ), - // ), - Padding(padding: const EdgeInsets.all(8.0), child: Text('101234566')) - .background( - boxShadow: shadow, - ) - .buildCapsule(width: 88, height: 50), - // SizedBox(height: 8), - // Padding(padding: const EdgeInsets.all(8.0), child: Text('101234566')) - // .background( - // shadow: shadow, - // color: Colors.white, - // ) - // .buildRSquare( - // side: 88, - // ), - Padding( - padding: const EdgeInsets.symmetric(vertical: 26, horizontal: 10), - child: Text('XXXXXX'), - ) - .background( - alignment: Alignment.bottomCenter, - boxShadow: shadow, - color: ColorWithGradient( - RadialGradient(colors: [Colors.white, Colors.blue]))) - .buildCircle(startAngle: 1, swipeAngle: 5), - // Padding( - // padding: const EdgeInsets.symmetric(vertical: 26, horizontal: 10), - // child: Text('XXXXXX'), - // ).background( - // alignment: Alignment.bottomCenter, - // shadow: [BoxShadowWithElevation(12)], - // ).buildCircle(startAngle: 1, swipeAngle: 5), - ]), - ), - ); - } -} - -class CircleExample extends StatelessWidget { - const CircleExample({super.key}); - - @override - Widget build(BuildContext context) { - const double elevation = 10; - return Scaffold( - body: Column( - children: [ - RRectangle( - height: 100, - width: 150, - ), - Oval.circle( - radius: 100, - startAngle: 1, - swipeAngle: 6, - color: Colors.white, - boxShadow: BoxShadowWithElevation(elevation), - ), - Oval.circle( - radius: 100, - color: Colors.red, - ), - Oval( - boxShadow: BoxShadowWithElevation(5), - color: Colors.white, - width: 100, - height: 50, - startAngle: 0, - swipeAngle: 6, - ), - Oval.circle( - radius: 100, - boxShadow: BoxShadowWithElevation(1), - - color: ColorWithGradient( - const RadialGradient( - colors: [Colors.yellow, Colors.white], - ), - ), - // color: Colors.yellow, - ) - ], - ), - ); - } -} - -class RectangleExample extends StatelessWidget { - const RectangleExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: SingleChildScrollView( - child: Column( - children: [ - // Rectangle.square().frame().buildSquare(100), - // Rectangle( - // color: Colors.red, - // height: 100, - // ), - Rectangle( - color: ColorWithGradient( - LinearGradient(colors: [Colors.red, Colors.blue])), - width: 200, - height: 100, - ), - Rectangle.square( - side: 100, - color: Colors.white, - boxShadow: BoxShadowWithElevation(10, color: Colors.yellow), - ), - SizedBox(height: 8), - Rectangle( - height: 150, - width: 150, - ).foreground(alignment: Alignment.bottomRight).build( - Rectangle( - height: 100, - width: 100, - color: Colors.black, - ).foreground(alignment: Alignment.topLeft).build( - Rectangle( - height: 50, - width: 50, - color: Colors.red, - child: Text('4'), - ), - ), - ), - SizedBox(height: 8), - Rectangle( - height: 50, - width: 50, - color: Colors.red, - ) - .background(alignment: Alignment.topLeft) - .build( - Rectangle( - height: 100, - width: 100, - color: Colors.black, - ), - ) - .background(alignment: Alignment.bottomRight) - .build( - Rectangle( - height: 150, - width: 150, - ), - ), - ], - ), - ), - ); - } -} - -class RRectangleExample extends StatelessWidget { - const RRectangleExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - // Card( - // shape: RoundedRectangleBorder( - // borderRadius: BorderRadius.circular(12)), - // child: SizedBox.square( - // dimension: 100, - // ), - // ), - // RRectangle.square( - // side: 100, - // ), - RRectangle.square( - side: 100, - borderRadius: BorderRadius.all(Radius.elliptical(20, 40)), - ), - // RRectangle.square( - // side: 100, - // color: Colors.yellow, - // radius: RadiusCorners( - // topLeft: Radius.circular(100), - // ), - // ), - Text('this is me').background(color: Colors.yellow).buildRect(), - RRectangle.capsule( - // height: 20, - color: Colors.green, - child: Padding( - padding: const EdgeInsets.all(18.0), - child: Text('lksjdflksdkjjhkjhkhkhkhklf\n lskdjfldskj'), - ), - ), - Rectangle( - boxShadow: BoxShadowWithElevation(5), - color: ColorWithGradient( - LinearGradient(colors: [Colors.green, Colors.greenAccent])), - width: 200, - alignment: Alignment.topLeft, - child: Text('ldkfj'), - ) - // RRectangle( - // height: 150, - // width: 150, - // color: Colors.red, - // ).overlay(Alignment.bottomRight).build( - // RRectangle( - // height: 100, - // width: 100, - // color: Colors.black, - // ).overlay(Alignment.topLeft).build( - // RRectangle( - // height: 50, - // width: 50, - // ), - // ), - // ), - ], - ), - ), - ), - ); - } -} - -class OverlayExample extends StatelessWidget { - const OverlayExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Column( - children: [ - Text('Hello world') // - .background(color: Color.fromARGB(129, 33, 149, 243)) - .buildSquare(100) // - .foreground(color: Colors.red, alignment: Alignment.topLeft) - .buildCircle(radius: 20), - Text('Hello world') // - .background(color: Color.fromARGB(129, 33, 149, 243)) - .buildSquare(100) // - .background(color: Colors.red, alignment: Alignment.topLeft) - .buildCircle(radius: 20), - // .background() - // .build(Ovel.circle(color: Colors.blue)), - // , - SizedBox(height: 8), - // SizedBox( - // width: 100, - // height: 100, - // ) // - // .colorize() // - // .foreground(alignment: Alignment.bottomRight) - // .build(Text('HI')), - - // SizedBox( - // width: 100, - // height: 100, - // ) // - // .colorize() // - // .overlay( - // Column( - // crossAxisAlignment: CrossAxisAlignment.start, - // children: [ - // Text('HI nn nn '), - // Circle(radius: 20), - // ], - // ), - // alignment: Alignment.topLeft), - Oval.circle( - radius: 120, - clipBehavior: Clip.antiAlias, - ).foreground().build( - Oval.circle( - radius: 100, - color: Colors.amber, - ), - ), - ], - ) // - // .frame(height: 120, width: 120) // - // .background(Circle( - // color: Colors.red, - // )) - , - ), - ); - } -} - -class FavoriteExample extends StatelessWidget { - const FavoriteExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Column( - children: [ - Icon( - Icons.favorite, - size: 48, - color: Colors.white, - ) - .background( - boxShadow: BoxShadowWithElevation(8, - color: Color.fromARGB(122, 4, 4, 4)), - color: ColorWithGradient( - LinearGradient( - colors: [Colors.blue.shade300, Colors.blue.shade900], - ), - ), - ) - .buildCircle(radius: 100) - - // - .foreground(alignment: Alignment(1, 1) / 1.1) - .build( - Padding( - padding: const EdgeInsets.all(12), - child: Text( - '5', - style: Theme.of(context).textTheme.titleLarge!.copyWith( - color: Colors.white, - ), - ), - ) - .background( - color: Colors.blue.shade900, - boxShadow: - BoxShadowWithElevation(12, color: Colors.white), - ) - .buildCircle(), - ), - // Icon( - // Icons.favorite, - // size: 40, - // color: Colors.white, - // ) - // .frame( - // elevation: 6, - // shadowColor: Color.fromARGB(123, 13, 72, 161), - // color: GradientColor( - // LinearGradient( - // colors: [Colors.blue.shade300, Colors.blue.shade900], - // ), - // ), - // ) - // .buildCircle(radius: 100) - // .overlay(Alignment.bottomRight) - // .build( - // Padding( - // padding: const EdgeInsets.all(8.0), - // child: Text( - // '5', - // style: Theme.of(context).textTheme.titleMedium!.copyWith( - // color: Colors.white, - // ), - // ), - // ) - // .background() // - // .build(Ovel.circle( - // color: Colors.blue.shade900, - // elevation: 12, - // shadowColor: Colors.white, - // )), - // ), - ], - ), - ), - ); - } -} - -class ClipExample extends StatelessWidget { - const ClipExample({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: const EdgeInsets.all(8.0), - child: Center( - child: Column( - children: [ - Material( - color: Colors.blue, - shape: CircleBorder(), - child: Align( - alignment: Alignment.bottomLeft, child: Text('Fhis is me')), - ), - Padding( - padding: const EdgeInsets.all(18.0), - child: Text('Shis is me'), - ) - .background(clipBehavior: Clip.hardEdge) // - .buildSquare(), - - Text('This is me').background().buildCircle(), - - Material( - color: Colors.red, - child: InkWell( - onTap: () => print('Tap'), - child: SizedBox( - width: double.infinity, - height: 100, - child: Center(child: Text('TAP')), - ), - ), - ) - .background( - clipBehavior: Clip.antiAlias, - ) - .buildCapsule( - // width: double.infinity, - // height: 100, - ), - Expanded( - child: Text('This is me') - .background(alignment: Alignment.center) - .build(Oval.circle()), - ), - // - // - // RRectangle.capsule( - // clipBehavior: Clip.antiAlias, - // elevation: 5, - // color: GradientColor( - // LinearGradient(colors: [Colors.red, Colors.blue]), - // ), - // child: Rectangle( - // color: Colors.yellow, - // height: 100, - // ), - // ).frame().buildRect(), - // Ovel( - // clipBehavior: Clip.hardEdge, - // elevation: 5, - // color: GradientColor( - // LinearGradient(colors: [Colors.red, Colors.blue]), - // ), - // child: Text('Hi there All'), - // ), - // Ovel( - // clipBehavior: Clip.antiAlias, - // elevation: 5, - // color: GradientColor( - // LinearGradient(colors: [Colors.red, Colors.blue]), - // ), - // child: Text('Hi there All'), - // ), - // Ovel( - // clipBehavior: Clip.antiAliasWithSaveLayer, - // elevation: 5, - // color: GradientColor( - // LinearGradient(colors: [Colors.red, Colors.blue]), - // ), - // child: Text('Hi there All'), - // ), - ], - ), - ), - ), - ); - } -} diff --git a/example/pubspec.lock b/example/pubspec.lock index 1ad2468..5972960 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -5,49 +5,56 @@ packages: dependency: transitive description: name: async - url: "https://pub.dartlang.org" + sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c" + url: "https://pub.dev" source: hosted - version: "2.9.0" + version: "2.11.0" boolean_selector: dependency: transitive description: name: boolean_selector - url: "https://pub.dartlang.org" + sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66" + url: "https://pub.dev" source: hosted - version: "2.1.0" + version: "2.1.1" characters: dependency: transitive description: name: characters - url: "https://pub.dartlang.org" + sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605" + url: "https://pub.dev" source: hosted - version: "1.2.1" + version: "1.3.0" clock: dependency: transitive description: name: clock - url: "https://pub.dartlang.org" + sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf + url: "https://pub.dev" source: hosted version: "1.1.1" collection: dependency: transitive description: name: collection - url: "https://pub.dartlang.org" + sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c" + url: "https://pub.dev" source: hosted - version: "1.16.0" + version: "1.17.1" cupertino_icons: dependency: "direct main" description: name: cupertino_icons - url: "https://pub.dartlang.org" + sha256: e35129dc44c9118cee2a5603506d823bab99c68393879edb440e0090d07586be + url: "https://pub.dev" source: hosted version: "1.0.5" fake_async: dependency: transitive description: name: fake_async - url: "https://pub.dartlang.org" + sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78" + url: "https://pub.dev" source: hosted version: "1.3.1" flutter: @@ -59,7 +66,8 @@ packages: dependency: "direct dev" description: name: flutter_lints - url: "https://pub.dartlang.org" + sha256: aeb0b80a8b3709709c9cc496cdc027c5b3216796bc0af0ce1007eaf24464fd4c + url: "https://pub.dev" source: hosted version: "2.0.1" flutter_test: @@ -67,48 +75,61 @@ packages: description: flutter source: sdk version: "0.0.0" + js: + dependency: transitive + description: + name: js + sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3 + url: "https://pub.dev" + source: hosted + version: "0.6.7" lints: dependency: transitive description: name: lints - url: "https://pub.dartlang.org" + sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593" + url: "https://pub.dev" source: hosted version: "2.0.1" matcher: dependency: transitive description: name: matcher - url: "https://pub.dartlang.org" + sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb" + url: "https://pub.dev" source: hosted - version: "0.12.12" + version: "0.12.15" material_color_utilities: dependency: transitive description: name: material_color_utilities - url: "https://pub.dartlang.org" + sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724 + url: "https://pub.dev" source: hosted - version: "0.1.5" + version: "0.2.0" meta: dependency: transitive description: name: meta - url: "https://pub.dartlang.org" + sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3" + url: "https://pub.dev" source: hosted - version: "1.8.0" + version: "1.9.1" path: dependency: transitive description: name: path - url: "https://pub.dartlang.org" + sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917" + url: "https://pub.dev" source: hosted - version: "1.8.2" + version: "1.8.3" shape_builder: dependency: "direct main" description: path: ".." relative: true source: path - version: "0.0.1" + version: "0.0.2" sky_engine: dependency: transitive description: flutter @@ -118,51 +139,58 @@ packages: dependency: transitive description: name: source_span - url: "https://pub.dartlang.org" + sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250 + url: "https://pub.dev" source: hosted - version: "1.9.0" + version: "1.9.1" stack_trace: dependency: transitive description: name: stack_trace - url: "https://pub.dartlang.org" + sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5 + url: "https://pub.dev" source: hosted - version: "1.10.0" + version: "1.11.0" stream_channel: dependency: transitive description: name: stream_channel - url: "https://pub.dartlang.org" + sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8" + url: "https://pub.dev" source: hosted - version: "2.1.0" + version: "2.1.1" string_scanner: dependency: transitive description: name: string_scanner - url: "https://pub.dartlang.org" + sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde" + url: "https://pub.dev" source: hosted - version: "1.1.1" + version: "1.2.0" term_glyph: dependency: transitive description: name: term_glyph - url: "https://pub.dartlang.org" + sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84 + url: "https://pub.dev" source: hosted version: "1.2.1" test_api: dependency: transitive description: name: test_api - url: "https://pub.dartlang.org" + sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb + url: "https://pub.dev" source: hosted - version: "0.4.12" + version: "0.5.1" vector_math: dependency: transitive description: name: vector_math - url: "https://pub.dartlang.org" + sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803" + url: "https://pub.dev" source: hosted - version: "2.1.2" + version: "2.1.4" sdks: - dart: ">=2.18.2 <3.0.0" + dart: ">=3.0.0-0 <4.0.0" flutter: ">=1.17.0" diff --git a/example/test/flutter_logo_image.png b/example/test/flutter_logo_image.png new file mode 100644 index 0000000..78463db Binary files /dev/null and b/example/test/flutter_logo_image.png differ diff --git a/lib/shape_builder.dart b/lib/shape_builder.dart index 6a8ef0b..71f91c7 100644 --- a/lib/shape_builder.dart +++ b/lib/shape_builder.dart @@ -1,15 +1,8 @@ library shape_builder; -export 'src/base_render_shape.dart' show Rectangle, RRectangle, Oval; -export 'src/shape_builder.dart' show ShapeBuilderX, Resize; - +export 'src/base_render_shape.dart' + show Rectangle, RRectangle, Oval, ShapeBuilderX, Colorize; export 'src/gradient_color.dart' show ColorWithBlendMode, ColorWithGradient, BoxShadowWithElevation; -export 'src/colorize.dart'; export 'src/paint_style.dart' show PaintStyle; -export 'src/layout_arranger/inherited_layout.dart' show InheritedLayout; -export 'src/layout_arranger/inherited_size.dart' show InheritedSize; -export 'src/layout_arranger/query.dart' show Query; -export 'src/layout_arranger/scaffold_inherited_layout.dart' - show ScaffoldInheritedLayout; -export 'src/flex_spacer.dart' show FlexSpacer; +export 'src/stack_render_shape.dart' show MyStack; diff --git a/lib/src/base_render_shape.dart b/lib/src/base_render_shape.dart index 3078899..c9942bd 100644 --- a/lib/src/base_render_shape.dart +++ b/lib/src/base_render_shape.dart @@ -4,45 +4,48 @@ import 'dart:math'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; -import 'package:shape_builder/src/paint_style.dart'; - -import 'gradient_color.dart'; +import 'package:shape_builder/shape_builder.dart'; part 'base_single_child_render_shape.dart'; +part 'colorize.dart'; part 'oval.dart'; part 'rectangle.dart'; part 'rounded_rectangle.dart'; +part 'shape_builder.dart'; abstract class _BaseRenderShape extends RenderAligningShiftedBox { _BaseRenderShape({ required double? width, required double? height, + required bool shouldExpand, required Color? color, required List boxShadow, required Clip clipBehavior, - required bool clipShrink, + required bool shrinkToClippedSize, required this.buildContext, - required bool isOverlay, + required bool childIsInTheForeground, required AlignmentGeometry alignment, required DecorationImage? decorationImage, required double? squareSide, required Size? imageSize, required PaintStyle? paintStyle, + required this.isConstraintTransparent, }) : _color = color, _width = width, _height = height, + _shouldExpand = shouldExpand, _boxShadow = boxShadow, _clipBehavior = clipBehavior, - _clipShrink = clipShrink, - _isOverlay = isOverlay, + _shrinkToClippedSize = shrinkToClippedSize, + _childIsInTheForeground = childIsInTheForeground, _alignment = alignment, - _decorationImage = decorationImage, _squareSide = squareSide, _imageSize = imageSize, _paintStyle = paintStyle, super(textDirection: TextDirection.ltr); final BuildContext buildContext; + final bool isConstraintTransparent; List _boxShadow; set boxShadow(List value) { @@ -80,14 +83,14 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { markNeedsPaint(); } - bool _clipShrink; - set clipShrink(bool value) { - if (value == _clipShrink) { + bool _shrinkToClippedSize; + set shrinkToClippedSize(bool value) { + if (value == _shrinkToClippedSize) { return; } - _clipShrink = value; + _shrinkToClippedSize = value; resetPainters(); - markNeedsPaint(); + markNeedsLayout(); } double? _width; @@ -97,7 +100,7 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { } _width = value; resetPainters(); - markNeedsPaint(); + markNeedsLayout(); } double? _height; @@ -107,15 +110,25 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { } _height = value; resetPainters(); + markNeedsLayout(); + } + + bool _shouldExpand; + set shouldExpand(bool value) { + if (value == _shouldExpand) { + return; + } + _shouldExpand = value; + resetPainters(); markNeedsPaint(); } - bool _isOverlay; - set isOverlay(bool value) { - if (value == _isOverlay) { + bool _childIsInTheForeground; + set childIsInTheForeground(bool value) { + if (value == _childIsInTheForeground) { return; } - _isOverlay = value; + _childIsInTheForeground = value; resetPainters(); markNeedsPaint(); } @@ -142,17 +155,6 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { markNeedsPaint(); } - DecorationImage? _decorationImage; - set decorationImage(DecorationImage? value) { - if (value == _decorationImage) { - return; - } - _decorationImage = value; - - resetPainters(); - markNeedsPaint(); - } - double? _squareSide; set squareSide(double? value) { if (value == _squareSide) { @@ -173,8 +175,8 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { markNeedsPaint(); } - double offsetX = 0.0; - double offsetY = 0.0; + double centerX = 0.0; + double centerY = 0.0; _ShapePainter? _painter; @@ -213,6 +215,15 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { BoxConstraints c, { required bool parentUseSize, }) { + if (isConstraintTransparent) { + assert(child != null); + child!.layout(c, parentUsesSize: true); + return child!.size; + } + _width ??= _shouldExpand ? double.infinity : _width; + _height ??= _shouldExpand ? double.infinity : _height; + _squareSide ??= + _squareSide != null && _shouldExpand ? double.infinity : _squareSide; var width = c.hasTightWidth ? c.minWidth : _width; var height = c.hasTightHeight ? c.minHeight : _height; Size? drySize; @@ -223,56 +234,27 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { _imageSize!.height != -1 ? _imageSize!.height : height ?? c.maxHeight, ), ); - - // if (_squareSide != null && !c.isTight) { - // dd = Size.square( - // c.hasTightWidth - // ? c.maxWidth - // : c.hasTightHeight - // ? c.maxHeight - // : dd.shortestSide, - // ); - // } - - // var constraints = c.tighten( - // width: dd.width, - // height: dd.height, - // ); - - // final w = _imageSize!.width == -1 - // ? constraints.maxWidth - // : min(_imageSize!.width, c.maxWidth); - // final h = _imageSize!.height == -1 - // ? constraints.maxHeight - // : min(_imageSize!.height, c.maxHeight); child!.layout( - // _imageSize == const Size(-1, -1) || true - // ? BoxConstraints( - // minWidth: w, - // maxWidth: w, - // minHeight: h, - // maxHeight: h, - // ) - // : - BoxConstraints.tight(dd), + _imageSize == const Size(-1, -1) + ? dd.isFinite + ? BoxConstraints.tight(dd) + : BoxConstraints.loose(dd) // Test me + : BoxConstraints( + maxWidth: _imageSize!.width != -1 ? dd.width : c.maxWidth, + minWidth: width != null ? dd.width : c.minWidth, + maxHeight: _imageSize!.height != -1 ? dd.height : c.maxHeight, + minHeight: height != null ? dd.height : c.minHeight, + ), parentUsesSize: true, ); drySize = child!.size; - // if (width == null) { - // width = drySize.width; - // _imageSize = Size(width, _imageSize!.height); - // } - // if (height == null) { - // height = drySize.height; - // _imageSize = Size(_imageSize!.width, height); - // } if (_imageSize == const Size(-1, -1)) { sizeToPaint = drySize; } else { final widthFactor = _imageSize!.width == -1 ? 1 : drySize.width / _imageSize!.width; - final heightFactor = - _imageSize!.height == -1 ? 1 : drySize.height / _imageSize!.height; + // final heightFactor = + // _imageSize!.height == -1 ? 1 : drySize.height / _imageSize!.height; sizeToPaint = Size( _width != null ? _width! * widthFactor : drySize.width, _height != null ? _height! * widthFactor : drySize.height, @@ -288,8 +270,7 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { } } } else { - var dd = c - .constrain(Size(width ?? double.infinity, height ?? double.infinity)); + var dd = c.constrain(Size(width ?? 0.0, height ?? 0.0)); if (_squareSide != null && !c.isTight) { dd = Size.square( @@ -339,7 +320,7 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { ); this.drySize = drySize; - return _clipBehavior == Clip.none || !_clipShrink + return _clipBehavior == Clip.none || !_shrinkToClippedSize ? drySize : Size( c.hasTightWidth ? c.minWidth : sizeToPaint.width, @@ -364,6 +345,10 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { @override void paint(PaintingContext context, Offset offset) { if (size == Size.zero) return; + if (isConstraintTransparent) { + context.paintChild(child!, offset); + return; + } final effectiveRect = getEffectiveRect(offset); bool recreate = _painter == null || effectiveRect != _painter!.effectiveRect; @@ -396,29 +381,21 @@ abstract class _BaseRenderShape extends RenderAligningShiftedBox { Rect getEffectiveRect(Offset offset) { double width = sizeToPaint.width; double height = sizeToPaint.height; - // print(child!.size); - // final s = _clipBehavior == Clip.none ? size : (child?.size ?? size); - // final s = _clipBehavior == Clip.none ? size : drySize; - final s = size; _resolvedAlignment = _alignment.resolve(Directionality.maybeOf(buildContext)); - final x = _resolvedAlignment!.x; - offsetX = (s.width * x + s.width + -x.sign * width) / 2; - final y = _resolvedAlignment!.y; - offsetY = (s.height * y + s.height - y.sign * height) / 2; - - if (child != null && _clipShrink) { + if (child != null && _shrinkToClippedSize) { alignChild(); } - return Rect.fromCenter( - center: offset + Offset(offsetX, offsetY), - // center: offset, - width: width, - height: height, + final rect = _resolvedAlignment!.inscribe( + Size(width, height), + Rect.fromLTWH(offset.dx, offset.dy, size.width, size.height), ); + centerX = rect.center.dx - offset.dx; + centerY = rect.center.dy - offset.dy; + return rect; } } @@ -442,28 +419,30 @@ class _ShapePainter { } painter.shader = (color as ColorWithGradient).gradient.createShader(effectiveRect); - } else { - if (color is ColorWithBlendMode) { + } else if (color is ColorWithBlendMode) { + painter.color = (color as ColorWithBlendMode).blendColor; + if ((color as ColorWithBlendMode).blendMode != null) { painter.blendMode = (color as ColorWithBlendMode).blendMode!; } + } else { painter.color = color; - if (paintStyle?.style != null) { - painter.style = paintStyle!.style!; - } - if (paintStyle?.strokeWidth != null) { - painter.strokeWidth = paintStyle!.strokeWidth!; - } + } + if (paintStyle?.style != null) { + painter.style = paintStyle!.style!; + } + if (paintStyle?.strokeWidth != null) { + painter.strokeWidth = paintStyle!.strokeWidth!; + } - if (paintStyle?.strokeCap != null) { - painter.strokeCap = paintStyle!.strokeCap!; - } + if (paintStyle?.strokeCap != null) { + painter.strokeCap = paintStyle!.strokeCap!; + } - if (paintStyle?.strokeMiterLimit != null) { - painter.strokeMiterLimit = paintStyle!.strokeMiterLimit!; - } - if (paintStyle?.strokeJoin != null) { - painter.strokeJoin = paintStyle!.strokeJoin!; - } + if (paintStyle?.strokeMiterLimit != null) { + painter.strokeMiterLimit = paintStyle!.strokeMiterLimit!; + } + if (paintStyle?.strokeJoin != null) { + painter.strokeJoin = paintStyle!.strokeJoin!; } } @@ -578,40 +557,33 @@ class _ShapePainter { DecorationImagePainter? _imagePainter; void _paintBackgroundImageOrChild(PaintingContext context) { - final image = renderShape._decorationImage; final child = renderShape.child; - if (image == null) { - if (child != null) { - if (renderShape._clipShrink) { - final BoxParentData childParentData = - child.parentData! as BoxParentData; - context.paintChild(child, childParentData.offset + offset); - return; - } - context.paintChild(child, offset); - } + if (child == null) { return; } - _imagePainter ??= image.createPainter(onChanged); - _imagePainter!.paint( - context.canvas, - effectiveRect, - pathToPaint, - createLocalImageConfiguration( - renderShape.buildContext, - size: renderShape.size, - ), - ); + if (renderShape._shrinkToClippedSize) { + final BoxParentData childParentData = child.parentData! as BoxParentData; + context.paintChild(child, childParentData.offset + offset); + return; + } + context.paintChild(child, offset); } void dispose() { _imagePainter?.dispose(); } - void _performPaint(PaintingContext context, Offset _) { - _paintShadows(context.canvas); - if (renderShape._isOverlay) { + void _performPaint( + PaintingContext context, + Offset _, [ + bool paintShadow = false, + ]) { + if (paintShadow) { + // TODO Test me + _paintShadows(context.canvas); + } + if (!renderShape._childIsInTheForeground) { _paintBackgroundImageOrChild(context); } @@ -628,15 +600,16 @@ class _ShapePainter { context.canvas.drawPath(pathToPaint!, painter); } - if (!renderShape._isOverlay) { + if (renderShape._childIsInTheForeground) { _paintBackgroundImageOrChild(context); } } void paint(PaintingContext context, Offset offset) { if (renderShape._clipBehavior == Clip.none) { - _performPaint(context, offset); + _performPaint(context, offset, true); } else { + _paintShadows(context.canvas); if (rectToPaint != null) { context.clipRectAndPaint( rectToPaint!, diff --git a/lib/src/base_single_child_render_shape.dart b/lib/src/base_single_child_render_shape.dart index 1fe1cbf..e2c9c68 100644 --- a/lib/src/base_single_child_render_shape.dart +++ b/lib/src/base_single_child_render_shape.dart @@ -1,65 +1,165 @@ part of 'base_render_shape.dart'; +bool shouldExpandImage(Widget? child, double? width, double? height) { + if (child is! Image) return false; + if (child.width == null && width == null || + child.height == null && height == null) { + return false; + } + return child.width != null || child.height != null; +} + +Widget _wrapWithImage(Image child, AlignmentGeometry alignment) => Image( + image: child.image, + alignment: alignment, + centerSlice: child.centerSlice, + color: child.color, + colorBlendMode: child.colorBlendMode, + errorBuilder: child.errorBuilder, + excludeFromSemantics: child.excludeFromSemantics, + filterQuality: child.filterQuality, + fit: child.fit, + frameBuilder: child.frameBuilder, + gaplessPlayback: child.gaplessPlayback, + height: child.height, + isAntiAlias: child.isAntiAlias, + key: child.key, + loadingBuilder: child.loadingBuilder, + matchTextDirection: child.matchTextDirection, + opacity: child.opacity, + repeat: child.repeat, + semanticLabel: child.semanticLabel, + width: child.width, + ); + +// Widget _wrapWithInkWell(InkWell inkWell, Widget child, double? width, +// double? height, AlignmentGeometry alignment) { +// final ink = InkResponse( +// containedInkWell: true, +// highlightShape: BoxShape.rectangle, +// key: inkWell.key, +// onTap: inkWell.onTap, +// onTapDown: inkWell.onTapDown, +// onTapUp: inkWell.onTapUp, +// onTapCancel: inkWell.onTapCancel, +// onDoubleTap: inkWell.onDoubleTap, +// onLongPress: inkWell.onLongPress, +// onHighlightChanged: inkWell.onHighlightChanged, +// onHover: inkWell.onHover, +// mouseCursor: inkWell.mouseCursor, +// radius: inkWell.radius, +// borderRadius: inkWell.borderRadius, +// customBorder: inkWell.customBorder, +// focusColor: inkWell.focusColor, +// hoverColor: inkWell.hoverColor, +// highlightColor: inkWell.highlightColor, +// overlayColor: inkWell.overlayColor, +// splashColor: inkWell.splashColor, +// splashFactory: inkWell.splashFactory, +// enableFeedback: inkWell.enableFeedback, +// excludeFromSemantics: inkWell.excludeFromSemantics, +// focusNode: inkWell.focusNode, +// canRequestFocus: inkWell.canRequestFocus, +// onFocusChange: inkWell.onFocusChange, +// autofocus: inkWell.autofocus, +// statesController: inkWell.statesController, +// child: child is Image +// ? null +// : Align( +// widthFactor: 1, +// heightFactor: 1, +// alignment: alignment, +// child: child, +// ), +// ); +// return Material( +// type: MaterialType.transparency, +// child: ConstrainedBox( +// constraints: BoxConstraints( +// minWidth: width ?? 0.0, +// minHeight: height ?? 0.0, +// ), +// child: child is Image +// ? Builder( +// builder: (context) { +// return Ink.image( +// image: child.image, +// fit: child.fit, +// centerSlice: child.centerSlice, +// alignment: alignment, +// width: child.width, +// height: child.height, +// repeat: child.repeat, +// onImageError: child.errorBuilder != null +// ? (e, s) => child.errorBuilder!(context, e, s) +// : null, +// child: ink, +// ); +// }, +// ) +// : ink, +// ), +// ); +// } + class _BaseSingleChildRenderObjectShape extends SingleChildRenderObjectWidget { final Color? color; final double? width, height, squareSide; + final bool shouldExpand; final List shadow; final Clip clipBehavior; - final bool clipShrink; - final bool isOverlay; + final bool shrinkToClippedSize; + final bool childIsInTheForeground; final AlignmentGeometry alignment; final DecorationImage? decorationImage = null; final Size? imageSize; final PaintStyle? paintStyle; + final bool isConstraintTransparent; + final BoxFit fit; _BaseSingleChildRenderObjectShape({ required this.color, required this.width, required this.height, required this.squareSide, + required this.shouldExpand, required this.shadow, - required this.isOverlay, + required this.childIsInTheForeground, required this.clipBehavior, - required this.clipShrink, + required this.shrinkToClippedSize, required this.alignment, required this.paintStyle, required Widget? child, + required this.isConstraintTransparent, required super.key, + required this.fit, }) : imageSize = child is Image && clipBehavior != Clip.none ? Size((child).width ?? -1, child.height ?? -1) : null, super( - child: child is Image - ? Image( - image: child.image, - alignment: alignment, - centerSlice: child.centerSlice, - color: child.color, - colorBlendMode: child.colorBlendMode, - errorBuilder: child.errorBuilder, - excludeFromSemantics: child.excludeFromSemantics, - filterQuality: child.filterQuality, - fit: child.fit, - frameBuilder: child.frameBuilder, - gaplessPlayback: child.gaplessPlayback, - height: child.height, - isAntiAlias: child.isAntiAlias, - key: child.key, - loadingBuilder: child.loadingBuilder, - matchTextDirection: child.matchTextDirection, - opacity: child.opacity, - repeat: child.repeat, - semanticLabel: child.semanticLabel, - width: child.width, - ) - : child != null - ? Align( - widthFactor: 1, - heightFactor: 1, - alignment: alignment, - child: child, - ) - : null, + child: isConstraintTransparent + ? child + : child is Image + ? _wrapWithImage(child, alignment) + : child != null + ? fit != BoxFit.none + ? SizedBox( + width: width, + height: height, + child: FittedBox( + fit: fit, + alignment: alignment, + clipBehavior: clipBehavior, + child: child, + ), + ) + : Align( + widthFactor: 1, + heightFactor: 1, + alignment: alignment, + child: child, + ) + : const SizedBox.shrink(), ); @override @@ -68,11 +168,11 @@ class _BaseSingleChildRenderObjectShape extends SingleChildRenderObjectWidget { ..color = color ..width = width ..height = height + ..shouldExpand = shouldExpand ..clipBehavior = clipBehavior - ..clipShrink = clipShrink - ..isOverlay = isOverlay + ..shrinkToClippedSize = shrinkToClippedSize + ..childIsInTheForeground = childIsInTheForeground ..boxShadow = shadow - ..decorationImage = decorationImage ..alignment = alignment ..imageSize = imageSize ..paintStyle = paintStyle; @@ -85,7 +185,8 @@ class _BaseSingleChildRenderObjectShape extends SingleChildRenderObjectWidget { properties.add(DiagnosticsProperty('width', width)); properties.add(DiagnosticsProperty('height', height)); properties.add(DiagnosticsProperty>('shadow', shadow)); - properties.add(DiagnosticsProperty('clipShrink', clipShrink)); + properties.add( + DiagnosticsProperty('shrinkToClippedSize', shrinkToClippedSize)); properties.add(DiagnosticsProperty('clipBehavior', clipBehavior)); properties .add(DiagnosticsProperty('alignment', alignment)); diff --git a/lib/src/colorize.dart b/lib/src/colorize.dart index bd6b30a..fa1e046 100644 --- a/lib/src/colorize.dart +++ b/lib/src/colorize.dart @@ -1,7 +1,4 @@ -import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; - -import 'gradient_color.dart'; +part of 'base_render_shape.dart'; class Colorize extends SingleChildRenderObjectWidget { /// Creates a widget that paints its area with the specified [Color]. diff --git a/lib/src/flex_spacer.dart b/lib/src/flex_spacer.dart deleted file mode 100644 index 7fdb41b..0000000 --- a/lib/src/flex_spacer.dart +++ /dev/null @@ -1,49 +0,0 @@ -import 'package:flutter/material.dart'; -import 'shape_builder.dart'; - -class FlexSpacer extends StatelessWidget { - const FlexSpacer._(this.space, num multiplier, bool shouldExpand) - : _multiplier = multiplier, - _shouldExpand = shouldExpand; - const FlexSpacer([this.space = 8.0]) - : _multiplier = 1.0, - _shouldExpand = false; - - const FlexSpacer.expand([this.space = 8]) - : _multiplier = 1.0, - _shouldExpand = true; - final bool _shouldExpand; - final double space; - final num _multiplier; - int get f => _multiplier * space ~/ 8; - - static bool _debugSpacer = false; - static set debugSpacer(bool value) { - assert(() { - _debugSpacer = value; - return true; - }()); - } - - @override - Widget build(BuildContext context) { - Widget child = const SizedBox(); - if (_debugSpacer) { - child = const SizedBox( - child: Placeholder(), - ).colorize(Colors.blueGrey.withOpacity(0.4)); - } - return Resize( - child: child, - fitTheShortestSide: false, - flex: f + 1, - shouldExpand: _shouldExpand, - ).fixed( - height: _multiplier * space, - width: _multiplier * space, - ); - } - - FlexSpacer operator *(num operand) => - FlexSpacer._(space, _multiplier * operand, _shouldExpand); -} diff --git a/lib/src/gradient_color.dart b/lib/src/gradient_color.dart index 16077e7..0585c54 100644 --- a/lib/src/gradient_color.dart +++ b/lib/src/gradient_color.dart @@ -32,8 +32,10 @@ class ColorWithGradient extends Color { } class ColorWithBlendMode extends Color { - ColorWithBlendMode(Color color, this.blendMode) : super(color.value); - + ColorWithBlendMode(Color color, this.blendMode) + : blendColor = color, + super(color.value); + final Color blendColor; final BlendMode? blendMode; @override diff --git a/lib/src/layout_arranger/fitted_box_render copy.dart b/lib/src/layout_arranger/fitted_box_render copy.dart deleted file mode 100644 index abbbf86..0000000 --- a/lib/src/layout_arranger/fitted_box_render copy.dart +++ /dev/null @@ -1,470 +0,0 @@ -import 'dart:math'; - -import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; - -class MyFittedBox extends SingleChildRenderObjectWidget { - const MyFittedBox({ - required this.width, - required this.height, - this.inheritedFraction = 1.0, - required this.fitTheShortestSide, - super.key, - super.child, - }); - final double? width, height; - final double inheritedFraction; - final bool fitTheShortestSide; - @override - MyRenderFittedBox createRenderObject(BuildContext context) { - return MyRenderFittedBox( - width: width, - height: height, - inheritedFraction: inheritedFraction, - fitTheShortestSide: fitTheShortestSide, - ); - } - - @override - void updateRenderObject( - BuildContext context, MyRenderFittedBox renderObject) { - renderObject - ..width = width - ..height = height - ..fitTheShortestSide = fitTheShortestSide - ..inheritedFraction = inheritedFraction; - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - } -} - -class MyRenderFittedBox extends RenderProxyBox { - MyRenderFittedBox({ - required double? width, - required double? height, - required bool fitTheShortestSide, - required double inheritedFraction, - }) : _width = width, - _height = height, - _fitTheShortestSide = fitTheShortestSide, - _inheritedFraction = inheritedFraction; - - double? _width; - set width(double? value) { - if (value == _width) { - return; - } - _width = value; - // _transform = null; - markNeedsLayout(); - } - - double? _height; - set height(double? value) { - if (value == _height) { - return; - } - _height = value; - - markNeedsLayout(); - } - - double _inheritedFraction; - set inheritedFraction(double value) { - if (value == _width) { - return; - } - _inheritedFraction = value; - // _transform = null; - markNeedsLayout(); - } - - bool _fitTheShortestSide; - set fitTheShortestSide(bool value) { - if (value == _fitTheShortestSide) { - return; - } - _fitTheShortestSide = value; - - markNeedsLayout(); - } - - // TODO(ianh): The intrinsic dimensions of this box are wrong. - - @override - Size computeDryLayout(BoxConstraints constraints) { - if (child != null) { - final w = min(_width ?? double.infinity, constraints.maxWidth); - final h = min(_height ?? double.infinity, constraints.maxHeight); - constraints = BoxConstraints.tight(Size(w, h)); - - final Size childSize = child!.getDryLayout( - constraints.loosen(), - ); - - bool invalidChildSize = false; - assert(() { - if (RenderObject.debugCheckingIntrinsics && - childSize.width * childSize.height == 0.0) { - invalidChildSize = true; - } - return true; - }()); - if (invalidChildSize) { - assert(debugCannotComputeDryLayout( - reason: 'Child provided invalid size of $childSize.', - )); - return Size.zero; - } - return constraints - .constrainSizeAndAttemptToPreserveAspectRatio(childSize); - } else { - return constraints.smallest; - } - } - - BoxConstraints? _constraints; - @override - BoxConstraints get constraints { - if (_constraints != null) return _constraints!; - _constraints = super.constraints; - _width ??= double.infinity; - _height ??= double.infinity; - - _boxFit = _fitTheShortestSide ? BoxFit.contain : BoxFit.fill; - - _boxFit = _width != double.infinity && _height != double.infinity - ? _boxFit - : _width != double.infinity - ? BoxFit.fitWidth - : _height != double.infinity - ? BoxFit.fitHeight - : _boxFit; - final w = _constraints!.constrainWidth(_width!); - final h = _constraints!.constrainHeight(_height!); - - final ss = _fitTheShortestSide && - _width != double.infinity && - _height != double.infinity - ? _constraints!.constrainSizeAndAttemptToPreserveAspectRatio( - Size(_width!, _height!), - ) - : _constraints!.constrainSizeAndAttemptToPreserveAspectRatio( - Size(w, h), - ); - - final RenderFlex? renderFlexParent = - parent is RenderFlex ? (parent as RenderFlex) : null; - - _constraints = BoxConstraints( - minWidth: _width!.isFinite && ss.width.isFinite ? ss.width : 0, - minHeight: _height!.isFinite && ss.height.isFinite ? ss.height : 0, - maxWidth: ss.width.isFinite ? ss.width : double.infinity, - maxHeight: ss.height.isFinite ? ss.height : double.infinity, - ); - - // if (_renderParent == null && - // renderFlexParent != null && - // renderFlexParent.parent is! RenderSliver) { - // _renderParent = renderFlexParent.parent as RenderBox; - // if (_renderParent!.hasSize) { - // final axis = renderFlexParent.direction; - // if (axis == Axis.vertical && - // _constraints!.maxHeight == double.infinity) { - // _constraints = - // _constraints!.copyWith(maxHeight: _renderParent!.size.height); - // } - // if (axis == Axis.horizontal && - // _constraints!.maxWidth == double.infinity) { - // _constraints = - // _constraints!.copyWith(maxWidth: _renderParent!.size.width); - // } - // } - // } - return _constraints!; - } - - Size? _applyLayout(BoxConstraints c) { - try { - child!.layout(c, parentUsesSize: true); - } catch (e) { - print(child!.size); - } - final childSize = child!.size; - final constrainedSize = childSize.isFinite && !childSize.isEmpty - ? constraints.constrainSizeAndAttemptToPreserveAspectRatio(childSize) - : null; - return constrainedSize; - } - - Size? constrainedSize; - @override - void performLayout() { - _constraints = null; - constrainedSize = null; - if (child != null) { - final maxWidth = super.constraints.maxWidth; - final maxHeight = super.constraints.maxHeight; - - if (_inheritedFraction != 1) { - final loosenConstraints = BoxConstraints( - maxWidth: 500, - maxHeight: maxHeight, - ); - constrainedSize = _applyLayout(loosenConstraints); - // print(child!.getMaxIntrinsicHeight(loosenConstraints.maxWidth)); - // print(child!.getMaxIntrinsicWidth(loosenConstraints.maxHeight)); - // print(child!.getDryLayout(BoxConstraints())); - var childSize = child!.size; - var widthRatio = (childSize.width) / constrainedSize!.width; - var heightRatio = (childSize.height) / constrainedSize!.height; - if (widthRatio == 1 || heightRatio == 1) { - // final widthFactor = - // false && (widthRatio != 1 || constrainedSize!.width == 500) - // ? 1 - // : _inheritedFraction; - // final heightFactor = (heightRatio != 1 || - // constrainedSize!.height == constraints.maxHeight) - // ? 1 - // : _inheritedFraction; - constrainedSize = constraints.constrain( - Size( - // constrainedSize!.width * widthFactor, - // constrainedSize!.height * heightFactor, - constrainedSize!.width * _inheritedFraction, - constrainedSize!.height * _inheritedFraction, - ), - ); - - // var widthRatio = (childSize.width) / constrainedSize!.width; - // var heightRatio = (childSize.height) / constrainedSize!.height; - _applyLayout( - constraints.copyWith( - maxWidth: constrainedSize!.width / _inheritedFraction, - maxHeight: constrainedSize!.height / _inheritedFraction, - ), - ); - childSize = child!.size; - _boxFit = BoxFit.contain; - } - // if (widthRatio == 1 && heightRatio != 1) { - // } else if (heightRatio == 1 && widthRatio != 1) { - // _applyLayout( - // constraints.copyWith( - // maxHeight: constraints.maxHeight * widthRatio, - // ), - // ); - // childSize = child!.size; - // _boxFit = BoxFit.contain; - // } else if (widthRatio == 1 && heightRatio == 1) { - - // } - - size = constrainedSize!; - _clearPaintData(); - return; - } - - final loosenConstraints = BoxConstraints( - maxWidth: maxWidth + 0.1, - maxHeight: maxHeight + 0.1, - ); - - constrainedSize = _applyLayout(loosenConstraints); - var childSize = child!.size; - final childCanBeGreaterThenWidth = - childSize.width > loosenConstraints.maxWidth - 0.1; - final childCanBeGreaterThenHeight = - childSize.height > loosenConstraints.maxHeight - 0.1; - - if (constrainedSize == null) { - child!.layout(constraints, parentUsesSize: true); - size = child!.size; - constrainedSize = size; - _clearPaintData(); - return; - } - - if (_fitTheShortestSide) { - _boxFit1 = BoxFit.contain; - } else { - _boxFit1 = BoxFit.fill; - } - if (_boxFit == BoxFit.fitHeight) { - final heightRatio = childSize.height / constrainedSize!.height; - // heightRation less than one means it will scale up the child - // and - // childSize.width greater the the ss.width time the heightRation it - // means it will overflow - - if (heightRatio > 1) { - // TODO find use case - // if (childCanBeGreaterThenHeight) { - // constrainedSize = _applyLayout(constraints); - // } - if (childCanBeGreaterThenWidth) { - constrainedSize = _applyLayout(loosenConstraints.copyWith( - maxWidth: constraints.maxWidth * heightRatio, - )); - _boxFit1 = BoxFit.fill; - } - childSize = child!.size; - } else if (heightRatio < 1 && - childSize.width > constrainedSize!.width * heightRatio) { - _applyLayout( - loosenConstraints.copyWith( - maxWidth: constrainedSize!.width * heightRatio, - ), - ); - childSize = child!.size; - _boxFit1 = BoxFit.fitWidth; - } - } else if (_boxFit == BoxFit.fitWidth) { - final widthRatio = childSize.width / constrainedSize!.width; - if (widthRatio > 1 && childCanBeGreaterThenWidth) { - constrainedSize = _applyLayout(constraints); - childSize = child!.size; - } - // TODO find use CASE - else if (widthRatio < 1 && - childSize.height > constrainedSize!.height * widthRatio) { - // _applyLayout( - // loosenConstraints.copyWith( - // maxHeight: constraints.maxHeight * widthRatio, - // ), - // ); - // child!.layout( - // loosenConstraints.copyWith( - // maxHeight: constraints.maxHeight * widthRatio), - // parentUsesSize: true, - // ); - - childSize = child!.size; - _boxFit1 = BoxFit.contain; - } - } - - size = constrainedSize!; - _clearPaintData(); - } else { - size = constraints.smallest; - } - } - - bool? _hasVisualOverflow; - Matrix4? _transform; - BoxFit _boxFit = BoxFit.contain; - BoxFit _boxFit1 = BoxFit.contain; - - void _clearPaintData() { - _hasVisualOverflow = null; - _transform = null; - } - - void _updatePaintData() { - if (_transform != null) { - return; - } - - if (child == null) { - _hasVisualOverflow = false; - _transform = Matrix4.identity(); - } else { - final Size childSize = child!.size; - final FittedSizes sizes = - applyBoxFit(_boxFit1, childSize, constrainedSize!); - final double scaleX = sizes.destination.width / sizes.source.width; - final double scaleY = sizes.destination.height / sizes.source.height; - - final Rect sourceRect = - Alignment.center.inscribe(sizes.source, Offset.zero & childSize); - final Rect destinationRect = - Alignment.center.inscribe(sizes.destination, Offset.zero & size); - _hasVisualOverflow = sourceRect.width.toInt() < childSize.width.toInt() || - sourceRect.height.toInt() < childSize.height.toInt(); - // assert(!_hasVisualOverflow); - // // if (_hasVisualOverflow!) { - // // print("_hasVisualOverflow"); - // // } - - _transform = Matrix4.translationValues( - destinationRect.left, destinationRect.top, 0.0) - ..scale(scaleX, scaleY, 1.0) - ..translate(-sourceRect.left, -sourceRect.top); - assert(_transform!.storage.every((double value) => value.isFinite)); - } - } - - TransformLayer? _paintChildWithTransform( - PaintingContext context, Offset offset) { - final Offset? childOffset = MatrixUtils.getAsTranslation(_transform!); - if (childOffset == null) { - return context.pushTransform( - needsCompositing, - offset, - _transform!, - super.paint, - oldLayer: layer is TransformLayer ? layer! as TransformLayer : null, - ); - } else { - super.paint(context, offset + childOffset); - } - return null; - } - - @override - void paint(PaintingContext context, Offset offset) { - if (child == null || size.isEmpty || child!.size.isEmpty) { - return; - } - _updatePaintData(); - assert(child != null); - if (_hasVisualOverflow!) { - // throw Exception('******* has visual over flow *****'); - layer = context.pushClipRect( - needsCompositing, - offset, - Offset.zero & size, - _paintChildWithTransform, - oldLayer: layer is ClipRectLayer ? layer! as ClipRectLayer : null, - clipBehavior: Clip.antiAlias, - ); - } else { - layer = _paintChildWithTransform(context, offset); - } - } - - @override - bool hitTestChildren(BoxHitTestResult result, {required Offset position}) { - if (size.isEmpty || (child?.size.isEmpty ?? false)) { - return false; - } - _updatePaintData(); - return result.addWithPaintTransform( - transform: _transform, - position: position, - hitTest: (BoxHitTestResult result, Offset position) { - return super.hitTestChildren(result, position: position); - }, - ); - } - - @override - bool paintsChild(RenderBox child) { - assert(child.parent == this); - return !size.isEmpty && !child.size.isEmpty; - } - - @override - void applyPaintTransform(RenderBox child, Matrix4 transform) { - if (!paintsChild(child)) { - transform.setZero(); - } else { - _updatePaintData(); - transform.multiply(_transform!); - } - } -} diff --git a/lib/src/layout_arranger/fitted_box_render.dart b/lib/src/layout_arranger/fitted_box_render.dart deleted file mode 100644 index 7febdbb..0000000 --- a/lib/src/layout_arranger/fitted_box_render.dart +++ /dev/null @@ -1,473 +0,0 @@ -import 'dart:math'; - -import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; -import 'package:shape_builder/shape_builder.dart'; - -class MyFittedBox extends SingleChildRenderObjectWidget { - const MyFittedBox({ - required this.width, - required this.height, - this.inheritedFraction, - required this.fitTheShortestSide, - this.respectAspectRation = true, - super.key, - super.child, - }); - final double? width, height, inheritedFraction; - - final bool fitTheShortestSide, respectAspectRation; - @override - MyRenderFittedBox createRenderObject(BuildContext context) { - return MyRenderFittedBox( - width: width, - height: height, - inheritedFraction: inheritedFraction, - fitTheShortestSide: fitTheShortestSide, - respectAspectRation: respectAspectRation, - ); - } - - @override - void updateRenderObject( - BuildContext context, MyRenderFittedBox renderObject) { - renderObject - ..width = width - ..height = height - ..fitTheShortestSide = fitTheShortestSide - ..inheritedFraction = inheritedFraction - ..respectAspectRation = respectAspectRation; - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - } -} - -// class MyRenderFittedBox extends MyRenderFittedBoxBase { -// MyRenderFittedBox({ -// required super.width, -// required super.height, -// required super.fitTheShortestSide, -// required super.inheritedFraction, -// }); - -// @override -// void performLayout() { -// if (child != null) { -// if (_inheritedFraction != 1) { -// final loosenConstraints = BoxConstraints( -// maxWidth: 500, -// maxHeight: constraints.maxHeight, -// ); -// late Size childSize; -// if (cachedChildSize != null && -// cachedLoosenConstraints?.maxHeight == loosenConstraints.maxHeight) { -// childSize = cachedChildSize!; -// } else { -// print('************CREATE LaYOUT*************'); -// _constraints = constraints; -// cachedLoosenConstraints = loosenConstraints; - -// child!.layout(cachedLoosenConstraints!, parentUsesSize: true); -// childSize = child!.size; -// cachedChildSize = childSize; -// } - -// constrainedSize = childSize.isFinite && !childSize.isEmpty -// ? constraints -// .constrainSizeAndAttemptToPreserveAspectRatio(childSize) -// : null; - -// if (childSize.width == 500) { -// constrainedSize = constraints.constrain( -// Size( -// constraints.maxWidth, -// constrainedSize!.height * _inheritedFraction * (_width ?? 1), -// ), -// ); - -// final double scaleY = constrainedSize!.height / childSize.height; - -// child!.layout( -// loosenConstraints.copyWith( -// maxWidth: constrainedSize!.width / (scaleY > 0 ? scaleY : 1), -// ), -// parentUsesSize: true, -// ); - -// _boxFit1 = BoxFit.fill; - -// constrainedSize = constrainedSize!; -// } else { -// final constrainedSize1 = constraints.constrain( -// Size( -// constrainedSize!.width * _inheritedFraction * (_width ?? 1), -// constrainedSize!.height * _inheritedFraction * (_width ?? 1), -// ), -// ); - -// constrainedSize = constrainedSize1; -// _boxFit1 = BoxFit.cover; -// } -// } - -// size = constrainedSize!; -// _clearPaintData(); -// } else { -// size = constraints.smallest; -// } -// } -// } - -class MyRenderFittedBox extends MyRenderFittedBoxBase { - MyRenderFittedBox({ - required super.width, - required super.height, - required super.fitTheShortestSide, - required super.inheritedFraction, - required bool respectAspectRation, - }) : _respectAspectRation = respectAspectRation; - - bool _respectAspectRation; - set respectAspectRation(bool value) { - if (value == _respectAspectRation) { - return; - } - _respectAspectRation = value; - - markNeedsLayout(); - } - - @override - void performLayout() { - assert(child != null); - - final maxWidth = _inheritedFraction != null - ? Resize.adaptiveWidth - : this.constraints.maxWidth; - - final loosenConstraints = BoxConstraints( - maxWidth: maxWidth, - maxHeight: this.constraints.maxHeight, - ); - Size childSize; - if (cachedChildSize != null && - cachedLoosenConstraints?.maxHeight == loosenConstraints.maxHeight) { - print('****CachedChildSize****'); - childSize = cachedChildSize!; - } else { - print('************CREATE LaYOUT*************'); - - cachedLoosenConstraints = loosenConstraints; - - child!.layout(cachedLoosenConstraints!, parentUsesSize: true); - childSize = child!.size; - cachedChildSize = childSize; - } - - final constraints = this.constraints.loosen(); - constrainedSize = childSize.isFinite && !childSize.isEmpty - ? constraints.constrainSizeAndAttemptToPreserveAspectRatio(childSize) - : null; - if (childSize.width == maxWidth) { - constrainedSize = childSize.height == constraints.maxHeight - ? childSize - : !_respectAspectRation && childSize.width > constraints.maxWidth - ? constraints.constrain(Size( - (_inheritedFraction ?? 1) * Resize.adaptiveWidth, - childSize.height * (_inheritedFraction ?? 1) * (_width ?? 1), - )) - : constraints.constrainSizeAndAttemptToPreserveAspectRatio( - Size( - constraints.maxWidth, - constrainedSize!.height * - (_inheritedFraction ?? 1) * - (_width ?? 1), - ), - ); - - constrainedSize = constraints.constrain(constrainedSize!); - - final double scaleY = constrainedSize!.height / childSize.height; - - child!.layout( - loosenConstraints.copyWith( - maxWidth: constrainedSize!.width / (scaleY > 0 ? scaleY : 1), - maxHeight: constrainedSize!.height / (scaleY > 0 ? scaleY : 1), - ), - parentUsesSize: true, - ); - childSize = child!.size; - - _boxFit1 = BoxFit.cover; - - constrainedSize = constrainedSize!; - } else { - constrainedSize = - constraints.constrainSizeAndAttemptToPreserveAspectRatio( - Size( - constrainedSize!.width * (_inheritedFraction ?? 1) * (_width ?? 1), - constrainedSize!.height * (_inheritedFraction ?? 1) * (_width ?? 1), - ), - ); - if (constrainedSize!.width == constraints.maxWidth) { - if (childSize.width > constraints.maxWidth) { - // child!.layout( - // cachedLoosenConstraints!.copyWith(maxWidth: constraints.maxWidth), - // parentUsesSize: true); - // childSize = child!.size; - // constrainedSize = constraints.constrain(childSize); - cachedChildSize = null; - } else { - // child!.layout( - // cachedLoosenConstraints!.copyWith(maxWidth: constraints.maxWidth), - // parentUsesSize: true); - // childSize = child!.size; - // constrainedSize = constraints.constrain(childSize); - - cachedChildSize = null; - } - } else { - cachedChildSize = null; - } - - _boxFit1 = BoxFit.cover; - // cachedChildSize = null; - } - - size = constrainedSize!; - _clearPaintData(); - } -} - -class MyRenderFittedBoxBase extends RenderProxyBox { - MyRenderFittedBoxBase({ - required double? width, - required double? height, - required bool fitTheShortestSide, - required double? inheritedFraction, - }) : _width = width, - _height = height, - _fitTheShortestSide = fitTheShortestSide, - _inheritedFraction = inheritedFraction; - - double? _width; - set width(double? value) { - if (value == _width) { - return; - } - _width = value; - // _transform = null; - _constraints = null; - markNeedsLayout(); - } - - double? _height; - set height(double? value) { - if (value == _height) { - return; - } - _height = value; - - markNeedsLayout(); - } - - double? _inheritedFraction; - set inheritedFraction(double? value) { - if (value == _width) { - return; - } - _inheritedFraction = value; - // _transform = null; - markNeedsLayout(); - } - - bool _fitTheShortestSide; - set fitTheShortestSide(bool value) { - if (value == _fitTheShortestSide) { - return; - } - _fitTheShortestSide = value; - - markNeedsLayout(); - } - - // TODO(ianh): The intrinsic dimensions of this box are wrong. - - @override - Size computeDryLayout(BoxConstraints constraints) { - if (child != null) { - final w = min(_width ?? double.infinity, constraints.maxWidth); - final h = min(_height ?? double.infinity, constraints.maxHeight); - constraints = BoxConstraints.tight(Size(w, h)); - - final Size childSize = child!.getDryLayout( - constraints.loosen(), - ); - - bool invalidChildSize = false; - assert(() { - if (RenderObject.debugCheckingIntrinsics && - childSize.width * childSize.height == 0.0) { - invalidChildSize = true; - } - return true; - }()); - if (invalidChildSize) { - assert(debugCannotComputeDryLayout( - reason: 'Child provided invalid size of $childSize.', - )); - return Size.zero; - } - return constraints - .constrainSizeAndAttemptToPreserveAspectRatio(childSize); - } else { - return constraints.smallest; - } - } - - BoxConstraints? _constraints; - @override - BoxConstraints get constraints { - return super.constraints; - } - - Size? constrainedSize; - Size? cachedChildSize; - BoxConstraints? cachedLoosenConstraints; - - @override - set child(RenderBox? value) { - cachedLoosenConstraints = null; - super.child = value; - } - - @override - // TODO: implement isRepaintBoundary - bool get isRepaintBoundary => super.isRepaintBoundary; - - bool? _hasVisualOverflow; - Matrix4? _transform; - BoxFit _boxFit = BoxFit.contain; - BoxFit _boxFit1 = BoxFit.contain; - - void _clearPaintData() { - _hasVisualOverflow = null; - _transform = null; - } - - void _updatePaintData() { - if (_transform != null) { - return; - } - - if (child == null) { - _hasVisualOverflow = false; - _transform = Matrix4.identity(); - } else { - final Size childSize = child!.size; - - final FittedSizes sizes = - applyBoxFit(_boxFit1, childSize, constrainedSize!); - final double scaleX = sizes.destination.width / sizes.source.width; - final double scaleY = sizes.destination.height / sizes.source.height; - - // final double scaleX = constrainedSize!.width / childSize.width; - // final double scaleY = constrainedSize!.height / childSize.height; - - final Rect sourceRect = - Alignment.center.inscribe(childSize, Offset.zero & childSize); - final Rect destinationRect = - Alignment.center.inscribe(constrainedSize!, Offset.zero & size); - _hasVisualOverflow = sourceRect.width.toInt() < childSize.width.toInt() || - sourceRect.height.toInt() < childSize.height.toInt(); - // assert(!_hasVisualOverflow); - // // if (_hasVisualOverflow!) { - // // print("_hasVisualOverflow"); - // // } - - // _transform = Matrix4.translationValues( - // destinationRect.left, destinationRect.top, 0.0) - // ..scale(scaleX, scaleY, 1.0) - // // ..translate(-sourceRect.left, -sourceRect.top) - // ; - - _transform = Matrix4.identity()..scale(scaleX, scaleY, 1.0) - // ..translate(-sourceRect.left, -sourceRect.top) - ; - assert(_transform!.storage.every((double value) => value.isFinite)); - } - } - - TransformLayer? _paintChildWithTransform( - PaintingContext context, Offset offset) { - final Offset? childOffset = MatrixUtils.getAsTranslation(_transform!); - if (childOffset == null) { - return context.pushTransform( - needsCompositing, - offset, - _transform!, - super.paint, - oldLayer: layer is TransformLayer ? layer! as TransformLayer : null, - ); - } else { - super.paint(context, offset + childOffset); - } - return null; - } - - @override - void paint(PaintingContext context, Offset offset) { - if (child == null || size.isEmpty || child!.size.isEmpty) { - return; - } - _updatePaintData(); - assert(child != null); - if (_hasVisualOverflow!) { - throw Exception('******* has visual over flow *****'); - layer = context.pushClipRect( - needsCompositing, - offset, - Offset.zero & size, - _paintChildWithTransform, - oldLayer: layer is ClipRectLayer ? layer! as ClipRectLayer : null, - clipBehavior: Clip.antiAlias, - ); - } else { - layer = _paintChildWithTransform(context, offset); - } - } - - @override - bool hitTestChildren(BoxHitTestResult result, {required Offset position}) { - if (size.isEmpty || (child?.size.isEmpty ?? false)) { - return false; - } - _updatePaintData(); - return result.addWithPaintTransform( - transform: _transform, - position: position, - hitTest: (BoxHitTestResult result, Offset position) { - return super.hitTestChildren(result, position: position); - }, - ); - } - - @override - bool paintsChild(RenderBox child) { - assert(child.parent == this); - return !size.isEmpty && !child.size.isEmpty; - } - - @override - void applyPaintTransform(RenderBox child, Matrix4 transform) { - if (!paintsChild(child)) { - transform.setZero(); - } else { - _updatePaintData(); - transform.multiply(_transform!); - } - } -} diff --git a/lib/src/layout_arranger/inherited_layout.dart b/lib/src/layout_arranger/inherited_layout.dart deleted file mode 100644 index 4717e04..0000000 --- a/lib/src/layout_arranger/inherited_layout.dart +++ /dev/null @@ -1,68 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'inherited_size.dart'; -import 'scaffold_inherited_layout.dart'; - -class InheritedLayout extends StatelessWidget { - const InheritedLayout({ - Key? key, - required this.builder, - this.inheritedWidth, - }) : super(key: key); - final Widget Function(BuildContext, InheritedSize) builder; - final double? inheritedWidth; - static double _scaleFactor = 1.0; - static double get scaleFactor => _scaleFactor; - static set scaleFactor(double v) { - _scaleFactor = v; - } - - static InheritedSize of(BuildContext context) { - _InheritedLayoutWidget? r = - context.dependOnInheritedWidgetOfExactType<_InheritedLayoutWidget>(); - if (r == null) { - return ScaffoldInheritedLayout.of(context); - } - - return InheritedSize( - r.size.width, - r.size.height, - ); - } - - @override - Widget build(BuildContext context) { - return LayoutBuilder( - builder: (context, constraints) { - return _InheritedLayoutWidget( - size: InheritedSize( - inheritedWidth ?? constraints.maxWidth, - constraints.maxHeight, - ), - context: context, - child: Builder( - builder: (context) { - final size = of(context); - return builder(context, size); - }, - ), - ); - }, - ); - } -} - -class _InheritedLayoutWidget extends InheritedWidget { - const _InheritedLayoutWidget({ - required super.child, - required this.size, - required this.context, - }) : super(); - final InheritedSize size; - final BuildContext context; - - @override - bool updateShouldNotify(covariant InheritedWidget oldWidget) { - return true; - } -} diff --git a/lib/src/layout_arranger/inherited_size.dart b/lib/src/layout_arranger/inherited_size.dart deleted file mode 100644 index 6646c33..0000000 --- a/lib/src/layout_arranger/inherited_size.dart +++ /dev/null @@ -1,50 +0,0 @@ -import 'dart:math' as math; -import 'package:flutter/rendering.dart'; - -import 'inherited_layout.dart'; - -class InheritedSize extends Size { - InheritedSize(super.width, super.height); - double maxSide( - double fraction, { - double min = 0.0, - double max = double.infinity, - }) { - return _clamp(math.max(width, height), fraction, min, max); - } - - double minSide( - double fraction, { - double min = 0.0, - double max = double.infinity, - }) { - return _clamp(math.min(width, height), fraction, min, max); - } - - double widthFraction( - double fraction, { - double min = 0.0, - double max = double.infinity, - }) { - return _clamp(width, fraction, min, max); - } - - double heightFraction( - double fraction, { - double min = 0.0, - double max = double.infinity, - }) { - return _clamp(height, fraction, min, max); - } - - double _clamp(double value, double fraction, double min, double max) { - // assert(fraction >= 0.0 && fraction <= 1.0); - - return (value * fraction).clamp( - min * InheritedLayout.scaleFactor, max * InheritedLayout.scaleFactor); - } - - InheritedSize copyWith({double? width, double? height}) { - return InheritedSize(width ?? this.width, height ?? this.height); - } -} diff --git a/lib/src/layout_arranger/query.dart b/lib/src/layout_arranger/query.dart deleted file mode 100644 index 0196fe3..0000000 --- a/lib/src/layout_arranger/query.dart +++ /dev/null @@ -1,55 +0,0 @@ -class Query { - final double step, scale; - final double? w0, y0; - final bool isLinear; - - Query.internal({ - required this.step, - required this.scale, - required this.isLinear, - required this.w0, - required this.y0, - }); - - factory Query.constant({ - double step = double.infinity, - double scale = 1, - }) { - return Query.internal( - step: step, - scale: scale, - w0: null, - y0: null, - isLinear: false, - ); - } - - double fn(width, q) { - if (!isLinear) { - final s = step == double.infinity ? 420 : step; - final r = (q.w0 ?? s) * scale; - // print('r linear = $r'); - return r; - } - // print('scale = $scale'); - // print('width = $width'); - // print('q.w0 = ${q.w0}'); - // print('q.y0 = ${q.y0}'); - final r = scale * (width - (q.y0 ?? 0)) + (q.w0 ?? 0); - // print('r = $r'); - return r; - } - - factory Query.linear({ - double step = double.infinity, - double scale = 1, - }) { - return Query.internal( - step: step, - scale: scale, - w0: null, - y0: null, - isLinear: true, - ); - } -} diff --git a/lib/src/layout_arranger/scaffold_inherited_layout.dart b/lib/src/layout_arranger/scaffold_inherited_layout.dart deleted file mode 100644 index 0568404..0000000 --- a/lib/src/layout_arranger/scaffold_inherited_layout.dart +++ /dev/null @@ -1,223 +0,0 @@ -import 'dart:io'; -import 'dart:ui' as ui; - -import 'package:flutter/material.dart'; - -import 'inherited_layout.dart'; -import 'inherited_size.dart'; -import 'query.dart'; - -class ScaffoldInheritedLayout extends StatelessWidget { - factory ScaffoldInheritedLayout.singleChildScrollView({ - Key? key, - required Widget Function(BuildContext, InheritedSize) builder, - - /// Should be the same as [Scaffold.resizeToAvoidBottomInset]. - bool resizeToAvoidBottomInset = true, - - /// Should be the same as [SingleChildScrollView.physics]. - final ScrollPhysics? physics, - }) { - return ScaffoldInheritedLayout( - builder: (context, size) => _SingleChildScrollViewHolder( - mediaQuery: MediaQuery.of(context), - resizeToAvoidBottomInset: resizeToAvoidBottomInset, - physics: physics, - child: builder(context, size), - ), - key: key, - ); - } - const ScaffoldInheritedLayout({ - Key? key, - required this.builder, - }) : super(key: key); - final Widget Function(BuildContext, InheritedSize) builder; - - static final List _query = []; - static set query(List qs) { - for (var i = 0; i < qs.length; i++) { - final q = qs[i]; - if (i == 0) { - _query.add(q); - } else { - final lastQ = _query[i - 1]; - _query.add( - Query.internal( - step: q.step, - scale: q.scale, - isLinear: q.isLinear, - y0: lastQ.step, - w0: lastQ.fn(lastQ.step, lastQ), - ), - ); - } - - if (i == qs.length - 1) { - final q = _query[i]; - - _query.add( - Query.internal( - step: double.infinity, - scale: 1, - y0: q.step, - isLinear: true, - w0: q.fn(q.step, q), - ), - ); - } - } - } - - static InheritedSize of(BuildContext context) { - _ScaffoldInheritedLayoutWidget? r = context - .dependOnInheritedWidgetOfExactType<_ScaffoldInheritedLayoutWidget>(); - - assert(r != null); - - bool isLandscape = (Platform.isAndroid || Platform.isIOS) && - MediaQuery.of(context).orientation == Orientation.landscape; - var width = isLandscape ? r!.size.height : r!.size.width; - final height = isLandscape ? r.size.width : r.size.height; - - if (_query.isNotEmpty) { - for (var i = 0; i < _query.length; i++) { - final q = _query[i]; - - if (width < q.step) { - width = q.fn(width, q); - break; - } - } - } - - late double newWidth; - - newWidth = screenWidthResized?.call(width) ?? width; - - final size = InheritedSize( - newWidth, - screenHeightResized?.call(height) ?? height, - ); - // final size = InheritedSize( - // screenWidthResized != null - // ? screenWidthResized!.call(width) ?? width - // : width, - // screenHeightResized != null - // ? screenHeightResized!.call(height) * height - // : height, - // ); - - return InheritedSize( - size.width * InheritedLayout.scaleFactor, - size.height * InheritedLayout.scaleFactor, - ); - } - - static double Function(double width)? screenWidthResized; - static double Function(double height)? screenHeightResized; - static double adaptiveWidth = 0.0; - @override - Widget build(BuildContext context) { - // assert(Scaffold.maybeOf(context) == null, - // 'ScaffoldInheritedLayout must be in top of Scaffold. Also consider to put SafeAria in top of it'); - return LayoutBuilder( - builder: (context, constraints) { - return _ScaffoldInheritedLayoutWidget( - size: InheritedSize( - constraints.maxWidth, - constraints.maxHeight, - ), - context: context, - child: Builder( - builder: (context) { - final size = of(context); - adaptiveWidth = size.width; - return builder(context, size); - }, - ), - ); - }, - ); - } -} - -class _ScaffoldInheritedLayoutWidget extends InheritedWidget { - const _ScaffoldInheritedLayoutWidget({ - required super.child, - required this.size, - required this.context, - }); - final InheritedSize size; - final BuildContext context; - - @override - bool updateShouldNotify(covariant InheritedWidget oldWidget) { - return true; - } -} - -class _SingleChildScrollViewHolder extends StatefulWidget { - const _SingleChildScrollViewHolder({ - Key? key, - required this.child, - required this.mediaQuery, - required this.resizeToAvoidBottomInset, - this.physics, - }) : super(key: key); - final Widget child; - final MediaQueryData mediaQuery; - - /// Should be the same as [Scaffold.resizeToAvoidBottomInset]. - final bool resizeToAvoidBottomInset; - - /// Should be the same as [SingleChildScrollView.physics]. - final ScrollPhysics? physics; - @override - State<_SingleChildScrollViewHolder> createState() => - _SingleChildScrollViewHolderState(); -} - -class _SingleChildScrollViewHolderState - extends State<_SingleChildScrollViewHolder> { - double? maxHeight; - Size _screenSize = ui.window.physicalSize; - - @override - void didUpdateWidget(covariant _SingleChildScrollViewHolder oldWidget) { - if (_screenSize != ui.window.physicalSize) { - _screenSize = ui.window.physicalSize; - maxHeight = null; - } - - super.didUpdateWidget(oldWidget); - } - - @override - Widget build(BuildContext context) { - return LayoutBuilder( - builder: (context, constraints) { - maxHeight ??= Platform.isAndroid || Platform.isIOS - ? widget.mediaQuery.orientation == Orientation.portrait - ? constraints.maxHeight + - // take the keyboard height into account - (widget.resizeToAvoidBottomInset - ? ui.window.viewInsets.bottom / - ui.window.devicePixelRatio - : 0) - : constraints.maxWidth - : constraints.maxHeight; - return SingleChildScrollView( - physics: widget.physics, - child: ConstrainedBox( - constraints: BoxConstraints( - maxHeight: maxHeight!, - ), - child: widget.child, - ), - ); - }, - ); - ; - } -} diff --git a/lib/src/oval.dart b/lib/src/oval.dart index dd52de4..7d760e0 100644 --- a/lib/src/oval.dart +++ b/lib/src/oval.dart @@ -1,5 +1,40 @@ part of 'base_render_shape.dart'; +Widget _wrapWithInkWell(InkWell inkWell, [Widget? child]) { + final ink = InkResponse( + containedInkWell: true, + highlightShape: BoxShape.rectangle, + key: inkWell.key, + onTap: inkWell.onTap, + onTapDown: inkWell.onTapDown, + onTapUp: inkWell.onTapUp, + onTapCancel: inkWell.onTapCancel, + onDoubleTap: inkWell.onDoubleTap, + onLongPress: inkWell.onLongPress, + onHighlightChanged: inkWell.onHighlightChanged, + onHover: inkWell.onHover, + mouseCursor: inkWell.mouseCursor, + radius: inkWell.radius, + borderRadius: inkWell.borderRadius, + customBorder: inkWell.customBorder, + focusColor: inkWell.focusColor, + hoverColor: inkWell.hoverColor, + highlightColor: inkWell.highlightColor, + overlayColor: inkWell.overlayColor, + splashColor: inkWell.splashColor, + splashFactory: inkWell.splashFactory, + enableFeedback: inkWell.enableFeedback, + excludeFromSemantics: inkWell.excludeFromSemantics, + focusNode: inkWell.focusNode, + canRequestFocus: inkWell.canRequestFocus, + onFocusChange: inkWell.onFocusChange, + autofocus: inkWell.autofocus, + statesController: inkWell.statesController, + child: child, + ); + return Material(type: MaterialType.transparency, child: ink); +} + class Oval extends _BaseSingleChildRenderObjectShape { Oval._({ this.startAngle, @@ -8,15 +43,18 @@ class Oval extends _BaseSingleChildRenderObjectShape { super.color, super.width, super.height, + required super.shouldExpand, super.squareSide, super.child, super.shadow = const [], - super.isOverlay = true, + super.childIsInTheForeground = true, super.clipBehavior = Clip.none, - super.clipShrink = true, + super.shrinkToClippedSize = true, super.alignment = Alignment.center, required super.paintStyle, required this.shouldClosePath, + super.isConstraintTransparent = false, + required super.fit, super.key, }); @@ -28,16 +66,21 @@ class Oval extends _BaseSingleChildRenderObjectShape { Color? color, double? width, double? height, + bool shouldExpand = false, List boxShadow = const [], Widget? child, AlignmentGeometry alignment = Alignment.center, Clip clipBehavior = Clip.none, - bool clipShrink = true, - bool isOverlay = true, + bool shrinkToClippedSize = true, + bool childIsInTheForeground = true, PaintStyle? paintStyle, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, }) { - return Oval._( + final expandImage = shouldExpandImage(child, width, height); + + final widget = Oval._( startAngle: startAngle, swipeAngle: swipeAngle, shouldClosePath: shouldClosePathToCenter, @@ -47,78 +90,174 @@ class Oval extends _BaseSingleChildRenderObjectShape { width: width, height: height, - + shouldExpand: expandImage ? false : shouldExpand, shadow: boxShadow, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, alignment: alignment, paintStyle: paintStyle, + fit: fit, child: child, ); + + final c = expandImage + ? Oval._( + isConstraintTransparent: true, + shouldExpand: false, + shrinkToClippedSize: false, + paintStyle: null, + shouldClosePath: false, + color: Colors.transparent, + fit: BoxFit.none, + child: SizedBox( + width: shouldExpand ? (child as Image).width : null, + child: FittedBox( + child: widget, + ), + ), + ) + : widget; + + // return c; + if (inkWell != null) { + return Oval._( + isConstraintTransparent: true, + shouldExpand: false, + shrinkToClippedSize: false, + paintStyle: null, + shouldClosePath: false, + color: Colors.transparent, + fit: BoxFit.none, + child: MyStack( + children: [ + c, + Oval._( + key: key, + color: Colors.transparent, + width: width, + height: height, + shouldExpand: false, + startAngle: startAngle, + swipeAngle: swipeAngle, + clipBehavior: Clip.antiAlias, + shouldClosePath: shouldClosePathToCenter, + paintStyle: paintStyle, + fit: BoxFit.none, + alignment: alignment, + child: _wrapWithInkWell(inkWell), + ) + ], + ), + ); + } + return c; } - factory Oval.circle({ + static Widget circle({ Color? color, double? radius, + bool shouldExpand = false, double? startAngle, double? swipeAngle, bool? shouldClosePathToCenter, List boxShadow = const [], Widget? child, Clip clipBehavior = Clip.none, - bool clipShrink = true, + bool shrinkToClippedSize = true, AlignmentGeometry alignment = Alignment.center, - bool isOverlay = true, + bool childIsInTheForeground = true, PaintStyle? paintStyle, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, }) { - return Oval._( + radius = radius != null ? radius * 2 : null; + final expandImage = shouldExpandImage(child, radius, radius); + + final widget = Oval._( key: key, color: color, - width: radius != null ? radius * 2 : null, - height: radius != null ? radius * 2 : null, + width: radius, + height: radius, squareSide: radius ?? -1, + shouldExpand: expandImage ? false : shouldExpand, startAngle: startAngle, swipeAngle: swipeAngle, shouldClosePath: shouldClosePathToCenter, shadow: boxShadow, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, alignment: alignment, paintStyle: paintStyle, + fit: fit, child: child, ); + + final c = expandImage + ? SizedBox( + width: shouldExpand ? (child as Image).width : null, + child: FittedBox( + child: widget, + ), + ) + : widget; + if (inkWell != null) { + return MyStack( + children: [ + c, + Oval._( + key: key, + color: Colors.transparent, + width: radius != null ? radius * 2 : null, + height: radius != null ? radius * 2 : null, + squareSide: radius ?? -1, + shouldExpand: false, + startAngle: startAngle, + swipeAngle: swipeAngle, + clipBehavior: Clip.antiAlias, + shouldClosePath: shouldClosePathToCenter, + paintStyle: paintStyle, + fit: BoxFit.none, + alignment: alignment, + child: _wrapWithInkWell(inkWell), + ) + ], + ); + } + return c; } final double? startAngle, swipeAngle; final bool? shouldClosePath; @override RenderObject createRenderObject(BuildContext context) { - return _RenderCircle( + return _RenderOval( color: color, width: width, height: height, + shouldExpand: shouldExpand, side: squareSide, startAngle: startAngle, swipeAngle: swipeAngle, boxShadow: shadow, buildContext: context, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, shouldClosePath: shouldClosePath, alignment: alignment, decorationImage: decorationImage, imageSize: imageSize, paintStyle: paintStyle, + isConstraintTransparent: isConstraintTransparent, ); } @override void updateRenderObject(BuildContext context, RenderObject renderObject) { super.updateRenderObject(context, renderObject); - (renderObject as _RenderCircle) + (renderObject as _RenderOval) ..startAngle = startAngle ..squareSide = squareSide ..swipeAngle = swipeAngle @@ -134,24 +273,26 @@ class Oval extends _BaseSingleChildRenderObjectShape { } } -class _RenderCircle extends _BaseRenderShape { - _RenderCircle({ +class _RenderOval extends _BaseRenderShape { + _RenderOval({ required double? side, required double? startAngle, required double? swipeAngle, required bool? shouldClosePath, required super.width, required super.height, + required super.shouldExpand, required super.color, required super.boxShadow, required super.clipBehavior, - required super.clipShrink, + required super.shrinkToClippedSize, required super.buildContext, - required super.isOverlay, + required super.childIsInTheForeground, required super.alignment, required super.decorationImage, required super.imageSize, required super.paintStyle, + required super.isConstraintTransparent, }) : _startAngle = startAngle, _swipeAngle = swipeAngle, _shouldClosePath = shouldClosePath, @@ -191,9 +332,8 @@ class _RenderCircle extends _BaseRenderShape { @override Rect? getCircleToPaint(Rect rect) { - final start = (_startAngle ?? 0) - pi / 2; final swipe = _swipeAngle ?? (2 * pi - (_startAngle ?? 0)); - if ((swipe - start) < 2 * pi) { + if (swipe < 2 * pi) { return null; } if (_squareSide != null) { @@ -207,11 +347,14 @@ class _RenderCircle extends _BaseRenderShape { Path? getPathToPaint(Rect rect, Offset offset, bool shouldClosePath) { final start = (_startAngle ?? 0) - pi / 2; final swipe = _swipeAngle ?? (2 * pi - (_startAngle ?? 0)); - if ((swipe - start) >= 2 * pi) { + if (swipe >= 2 * pi) { return null; } final path = Path(); + if (swipe == 0) { + return path; + } path.addArc( rect, start, @@ -219,11 +362,11 @@ class _RenderCircle extends _BaseRenderShape { ); if (_shouldClosePath != null) { if (_shouldClosePath!) { - path.lineTo(offset.dx + offsetX, offset.dy + offsetY); + path.lineTo(offset.dx + centerX, offset.dy + centerY); path.close(); } } else if (shouldClosePath) { - path.lineTo(offset.dx + offsetX, offset.dy + offsetY); + path.lineTo(offset.dx + centerX, offset.dy + centerY); path.close(); } return path; diff --git a/lib/src/rectangle.dart b/lib/src/rectangle.dart index 60ac3df..dc5a451 100644 --- a/lib/src/rectangle.dart +++ b/lib/src/rectangle.dart @@ -1,69 +1,111 @@ part of 'base_render_shape.dart'; +/// {@macro rectangle} class Rectangle extends _BaseSingleChildRenderObjectShape { Rectangle._({ super.squareSide, super.color, super.width, super.height, + required super.shouldExpand, super.child, super.shadow = const [], - super.isOverlay = false, + super.childIsInTheForeground = true, super.clipBehavior = Clip.none, - super.clipShrink = true, + super.shrinkToClippedSize = true, super.alignment = Alignment.center, required super.paintStyle, + super.isConstraintTransparent = false, + required super.fit, super.key, }); /// Similar to [Rectangle] but it draws a square of side equal to the give - /// side parameter - factory Rectangle.square({ + /// `side` parameter + /// + /// + static Widget square({ double? side, // + bool shouldExpand = false, Color? color, List boxShadow = const [], PaintStyle? paintStyle, // Widget? child, AlignmentGeometry alignment = Alignment.center, - bool isOverlay = true, + bool childIsInTheForeground = true, // Clip clipBehavior = Clip.none, - bool clipShrink = true, + bool shrinkToClippedSize = true, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, - }) => - Rectangle._( - key: key, - color: color, - shadow: boxShadow, - width: side, - height: side, - squareSide: side ?? -1, - clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, - alignment: alignment, - paintStyle: paintStyle, - child: child, + }) { + final expandImage = shouldExpandImage(child, side, side); + + final widget = Rectangle._( + key: key, + color: color, + shadow: boxShadow, + width: side, + height: side, + squareSide: side ?? -1, + shouldExpand: expandImage ? false : shouldExpand, + clipBehavior: clipBehavior, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, + alignment: alignment, + paintStyle: paintStyle, + fit: fit, + child: child, + ); + + final c = expandImage + ? SizedBox( + width: shouldExpand ? (child as Image).width : null, + child: FittedBox( + child: widget, + ), + ) + : widget; + if (inkWell != null) { + return MyStack( + children: [ + c, + Rectangle._( + key: key, + color: Colors.transparent, + width: side, + height: side, + squareSide: side ?? -1, + shouldExpand: false, + clipBehavior: Clip.antiAlias, + paintStyle: paintStyle, + fit: BoxFit.none, + alignment: alignment, + child: _wrapWithInkWell(inkWell), + ) + ], ); + } + return c; + } + /// {@template rectangle} /// A Rectangle shape. /// /// See: [Rectangle.square], [RRectangle] and [Oval] + + /// ## Shape layout + /// shapes trie to size itself, in the following order: + /// * to honor the `width`, `height`, + /// * to be as big as possible if the parameter `shouldExpand` is set to true, + /// (FILL PARENT), + /// * to ba as small as it child if the latter is defined (WRAP CHILD), + /// * to be as small as possible. /// - /// ## Size of the shape - /// * If no child is provided, The shape tends to expand to fill the max - /// constraints imposed by its parent widget (FILL PARENT). - /// * If child is provided, the shape takes the size of the child - /// (WRAP CHILD) - /// * If width or height are provided, the shape fits the given width and - /// height. - /// - /// You can set the width and/or height to double.infinity so that the - /// shape takes all available space. - /// - /// ## Color, gradient and shadow of the Rectangle + /// ## Color, gradient and shadow of the Shapes /// * The color defaults to Primary color. /// * To use gradient set the color property to [ColorWithGradient] . /// @@ -88,12 +130,12 @@ class Rectangle extends _BaseSingleChildRenderObjectShape { /// return Rectangle( /// width: 100, /// height: 80, - /// boxShadow: BoxShadowWithElevation(3), + /// boxShadow: BoxShadowWithElevation(3), /// ); /// ``` /// ## Painting Style /// You can define the style to use when drawing Shapes by defining the - /// paintStyle parameter. + /// [paintStyle] parameter. /// /// Example: /// ``` @@ -107,45 +149,98 @@ class Rectangle extends _BaseSingleChildRenderObjectShape { /// ); /// ``` /// ## child, alignment and overlay - /// Use the child parameter to define the Widget to be displayed inside the + /// Use the [child] parameter to define the Widget to be displayed inside the /// shape and align it using the alignment parameter. /// /// By default the the child is displayed if the foreground of the shape. But - /// if you set isOverlay parameter to false, the child is displayed in the + /// if you set [childIsInTheForeground] parameter to false, the child is displayed in the /// background /// /// ## Clip the chid /// Use clipBehavior parameter to clip the child to the shape. /// + /// {@endtemplate} factory Rectangle({ double? width, double? height, // + bool shouldExpand = false, Color? color, List boxShadow = const [], PaintStyle? paintStyle, // Widget? child, AlignmentGeometry alignment = Alignment.center, - bool isOverlay = true, + bool childIsInTheForeground = true, // Clip clipBehavior = Clip.none, - bool clipShrink = true, + bool shrinkToClippedSize = true, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, }) { - return Rectangle._( + final expandImage = shouldExpandImage(child, width, height); + + final widget = Rectangle._( key: key, color: color, shadow: boxShadow, width: width, height: height, + shouldExpand: expandImage ? false : shouldExpand, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, alignment: alignment, paintStyle: paintStyle, + fit: fit, child: child, ); + + final c = expandImage + ? Rectangle._( + isConstraintTransparent: true, + shouldExpand: false, + shrinkToClippedSize: false, + paintStyle: null, + color: Colors.transparent, + fit: BoxFit.none, + child: SizedBox( + width: shouldExpand ? (child as Image).width : null, + child: FittedBox( + child: widget, + ), + ), + ) + : widget; + + if (inkWell != null) { + return Rectangle._( + isConstraintTransparent: true, + shouldExpand: false, + shrinkToClippedSize: false, + paintStyle: null, + color: Colors.transparent, + fit: BoxFit.none, + child: MyStack( + children: [ + c, + Rectangle._( + key: key, + color: Colors.transparent, + width: width, + height: height, + shouldExpand: false, + paintStyle: paintStyle, + fit: BoxFit.none, + alignment: alignment, + child: _wrapWithInkWell(inkWell), + ) + ], + ), + ); + } + return c; } @override @@ -156,14 +251,16 @@ class Rectangle extends _BaseSingleChildRenderObjectShape { width: width, height: height, squareSide: squareSide, + shouldExpand: shouldExpand, buildContext: context, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, alignment: alignment, decorationImage: decorationImage, imageSize: imageSize, paintStyle: paintStyle, + isConstraintTransparent: isConstraintTransparent, ); } @@ -185,16 +282,18 @@ class _RenderRectangle extends _BaseRenderShape { required super.squareSide, required super.width, required super.height, + required super.shouldExpand, required super.color, required super.boxShadow, required super.clipBehavior, - required super.clipShrink, + required super.shrinkToClippedSize, required super.buildContext, - required super.isOverlay, + required super.childIsInTheForeground, required super.alignment, required super.decorationImage, required super.imageSize, required super.paintStyle, + required super.isConstraintTransparent, }); // double? _squareSide; diff --git a/lib/src/rounded_rectangle.dart b/lib/src/rounded_rectangle.dart index d815905..fc34b86 100644 --- a/lib/src/rounded_rectangle.dart +++ b/lib/src/rounded_rectangle.dart @@ -10,76 +10,162 @@ class RRectangle extends _BaseSingleChildRenderObjectShape { super.color, super.width, super.height, + required super.shouldExpand, super.child, super.shadow = const [], - super.isOverlay = false, + super.childIsInTheForeground = true, super.clipBehavior = Clip.none, - required super.clipShrink, + required super.shrinkToClippedSize, super.alignment = Alignment.center, required super.paintStyle, + super.isConstraintTransparent = false, + required super.fit, super.key, }); - factory RRectangle.square({ + static Widget square({ BorderRadiusGeometry? borderRadius, BorderRadiusGeometry? outerVBorderRadius, BorderRadiusGeometry? outerHBorderRadius, double? side, + bool shouldExpand = false, Color? color, List boxShadow = const [], Widget? child, AlignmentGeometry alignment = Alignment.center, Clip clipBehavior = Clip.none, - bool clipShrink = true, - bool isOverlay = true, + bool shrinkToClippedSize = true, + bool childIsInTheForeground = true, PaintStyle? paintStyle, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, - }) => - RRectangle._( - key: key, - radius: borderRadius, - outerVRadius: outerVBorderRadius, - outerHRadius: outerHBorderRadius, - color: color, - shadow: boxShadow, - width: side, - height: side, - squareSide: side ?? -1, - clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, - alignment: alignment, - paintStyle: paintStyle, - child: child, + }) { + final expandImage = shouldExpandImage(child, side, side); + + final widget = RRectangle._( + key: key, + radius: borderRadius, + outerVRadius: outerVBorderRadius, + outerHRadius: outerHBorderRadius, + color: color, + shadow: boxShadow, + width: side, + height: side, + squareSide: side ?? -1, + shouldExpand: expandImage ? false : shouldExpand, + clipBehavior: clipBehavior, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, + alignment: alignment, + paintStyle: paintStyle, + fit: fit, + child: child, + ); + + final c = expandImage + ? SizedBox( + width: shouldExpand ? (child as Image).width : null, + child: FittedBox( + child: widget, + ), + ) + : widget; + + if (inkWell != null) { + return MyStack( + children: [ + c, + RRectangle._( + key: key, + color: Colors.transparent, + width: side, + height: side, + squareSide: side ?? -1, + radius: borderRadius, + outerVRadius: outerVBorderRadius, + outerHRadius: outerHBorderRadius, + shouldExpand: false, + clipBehavior: Clip.antiAlias, + shrinkToClippedSize: shrinkToClippedSize, + paintStyle: paintStyle, + fit: BoxFit.none, + alignment: alignment, + child: _wrapWithInkWell(inkWell), + ) + ], ); + } + return c; + } - factory RRectangle.capsule({ + static Widget capsule({ double? width, double? height, + bool shouldExpand = false, Color? color, List boxShadow = const [], Widget? child, AlignmentGeometry alignment = Alignment.center, Clip clipBehavior = Clip.none, - bool clipShrink = true, - bool isOverlay = true, + bool shrinkToClippedSize = true, + bool childIsInTheForeground = true, PaintStyle? paintStyle, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, - }) => - RRectangle._( - key: key, - radius: _RadiusCapsule(), - color: color, - shadow: boxShadow, - width: width, - height: height, - clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, - alignment: alignment, - paintStyle: paintStyle, - child: child, + }) { + final expandImage = shouldExpandImage(child, width, height); + + final widget = RRectangle._( + key: key, + radius: _RadiusCapsule(), + color: color, + shadow: boxShadow, + width: width, + height: height, + shouldExpand: expandImage ? false : shouldExpand, + clipBehavior: clipBehavior, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, + alignment: alignment, + paintStyle: paintStyle, + fit: fit, + child: child, + ); + + final c = expandImage + ? SizedBox( + width: shouldExpand ? (child as Image).width : null, + child: FittedBox( + child: widget, + ), + ) + : widget; + + if (inkWell != null) { + return MyStack( + children: [ + c, + RRectangle._( + key: key, + color: Colors.transparent, + width: width, + height: height, + radius: _RadiusCapsule(), + shouldExpand: false, + clipBehavior: Clip.antiAlias, + shrinkToClippedSize: shrinkToClippedSize, + paintStyle: paintStyle, + fit: BoxFit.none, + alignment: alignment, + child: _wrapWithInkWell(inkWell), + ) + ], ); + } + return c; + } factory RRectangle({ Color? color, @@ -88,31 +174,91 @@ class RRectangle extends _BaseSingleChildRenderObjectShape { List boxShadow = const [], double? width, double? height, + bool shouldExpand = false, BorderRadiusGeometry? borderRadius, Widget? child, AlignmentGeometry alignment = Alignment.center, Clip clipBehavior = Clip.none, - bool clipShrink = true, - bool isOverlay = true, + bool shrinkToClippedSize = true, + bool childIsInTheForeground = true, PaintStyle? paintStyle, + InkWell? inkWell, + BoxFit fit = BoxFit.none, Key? key, }) { - return RRectangle._( + final expandImage = shouldExpandImage(child, width, height); + + final widget = RRectangle._( key: key, color: color, shadow: boxShadow, width: width, height: height, + shouldExpand: expandImage ? false : shouldExpand, radius: borderRadius, outerVRadius: outerVBorderRadius, outerHRadius: outerHBorderRadius, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: !isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, alignment: alignment, paintStyle: paintStyle, + fit: fit, child: child, ); + final c = expandImage + ? RRectangle._( + isConstraintTransparent: true, + shouldExpand: false, + shrinkToClippedSize: false, + paintStyle: null, + color: Colors.transparent, + fit: BoxFit.none, + child: SizedBox( + width: + shouldExpand && expandImage ? (child as Image).width : null, + child: FittedBox( + // fit: fit, + child: widget, + ), + ), + ) + : widget; + + if (inkWell != null) { + return RRectangle._( + isConstraintTransparent: true, + shouldExpand: false, + shrinkToClippedSize: false, + paintStyle: null, + color: Colors.transparent, + fit: BoxFit.none, + child: MyStack( + children: [ + c, + Align( + alignment: alignment, + child: RRectangle._( + key: key, + color: Colors.transparent, + width: width, + height: height, + radius: borderRadius, + outerVRadius: outerVBorderRadius, + outerHRadius: outerHBorderRadius, + shouldExpand: false, + clipBehavior: Clip.antiAlias, + shrinkToClippedSize: shrinkToClippedSize, + paintStyle: paintStyle, + fit: BoxFit.none, + child: _wrapWithInkWell(inkWell), + ), + ), + ], + ), + ); + } + return c; } final BorderRadiusGeometry? radius, outerVRadius, outerHRadius; @@ -125,17 +271,19 @@ class RRectangle extends _BaseSingleChildRenderObjectShape { width: width, height: height, squareSide: squareSide, + shouldExpand: shouldExpand, buildContext: context, radius: radius, outerVRadius: outerVRadius, outerHRadius: outerHRadius, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, alignment: alignment, decorationImage: decorationImage, imageSize: imageSize, paintStyle: paintStyle, + isConstraintTransparent: isConstraintTransparent, ); } @@ -169,16 +317,18 @@ class _RenderRRectangle extends _BaseRenderShape { required super.squareSide, required super.width, required super.height, + required super.shouldExpand, required super.color, required super.boxShadow, required super.clipBehavior, - required super.clipShrink, + required super.shrinkToClippedSize, required super.buildContext, - required super.isOverlay, + required super.childIsInTheForeground, required super.alignment, required super.decorationImage, required super.imageSize, required super.paintStyle, + required super.isConstraintTransparent, }) : _radius = radius, _outerVRadius = outerVRadius, _outerHRadius = outerHRadius; diff --git a/lib/src/shape_builder.dart b/lib/src/shape_builder.dart index a2ea90f..6ee735d 100644 --- a/lib/src/shape_builder.dart +++ b/lib/src/shape_builder.dart @@ -1,107 +1,119 @@ -// ignore_for_file: public_member_api_docs, sort_constructors_first -import 'dart:math'; - -import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; -import 'package:shape_builder/shape_builder.dart'; -import 'package:shape_builder/src/layout_arranger/scaffold_inherited_layout.dart'; +part of 'base_render_shape.dart'; + +class _ShapeBuilderWithInkWell extends ShapeBuilder { + _ShapeBuilderWithInkWell({ + required super.color, + required super.alignment, + required super.child, + required super.shadow, + required super.clipBehavior, + required super.shrinkToClippedSize, + required super.childIsInTheForeground, + required super.shouldExpand, + required super.paintStyle, + required super.fit, + }); -import 'base_render_shape.dart'; -import 'colorize.dart'; -import 'gradient_color.dart'; -import 'layout_arranger/fitted_box_render.dart'; -import 'paint_style.dart'; + ShapeBuilder inkWell(InkWell inkWell) { + _inkWell = inkWell; + return this; + } +} class ShapeBuilder { final Color? color; + final BoxFit fit; final AlignmentGeometry alignment; final Widget child; final List shadow; final PaintStyle? paintStyle; - final Clip clipBehavior; - final bool clipShrink; - final bool isOverlay; + final bool shrinkToClippedSize; + final bool shouldExpand; + final bool childIsInTheForeground; ShapeBuilder({ required this.color, required this.alignment, required this.child, required this.shadow, required this.clipBehavior, - required this.clipShrink, - required this.isOverlay, + required this.shrinkToClippedSize, + required this.childIsInTheForeground, + required this.shouldExpand, required this.paintStyle, + required this.fit, }); + InkWell? _inkWell; + /// Build a Widget Widget build(Widget widget) { - if (widget is! Image) { - widget = Align(alignment: alignment, child: widget); + if (fit != BoxFit.none) { + // TODO } - if (!isOverlay) { - return Stack( - alignment: alignment, - children: [ - child is Image ? SizedBox.expand(child: child) : child, - Positioned( - top: 0, - left: 0, - right: 0, - bottom: 0, - child: widget, - ), - ], - ); + var firstChild = childIsInTheForeground ? widget : child; + var secondChild = !childIsInTheForeground ? widget : child; + if (_inkWell != null) { + if (childIsInTheForeground) { + firstChild = MyStack( + children: [ + firstChild, + _wrapWithInkWell(_inkWell!), + ], + ); + } else { + secondChild = MyStack( + children: [ + secondChild, + _wrapWithInkWell(_inkWell!), + ], + ); + } } - return Stack( + return MyStack( alignment: alignment, - fit: StackFit.loose, + isLastPositioned: false, children: [ - widget, - Positioned( - top: 0, - left: 0, - right: 0, - bottom: 0, - child: Align( - widthFactor: 1, - heightFactor: 1, - alignment: alignment, - child: widget, - ), - ), + firstChild, + secondChild, ], ); } - Rectangle buildRect({ + Widget buildRect({ double? width, double? height, }) { return Rectangle( + color: color, + boxShadow: shadow, width: width, height: height, - alignment: alignment, - boxShadow: shadow, - color: color, + shouldExpand: shouldExpand, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, + alignment: alignment, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } - Rectangle buildSquare([double? side]) { + Widget buildSquare([double? side]) { return Rectangle.square( side: side, + shouldExpand: shouldExpand, alignment: alignment, boxShadow: shadow, color: color, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } @@ -118,18 +130,21 @@ class ShapeBuilder { outerVBorderRadius: outerVBorderRadius, height: height, width: width, + shouldExpand: shouldExpand, boxShadow: shadow, alignment: alignment, color: color, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } - RRectangle buildRSquare({ + Widget buildRSquare({ BorderRadiusGeometry? borderRadius, double? side, BorderRadiusGeometry? outerHBorderRadius, @@ -140,28 +155,34 @@ class ShapeBuilder { outerHBorderRadius: outerHBorderRadius, outerVBorderRadius: outerVBorderRadius, side: side, + shouldExpand: shouldExpand, boxShadow: shadow, alignment: alignment, color: color, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } - RRectangle buildCapsule({double? height, double? width}) { + Widget buildCapsule({double? height, double? width}) { return RRectangle.capsule( height: height, width: width, + shouldExpand: shouldExpand, alignment: alignment, boxShadow: shadow, color: color, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } @@ -176,6 +197,7 @@ class ShapeBuilder { return Oval( height: height, width: width, + shouldExpand: shouldExpand, startAngle: startAngle, swipeAngle: swipeAngle, shouldClosePathToCenter: shouldClosePathToCenter, @@ -183,14 +205,16 @@ class ShapeBuilder { alignment: alignment, color: color, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } - Oval buildCircle({ + Widget buildCircle({ double? radius, double? startAngle, double? swipeAngle, @@ -198,6 +222,7 @@ class ShapeBuilder { }) { return Oval.circle( radius: radius, + shouldExpand: shouldExpand, startAngle: startAngle, swipeAngle: swipeAngle, shouldClosePathToCenter: shouldClosePathToCenter, @@ -205,9 +230,11 @@ class ShapeBuilder { alignment: alignment, color: color, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: isOverlay, + shrinkToClippedSize: shrinkToClippedSize, + childIsInTheForeground: childIsInTheForeground, paintStyle: paintStyle, + inkWell: _inkWell, + fit: fit, child: child, ); } @@ -218,23 +245,27 @@ extension ShapeBuilderX on Widget { /// /// Alignment parameter align the foreground Widget with respect to /// the background widget - ShapeBuilder background({ + _ShapeBuilderWithInkWell background({ Color? color, AlignmentGeometry? alignment, List boxShadow = const [], Clip clipBehavior = Clip.none, - bool clipShrink = true, + bool shrinkToClippedSize = true, + bool shouldExpand = false, PaintStyle? paintStyle, + BoxFit fit = BoxFit.none, }) { - return ShapeBuilder( + return _ShapeBuilderWithInkWell( shadow: boxShadow, alignment: alignment ?? Alignment.center, color: color, child: this, clipBehavior: clipBehavior, - clipShrink: clipShrink, + shrinkToClippedSize: shrinkToClippedSize, + shouldExpand: shouldExpand, paintStyle: paintStyle, - isOverlay: true, + childIsInTheForeground: true, + fit: fit, ); } @@ -242,25 +273,29 @@ extension ShapeBuilderX on Widget { /// /// Alignment parameter align the foreground Widget with respect to /// the background widget - ShapeBuilder foreground({ + _ShapeBuilderWithInkWell foreground({ Color? color, AlignmentGeometry? alignment, double elevation = 0.0, List boxShadow = const [], Color? shadowColor, Clip clipBehavior = Clip.none, - bool clipShrink = true, + bool shrinkToClippedSize = true, + bool shouldExpand = false, PaintStyle? paintStyle, + BoxFit fit = BoxFit.none, }) { - return ShapeBuilder( + return _ShapeBuilderWithInkWell( shadow: boxShadow, alignment: alignment ?? Alignment.center, color: color, child: this, clipBehavior: clipBehavior, - clipShrink: clipShrink, - isOverlay: false, + shrinkToClippedSize: shrinkToClippedSize, + shouldExpand: shouldExpand, + childIsInTheForeground: false, paintStyle: paintStyle, + fit: fit, ); } @@ -274,353 +309,11 @@ extension ShapeBuilderX on Widget { child: this, ); - // if it Flex widget it is better to set fitTheShortestSide to false - Resize resize({bool fitTheShortestSide = true}) => - Resize(child: this, fitTheShortestSide: fitTheShortestSide, flex: null); - Widget resizeAdaptive([double? scale]) => - Resize(child: this, fitTheShortestSide: true, flex: null).adaptive(scale); - - Widget adaptiveResize( - {bool fitTheShortestSide = true, double? width, double? height}) => - Resize(child: this, fitTheShortestSide: fitTheShortestSide, flex: null) - .adaptiveTest1(width: width, height: height); - - Widget adaptiveFlexResize( - {bool fitTheShortestSide = true, - int flex = 1, - double? width, - double? height}) => - Resize(child: this, fitTheShortestSide: fitTheShortestSide, flex: flex) - .adaptiveTest1(width: width, height: height); - - /// This should be the first child of a Flex widget (Column or Row) - /// Text('').resizeWithFlex().fixed().padding is not allowed - Resize resizeWithFlex({ - bool fitTheShortestSide = true, - double flex = 1, - bool shouldExpand = false, - }) => - Resize( - child: this, - fitTheShortestSide: fitTheShortestSide, - flex: (flex * 10).toInt(), - shouldExpand: shouldExpand, - ); - - _Padding get padding => _Padding(child: this); + _Padding get paddingInsets => _Padding(child: this); _PaddingDirectional get paddingDirectional => _PaddingDirectional(child: this); } -class Resize { - late final Widget _child; - final bool _fitTheShortestSide, _shouldExpand; - final int? _flex; - - static double ofAdaptive(BuildContext context) { - final inheritedWidth = InheritedLayout.of(context).width / adaptiveWidth; - return inheritedWidth; - } - - Resize({ - required Widget child, - required int? flex, - required bool fitTheShortestSide, - bool shouldExpand = false, - }) : _flex = flex, - _fitTheShortestSide = fitTheShortestSide, - _shouldExpand = shouldExpand { - // if (child is Flex) { - // _child = child - // ..children.add( - // child.direction == Axis.vertical - // ? const SizedBox( - // width: double.infinity, - // ) - // : const SizedBox(height: double.infinity), - // ); - // } else { - // _child = child; - // } - _child = child; - } - - static double adaptiveWidth = 500; - Widget adaptiveTest1({double? width, double? height}) { - final widget = Builder(builder: (context) { - final inheritedWidth = InheritedLayout.of(context).width / adaptiveWidth; - - return MyFittedBox( - width: width != null ? width * inheritedWidth : null, - height: height != null ? height * inheritedWidth : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }); - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - fit: _shouldExpand ? FlexFit.tight : FlexFit.loose, - child: widget, - ); - } - return widget; - } - - Widget adaptive([double? scale]) { - final widget = Builder( - builder: (context) { - final inheritedWidth = - InheritedLayout.of(context).width / adaptiveWidth; - - return MyFittedBox( - width: scale, - height: scale, - fitTheShortestSide: _fitTheShortestSide, - inheritedFraction: inheritedWidth, - child: _child, - ); - }, - ); - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - fit: _shouldExpand ? FlexFit.tight : FlexFit.loose, - child: widget, - ); - } - return widget; - } - - Widget fixedTest({double? width, double? height}) { - // if (_child is Flex) { - // return SizedBox( - // width: width, - // height: height, - // child: _child, - // ); - // } - final widget = MyFittedBox( - width: width, - height: height, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - inheritedFraction: null, - ); - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - fit: _shouldExpand ? FlexFit.tight : FlexFit.loose, - child: widget, - ); - } - return widget; - } - - Widget fixed({double? width, double? height}) { - // if (_child is Flex) { - // return SizedBox( - // width: width, - // height: height, - // child: _child, - // ); - // } - final widget = MyFittedBox( - width: width, - height: height, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - fit: _shouldExpand ? FlexFit.tight : FlexFit.loose, - child: widget, - ); - } - return widget; - } -// Sizer climp(double? min, double?max){ - -// return -// } - Widget fromEffectiveWidth(double? widthFraction, double? heightFraction) { - // assert(widthFraction == null || widthFraction >= 0 && widthFraction <= 1); - // assert( - // heightFraction == null || heightFraction >= 0 && heightFraction <= 1); - final widget = Builder(builder: (context) { - final inheritedWidth = InheritedLayout.of(context).width; - print('inheritedWidth: $inheritedWidth'); - return InheritedLayout( - inheritedWidth: inheritedWidth * (widthFraction ?? 1), - builder: (context, size) { - return MyFittedBox( - width: - widthFraction != null ? inheritedWidth * widthFraction : null, - height: - heightFraction != null ? inheritedWidth * heightFraction : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }, - ); - }); - - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - child: widget, - ); - } - return widget; - } - - _FromDevice get fromDevice => _FromDevice( - child: _child, - flex: _flex, - fitTheShortestSide: _fitTheShortestSide, - ); - _FromParent get fromParent => _FromParent( - child: _child, - flex: _flex, - fitTheShortestSide: _fitTheShortestSide, - ); -} - -class _FromDevice { - final Widget _child; - final bool _fitTheShortestSide; - final int? _flex; - const _FromDevice({ - required Widget child, - required int? flex, - required bool fitTheShortestSide, - }) : _flex = flex, - _child = child, - _fitTheShortestSide = fitTheShortestSide; - - Widget width({double? width, double? height}) { - assert(width == null || width >= 0 && width <= 1); - assert(height == null || height >= 0 && height <= 1); - final widget = Builder(builder: (context) { - final deviceWidth = MediaQuery.of(context).size.width; - return MyFittedBox( - width: width != null ? deviceWidth * width : null, - height: height != null ? deviceWidth * height : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }); - - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - child: widget, - ); - } - return widget; - } - - Widget height({double? width, double? height}) { - assert(width == null || width >= 0 && width <= 1); - assert(height == null || height >= 0 && height <= 1); - final widget = Builder(builder: (context) { - final deviceHeight = MediaQuery.of(context).size.height; - return MyFittedBox( - width: width != null ? deviceHeight * width : null, - height: height != null ? deviceHeight * height : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }); - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - child: widget, - ); - } - return widget; - } - - Widget widthAndHeight({double? width, double? height}) { - assert(width == null || width >= 0 && width <= 1); - assert(height == null || height >= 0 && height <= 1); - final widget = Builder(builder: (context) { - final deviceWidth = MediaQuery.of(context).size.width; - final deviceHeight = MediaQuery.of(context).size.height; - return MyFittedBox( - width: width != null ? deviceWidth * width : null, - height: height != null ? deviceHeight * height : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }); - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - child: widget, - ); - } - return widget; - } -} - -class _FromParent { - final Widget _child; - final bool _fitTheShortestSide; - final int? _flex; - const _FromParent({ - required Widget child, - required int? flex, - required bool fitTheShortestSide, - }) : _flex = flex, - _child = child, - _fitTheShortestSide = fitTheShortestSide; - Widget height({double? width, double? height}) { - // assert(width == null || width >= 0 && width <= 1); - // assert(height == null || height >= 0 && height <= 1); - final widget = LayoutBuilder(builder: (context, constraints) { - final parentHeight = constraints.maxHeight; - return MyFittedBox( - width: width != null ? parentHeight * width : null, - height: height != null ? parentHeight * height : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }); - - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - child: widget, - ); - } - return widget; - } - - Widget width({double? width, double? height}) { - // assert(width == null || width >= 0 && width <= 1); - // assert(height == null || height >= 0 && height <= 1); - final widget = LayoutBuilder(builder: (context, constraints) { - final parentWidth = constraints.maxWidth; - return MyFittedBox( - width: width != null ? parentWidth * width : null, - height: height != null ? parentWidth * height : null, - fitTheShortestSide: _fitTheShortestSide, - child: _child, - ); - }); - - if (_flex != null) { - return Flexible( - flex: _flex ?? 1, - child: widget, - ); - } - return widget; - } -} - class _Padding { final Widget _child; // final bool _fitTheShortestSide, _shouldExpand; diff --git a/lib/src/stack_render_shape.dart b/lib/src/stack_render_shape.dart new file mode 100644 index 0000000..0551f58 --- /dev/null +++ b/lib/src/stack_render_shape.dart @@ -0,0 +1,215 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; +import 'dart:math' as math; + +/// Parent data for use with [RenderStack]. +class _StackParentData extends ContainerBoxParentData { + bool isPositioned = false; +} + +class _RenderStack extends RenderBox + with + ContainerRenderObjectMixin, + RenderBoxContainerDefaultsMixin { + _RenderStack( + {AlignmentGeometry? alignment, + required this.isLastPositioned, + required this.buildContext}) + : _alignment = alignment; + + final bool isLastPositioned; + final BuildContext buildContext; + AlignmentGeometry? _alignment; + + set alignment(AlignmentGeometry? value) { + if (value == _alignment) { + return; + } + _alignment = value; + _resolvedAlignment = null; + markNeedsLayout(); + } + + @override + void setupParentData(RenderBox child) { + if (child.parentData is! _StackParentData) { + child.parentData = _StackParentData(); + } + } + + static double getIntrinsicDimension(RenderBox? firstChild, + double Function(RenderBox child) mainChildSizeGetter) { + double extent = 0.0; + RenderBox? child = firstChild; + while (child != null) { + final _StackParentData childParentData = + child.parentData! as _StackParentData; + extent = math.max(extent, mainChildSizeGetter(child)); + assert(child.parentData == childParentData); + child = childParentData.nextSibling; + } + return extent; + } + + @override + double computeMinIntrinsicWidth(double height) { + return getIntrinsicDimension( + firstChild, (RenderBox child) => child.getMinIntrinsicWidth(height)); + } + + @override + double computeMaxIntrinsicWidth(double height) { + return getIntrinsicDimension( + firstChild, (RenderBox child) => child.getMaxIntrinsicWidth(height)); + } + + @override + double computeMinIntrinsicHeight(double width) { + return getIntrinsicDimension( + firstChild, + (RenderBox child) => child.getMinIntrinsicHeight(width), + ); + } + + @override + double computeMaxIntrinsicHeight(double width) { + return getIntrinsicDimension( + firstChild, (RenderBox child) => child.getMaxIntrinsicHeight(width)); + } + + @override + double? computeDistanceToActualBaseline(TextBaseline baseline) { + return defaultComputeDistanceToHighestActualBaseline(baseline); + } + + @override + Size computeDryLayout(BoxConstraints constraints) { + firstChild!.layout( + constraints, + parentUsesSize: false, + ); + if (isLastPositioned) return firstChild!.size; + lastChild!.layout( + constraints, + parentUsesSize: false, + ); + return Size( + math.max(firstChild!.size.width, lastChild!.size.width), + math.max(firstChild!.size.height, lastChild!.size.height), + ); + } + + @override + void performLayout() { + assert(childCount == 2); + firstChild!.layout( + constraints, + parentUsesSize: true, + ); + if (isLastPositioned) { + size = firstChild!.size; + lastChild!.layout( + constraints.tighten(width: size.width, height: size.height), + parentUsesSize: true, + ); + } else { + lastChild!.layout( + constraints.loosen(), + parentUsesSize: true, + ); + + size = Size( + math.max(firstChild!.size.width, lastChild!.size.width), + math.max(firstChild!.size.height, lastChild!.size.height), + ); + + _resolve(); + final rect1 = _resolvedAlignment!.inscribe( + firstChild!.size, + Rect.fromLTWH(0, 0, size.width, size.height), + ); + (firstChild!.parentData as _StackParentData).offset = rect1.topLeft; + final rect2 = _resolvedAlignment!.inscribe( + lastChild!.size, + Rect.fromLTWH(0, 0, size.width, size.height), + ); + (lastChild!.parentData as _StackParentData).offset = rect2.topLeft; + } + } + + Alignment? _resolvedAlignment; + + void _resolve() { + if (_resolvedAlignment != null) { + return; + } + _resolvedAlignment = + _alignment?.resolve(Directionality.maybeOf(buildContext)); + } + + @override + bool hitTestChildren(BoxHitTestResult result, {required Offset position}) { + RenderBox? child = lastChild; + bool isHit = false; + while (child != null) { + final childParentData = child.parentData! as _StackParentData; + isHit = result.addWithPaintOffset( + offset: childParentData.offset, + position: position, + hitTest: (BoxHitTestResult result, Offset transformed) { + assert(transformed == position - childParentData.offset); + return child!.hitTest(result, position: transformed); + }, + ); + child = childParentData.previousSibling; + } + return isHit; + } + + @override + void paint(PaintingContext context, Offset offset) { + context.paintChild(firstChild!, + offset + (firstChild!.parentData as _StackParentData).offset); + context.paintChild(lastChild!, + offset + (lastChild!.parentData as _StackParentData).offset); + } +} + +class MyStack extends MultiChildRenderObjectWidget { + MyStack({ + super.key, + super.children, + this.alignment, + this.isLastPositioned = true, + }); + final AlignmentGeometry? alignment; + final bool isLastPositioned; + + @override + RenderObject createRenderObject(BuildContext context) { + return _RenderStack( + alignment: alignment, + isLastPositioned: isLastPositioned, + buildContext: context, + ); + } + + @override + void updateRenderObject( + BuildContext context, covariant _RenderStack renderObject) { + renderObject.alignment = alignment; + } +} + +// class MyPositioned extends ParentDataWidget<_StackParentData> { +// const MyPositioned({super.key, required super.child}); + +// @override +// void applyParentData(RenderObject renderObject) { +// final data = renderObject.parentData as _StackParentData; +// data.isPositioned = true; +// } + +// @override +// Type get debugTypicalAncestorWidgetClass => MyStack; +// } diff --git a/pubspec.yaml b/pubspec.yaml index fe5646f..817fc8c 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,10 +1,10 @@ name: shape_builder description: Create the shape you want, decorate it the way you want and put it where you wantn -version: 0.0.1 +version: 0.0.2 homepage: https://github.com/GIfatahTH/shape_builder environment: - sdk: '>=2.18.2 <3.0.0' + sdk: '>=2.18.2 <4.0.0' flutter: ">=1.17.0" dependencies: diff --git a/test/build_test.dart b/test/build_test.dart new file mode 100644 index 0000000..535f638 --- /dev/null +++ b/test/build_test.dart @@ -0,0 +1,372 @@ +import 'dart:io'; + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:golden_toolkit/golden_toolkit.dart'; +import 'package:shape_builder/shape_builder.dart'; +import 'package:path/path.dart' as path; + +void main() { + testGoldens('build with different size', (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + Row( + children: [ + Rectangle.square( + side: 100, + color: Colors.blue.withOpacity(.5), + ).background().build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + Rectangle.square( + side: 100, + color: Colors.blue.withOpacity(.5), + ).background(alignment: const Alignment(-1, -1)).build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + Rectangle.square( + side: 100, + color: Colors.blue.withOpacity(.5), + ).background(alignment: const Alignment(1, 1)).build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + Rectangle.square( + side: 100, + color: Colors.blue.withOpacity(.5), + ).background(alignment: const Alignment(.8, .8)).build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + ], + ), + const SizedBox(height: 8), + Row( + children: [ + Rectangle.square( + side: 100, + color: Colors.blue, + ).foreground().build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + Rectangle.square( + side: 100, + color: Colors.blue, + ).foreground(alignment: const Alignment(-1, -1)).build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + Rectangle.square( + side: 100, + color: Colors.blue, + ).foreground(alignment: const Alignment(1, 1)).build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + Rectangle.square( + side: 100, + color: Colors.blue, + ).foreground(alignment: const Alignment(.8, .8)).build( + Rectangle.square( + color: Colors.red, + side: 10, + ), + ), + ], + ), + const SizedBox(height: 8), + Row( + children: [ + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).foreground().build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).foreground(alignment: const Alignment(-1, -1)).build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).foreground(alignment: const Alignment(1, 1)).build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).foreground(alignment: const Alignment(.8, .8)).build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + ], + ), + const SizedBox(height: 8), + Row( + children: [ + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).background().build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).background(alignment: const Alignment(-1, -1)).build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).background(alignment: const Alignment(1, 1)).build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + Rectangle( + width: 100, + height: 50, + color: Colors.blue, + ).background(alignment: const Alignment(.8, .8)).build( + Rectangle( + width: 50, + height: 100, + color: Colors.red, + ), + ), + ], + ), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'build/build_001'); + }); + + testGoldens( + '2- with image without constraints 1', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + Image.memory( + data, + fit: BoxFit.cover, + ).foreground().build( + Rectangle( + width: 100, + height: 100, + ), + ), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'build/build_002'); + }, + ); + + testGoldens( + '3- with image without constraints 2', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + Rectangle( + width: 100, + height: 100, + ).background().build( + Image.memory( + data, + fit: BoxFit.cover, + ), + ), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'build/build_003'); + }, + ); + + testGoldens( + '4- with image when rect is greater then image', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + Rectangle( + width: 100, + height: 100, + ).foreground().build( + SizedBox( + width: 50, + height: 50, + child: Image.memory( + data, + fit: BoxFit.cover, + ), + ), + ), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'build/build_004'); + }, + ); + + testGoldens( + '5- with inkWell', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + Rectangle( + width: 100, + height: 100, + ) + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () {}, + ), + ) + .build( + SizedBox( + width: 50, + height: 50, + child: Image.memory( + data, + fit: BoxFit.cover, + ), + ), + ), + Rectangle( + width: 100, + height: 100, + color: Colors.blue.withOpacity(.5), + ) + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () {}, + ), + ) + .build( + SizedBox( + width: 50, + height: 50, + child: Image.memory( + data, + fit: BoxFit.cover, + ), + ), + ), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await tester.press(find.byType(Image).first); + await tester.press(find.byType(Image).last); + await screenMatchesGolden(tester, 'build/build_005'); + }, + ); +} diff --git a/test/circle_test.dart b/test/circle_test.dart index 503fcdc..b3ac38f 100644 --- a/test/circle_test.dart +++ b/test/circle_test.dart @@ -12,7 +12,7 @@ void main() { 'Circle', () { testGoldens( - '1- Expands to take the max available space if both height and width' + '1- Shrink to take the min available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( @@ -22,6 +22,24 @@ void main() { platform: TargetPlatform.android, ), ); + await screenMatchesGolden(tester, 'circle/circle_0001'); + }, + ); + + testGoldens( + '1- Expands to take the max available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: Oval.circle( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); await screenMatchesGolden(tester, 'circle/circle_001'); }, ); @@ -270,7 +288,7 @@ void main() { .foreground( color: Colors.blue.withOpacity(.3), alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildCircle( @@ -281,7 +299,7 @@ void main() { .foreground( color: Colors.blue.withOpacity(.3), alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildCircle( @@ -293,7 +311,7 @@ void main() { color: Colors.blue.withOpacity(.3), alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildCircle( radius: 25, @@ -303,7 +321,7 @@ void main() { .foreground( color: Colors.blue.withOpacity(.3), alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildCircle( @@ -314,7 +332,7 @@ void main() { .foreground( color: Colors.blue.withOpacity(.3), alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildCircle( @@ -540,85 +558,168 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .foreground( - color: Colors.blue.withOpacity(.3), - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - ) - .buildCircle( - radius: 50, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCircle( + radius: 30, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: Oval.circle( + radius: 30, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, width: 200, height: 100, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, width: 200, height: 100, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCircle( + radius: 30, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + // maxHeight: 200, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCircle( + radius: 30, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 80, + // maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCircle( + radius: 30, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + // maxHeight: 25, + ), child: Image.memory( data, fit: BoxFit.cover, width: 200, height: 100, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), @@ -630,8 +731,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -639,20 +740,20 @@ void main() { width: 200, height: 100, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -660,20 +761,20 @@ void main() { width: 200, height: 100, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -681,13 +782,13 @@ void main() { width: 200, height: 100, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), @@ -699,56 +800,51 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, fit: BoxFit.cover, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 100, + maxHeight: 50, ), child: Image.memory( data, fit: BoxFit.cover, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildCircle( - radius: 50, - )), + .buildCircle(radius: 40)), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + maxHeight: 25, ), child: Image.memory( data, fit: BoxFit.cover, ) - .foreground( - color: Colors.blue.withOpacity(.3), + .background( alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildCircle( - radius: 50, + radius: 30, ) .colorize(Colors.amber), ), @@ -762,7 +858,7 @@ void main() { platform: TargetPlatform.android, ), ); - await screenMatchesGolden(tester, 'circle/circle_014'); + await screenMatchesGolden(tester, 'circle/circle_0014'); }, ); @@ -1357,6 +1453,200 @@ void main() { await screenMatchesGolden(tester, 'circle/circle_025'); }, ); + + testGoldens( + '26- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCircle( + radius: 40, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'circle/circle_026'); + }, + ); + + testGoldens( + '27- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCircle( + radius: 40, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'circle/circle_027'); + }, + ); + + testGoldens( + '28- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCircle( + radius: 40, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'circle/circle_028'); + }, + ); + + testGoldens( + '29- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCircle( + radius: 40, + + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'circle/circle_029'); + }, + ); + }, + ); + + testGoldens( + '30- inkWell', + (tester) async { + // final file = File( + // path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + // ); + // final data = file.readAsBytesSync(); + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildCircle(), + const Text('build foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildCircle(), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build background')); + await tester.press(find.text('build foreground')); + + await screenMatchesGolden(tester, 'circle/circle_030'); }, ); } diff --git a/test/goldens/circle/circle_0001.png b/test/goldens/circle/circle_0001.png new file mode 100644 index 0000000..1d413c8 Binary files /dev/null and b/test/goldens/circle/circle_0001.png differ diff --git a/test/goldens/circle/circle_0014.png b/test/goldens/circle/circle_0014.png new file mode 100644 index 0000000..e1209ef Binary files /dev/null and b/test/goldens/circle/circle_0014.png differ diff --git a/test/goldens/circle/circle_019.png b/test/goldens/circle/circle_019.png index 55032f2..6804ac5 100644 Binary files a/test/goldens/circle/circle_019.png and b/test/goldens/circle/circle_019.png differ diff --git a/test/goldens/circle/circle_024.png b/test/goldens/circle/circle_024.png index ffe98de..6ee7fd8 100644 Binary files a/test/goldens/circle/circle_024.png and b/test/goldens/circle/circle_024.png differ diff --git a/test/goldens/circle/circle_026.png b/test/goldens/circle/circle_026.png new file mode 100644 index 0000000..e187633 Binary files /dev/null and b/test/goldens/circle/circle_026.png differ diff --git a/test/goldens/circle/circle_027.png b/test/goldens/circle/circle_027.png new file mode 100644 index 0000000..9a70ce6 Binary files /dev/null and b/test/goldens/circle/circle_027.png differ diff --git a/test/goldens/circle/circle_028.png b/test/goldens/circle/circle_028.png new file mode 100644 index 0000000..9a70ce6 Binary files /dev/null and b/test/goldens/circle/circle_028.png differ diff --git a/test/goldens/circle/circle_029.png b/test/goldens/circle/circle_029.png new file mode 100644 index 0000000..9a70ce6 Binary files /dev/null and b/test/goldens/circle/circle_029.png differ diff --git a/test/goldens/circle/circle_030.png b/test/goldens/circle/circle_030.png new file mode 100644 index 0000000..0384e51 Binary files /dev/null and b/test/goldens/circle/circle_030.png differ diff --git a/test/goldens/oval/oval_0001.png b/test/goldens/oval/oval_0001.png new file mode 100644 index 0000000..03b734f Binary files /dev/null and b/test/goldens/oval/oval_0001.png differ diff --git a/test/goldens/oval/oval_014.png b/test/goldens/oval/oval_014.png index b07423a..1cbced0 100644 Binary files a/test/goldens/oval/oval_014.png and b/test/goldens/oval/oval_014.png differ diff --git a/test/goldens/oval/oval_019.png b/test/goldens/oval/oval_019.png index 16a41d6..dacabfb 100644 Binary files a/test/goldens/oval/oval_019.png and b/test/goldens/oval/oval_019.png differ diff --git a/test/goldens/oval/oval_024.png b/test/goldens/oval/oval_024.png index 8599f0c..5a2047c 100644 Binary files a/test/goldens/oval/oval_024.png and b/test/goldens/oval/oval_024.png differ diff --git a/test/goldens/oval/oval_025bis.png b/test/goldens/oval/oval_025bis.png new file mode 100644 index 0000000..59a26cc Binary files /dev/null and b/test/goldens/oval/oval_025bis.png differ diff --git a/test/goldens/oval/oval_026.png b/test/goldens/oval/oval_026.png new file mode 100644 index 0000000..59a26cc Binary files /dev/null and b/test/goldens/oval/oval_026.png differ diff --git a/test/goldens/oval/oval_027.png b/test/goldens/oval/oval_027.png new file mode 100644 index 0000000..9eb8ec6 Binary files /dev/null and b/test/goldens/oval/oval_027.png differ diff --git a/test/goldens/oval/oval_028.png b/test/goldens/oval/oval_028.png new file mode 100644 index 0000000..d409737 Binary files /dev/null and b/test/goldens/oval/oval_028.png differ diff --git a/test/goldens/oval/oval_029.png b/test/goldens/oval/oval_029.png new file mode 100644 index 0000000..1c60332 Binary files /dev/null and b/test/goldens/oval/oval_029.png differ diff --git a/test/goldens/oval/oval_030.png b/test/goldens/oval/oval_030.png new file mode 100644 index 0000000..4ddbcd0 Binary files /dev/null and b/test/goldens/oval/oval_030.png differ diff --git a/test/goldens/rcapsule/rcapsule_0001.png b/test/goldens/rcapsule/rcapsule_0001.png new file mode 100644 index 0000000..880873c Binary files /dev/null and b/test/goldens/rcapsule/rcapsule_0001.png differ diff --git a/test/goldens/rcapsule/rcapsule_014.png b/test/goldens/rcapsule/rcapsule_014.png index cac5d06..de538a5 100644 Binary files a/test/goldens/rcapsule/rcapsule_014.png and b/test/goldens/rcapsule/rcapsule_014.png differ diff --git a/test/goldens/rcapsule/rcapsule_019.png b/test/goldens/rcapsule/rcapsule_019.png index 8bd9c4e..c943575 100644 Binary files a/test/goldens/rcapsule/rcapsule_019.png and b/test/goldens/rcapsule/rcapsule_019.png differ diff --git a/test/goldens/rcapsule/rcapsule_023.png b/test/goldens/rcapsule/rcapsule_023.png index 01d1dba..8361748 100644 Binary files a/test/goldens/rcapsule/rcapsule_023.png and b/test/goldens/rcapsule/rcapsule_023.png differ diff --git a/test/goldens/rcapsule/rcapsule_024.png b/test/goldens/rcapsule/rcapsule_024.png index 6e9d964..ea4e2ee 100644 Binary files a/test/goldens/rcapsule/rcapsule_024.png and b/test/goldens/rcapsule/rcapsule_024.png differ diff --git a/test/goldens/rcapsule/rcapsule_026.png b/test/goldens/rcapsule/rcapsule_026.png new file mode 100644 index 0000000..48e1540 Binary files /dev/null and b/test/goldens/rcapsule/rcapsule_026.png differ diff --git a/test/goldens/rcapsule/rcapsule_027.png b/test/goldens/rcapsule/rcapsule_027.png new file mode 100644 index 0000000..b847a07 Binary files /dev/null and b/test/goldens/rcapsule/rcapsule_027.png differ diff --git a/test/goldens/rcapsule/rcapsule_028.png b/test/goldens/rcapsule/rcapsule_028.png new file mode 100644 index 0000000..6d37d63 Binary files /dev/null and b/test/goldens/rcapsule/rcapsule_028.png differ diff --git a/test/goldens/rcapsule/rcapsule_029.png b/test/goldens/rcapsule/rcapsule_029.png new file mode 100644 index 0000000..5e39cbd Binary files /dev/null and b/test/goldens/rcapsule/rcapsule_029.png differ diff --git a/test/goldens/rcapsule/rcapsule_030.png b/test/goldens/rcapsule/rcapsule_030.png new file mode 100644 index 0000000..99cd9c4 Binary files /dev/null and b/test/goldens/rcapsule/rcapsule_030.png differ diff --git a/test/goldens/rectangle/rectangle_0001.png b/test/goldens/rectangle/rectangle_0001.png new file mode 100644 index 0000000..1d413c8 Binary files /dev/null and b/test/goldens/rectangle/rectangle_0001.png differ diff --git a/test/goldens/rectangle/rectangle_013.png b/test/goldens/rectangle/rectangle_013.png index eef0fb3..a3ecfd0 100644 Binary files a/test/goldens/rectangle/rectangle_013.png and b/test/goldens/rectangle/rectangle_013.png differ diff --git a/test/goldens/rectangle/rectangle_014.png b/test/goldens/rectangle/rectangle_014.png index b29f026..0411dfe 100644 Binary files a/test/goldens/rectangle/rectangle_014.png and b/test/goldens/rectangle/rectangle_014.png differ diff --git a/test/goldens/rectangle/rectangle_019.png b/test/goldens/rectangle/rectangle_019.png index 91a1539..573d7be 100644 Binary files a/test/goldens/rectangle/rectangle_019.png and b/test/goldens/rectangle/rectangle_019.png differ diff --git a/test/goldens/rectangle/rectangle_023.png b/test/goldens/rectangle/rectangle_023.png index 64caa3f..35e26c8 100644 Binary files a/test/goldens/rectangle/rectangle_023.png and b/test/goldens/rectangle/rectangle_023.png differ diff --git a/test/goldens/rectangle/rectangle_024.png b/test/goldens/rectangle/rectangle_024.png index e6794c3..49c047c 100644 Binary files a/test/goldens/rectangle/rectangle_024.png and b/test/goldens/rectangle/rectangle_024.png differ diff --git a/test/goldens/rectangle/rectangle_025.png b/test/goldens/rectangle/rectangle_025.png new file mode 100644 index 0000000..eb95a5f Binary files /dev/null and b/test/goldens/rectangle/rectangle_025.png differ diff --git a/test/goldens/rectangle/rectangle_026.png b/test/goldens/rectangle/rectangle_026.png new file mode 100644 index 0000000..eb95a5f Binary files /dev/null and b/test/goldens/rectangle/rectangle_026.png differ diff --git a/test/goldens/rectangle/rectangle_027.png b/test/goldens/rectangle/rectangle_027.png new file mode 100644 index 0000000..01c6356 Binary files /dev/null and b/test/goldens/rectangle/rectangle_027.png differ diff --git a/test/goldens/rectangle/rectangle_028.png b/test/goldens/rectangle/rectangle_028.png new file mode 100644 index 0000000..19b8eef Binary files /dev/null and b/test/goldens/rectangle/rectangle_028.png differ diff --git a/test/goldens/rectangle/rectangle_029.png b/test/goldens/rectangle/rectangle_029.png new file mode 100644 index 0000000..c330022 Binary files /dev/null and b/test/goldens/rectangle/rectangle_029.png differ diff --git a/test/goldens/rectangle/rectangle_030.png b/test/goldens/rectangle/rectangle_030.png new file mode 100644 index 0000000..424fd48 Binary files /dev/null and b/test/goldens/rectangle/rectangle_030.png differ diff --git a/test/goldens/rrectangle/rrectangle_0001.png b/test/goldens/rrectangle/rrectangle_0001.png new file mode 100644 index 0000000..fdd6665 Binary files /dev/null and b/test/goldens/rrectangle/rrectangle_0001.png differ diff --git a/test/goldens/rrectangle/rrectangle_014.png b/test/goldens/rrectangle/rrectangle_014.png index f20b3ef..b3d5f7a 100644 Binary files a/test/goldens/rrectangle/rrectangle_014.png and b/test/goldens/rrectangle/rrectangle_014.png differ diff --git a/test/goldens/rrectangle/rrectangle_019.png b/test/goldens/rrectangle/rrectangle_019.png index d1c8d90..b084879 100644 Binary files a/test/goldens/rrectangle/rrectangle_019.png and b/test/goldens/rrectangle/rrectangle_019.png differ diff --git a/test/goldens/rrectangle/rrectangle_023.png b/test/goldens/rrectangle/rrectangle_023.png index 015a335..e27bbd6 100644 Binary files a/test/goldens/rrectangle/rrectangle_023.png and b/test/goldens/rrectangle/rrectangle_023.png differ diff --git a/test/goldens/rrectangle/rrectangle_024.png b/test/goldens/rrectangle/rrectangle_024.png index c104068..fe17fd9 100644 Binary files a/test/goldens/rrectangle/rrectangle_024.png and b/test/goldens/rrectangle/rrectangle_024.png differ diff --git a/test/goldens/rrectangle/rrectangle_29.png b/test/goldens/rrectangle/rrectangle_29.png new file mode 100644 index 0000000..835fa1b Binary files /dev/null and b/test/goldens/rrectangle/rrectangle_29.png differ diff --git a/test/goldens/rrectangle/rrectangle_30.png b/test/goldens/rrectangle/rrectangle_30.png new file mode 100644 index 0000000..7b2ab89 Binary files /dev/null and b/test/goldens/rrectangle/rrectangle_30.png differ diff --git a/test/goldens/rrectangle/rrectangle_31.png b/test/goldens/rrectangle/rrectangle_31.png new file mode 100644 index 0000000..2383003 Binary files /dev/null and b/test/goldens/rrectangle/rrectangle_31.png differ diff --git a/test/goldens/rrectangle/rrectangle_32.png b/test/goldens/rrectangle/rrectangle_32.png new file mode 100644 index 0000000..3832aff Binary files /dev/null and b/test/goldens/rrectangle/rrectangle_32.png differ diff --git a/test/goldens/rrectangle/rrectangle_33.png b/test/goldens/rrectangle/rrectangle_33.png new file mode 100644 index 0000000..99cd9c4 Binary files /dev/null and b/test/goldens/rrectangle/rrectangle_33.png differ diff --git a/test/goldens/rsquare/rsquare_0001.png b/test/goldens/rsquare/rsquare_0001.png new file mode 100644 index 0000000..1d413c8 Binary files /dev/null and b/test/goldens/rsquare/rsquare_0001.png differ diff --git a/test/goldens/rsquare/rsquare_014.png b/test/goldens/rsquare/rsquare_014.png index fba6c9b..151a5a3 100644 Binary files a/test/goldens/rsquare/rsquare_014.png and b/test/goldens/rsquare/rsquare_014.png differ diff --git a/test/goldens/rsquare/rsquare_019.png b/test/goldens/rsquare/rsquare_019.png index b1d4889..df1177c 100644 Binary files a/test/goldens/rsquare/rsquare_019.png and b/test/goldens/rsquare/rsquare_019.png differ diff --git a/test/goldens/rsquare/rsquare_023.png b/test/goldens/rsquare/rsquare_023.png index 015a335..e27bbd6 100644 Binary files a/test/goldens/rsquare/rsquare_023.png and b/test/goldens/rsquare/rsquare_023.png differ diff --git a/test/goldens/rsquare/rsquare_024.png b/test/goldens/rsquare/rsquare_024.png index c104068..fe17fd9 100644 Binary files a/test/goldens/rsquare/rsquare_024.png and b/test/goldens/rsquare/rsquare_024.png differ diff --git a/test/goldens/rsquare/rsquare_029.png b/test/goldens/rsquare/rsquare_029.png new file mode 100644 index 0000000..0f08079 Binary files /dev/null and b/test/goldens/rsquare/rsquare_029.png differ diff --git a/test/goldens/rsquare/rsquare_030.png b/test/goldens/rsquare/rsquare_030.png new file mode 100644 index 0000000..ce51f76 Binary files /dev/null and b/test/goldens/rsquare/rsquare_030.png differ diff --git a/test/goldens/rsquare/rsquare_031.png b/test/goldens/rsquare/rsquare_031.png new file mode 100644 index 0000000..ce51f76 Binary files /dev/null and b/test/goldens/rsquare/rsquare_031.png differ diff --git a/test/goldens/rsquare/rsquare_032.png b/test/goldens/rsquare/rsquare_032.png new file mode 100644 index 0000000..ce51f76 Binary files /dev/null and b/test/goldens/rsquare/rsquare_032.png differ diff --git a/test/goldens/rsquare/rsquare_33.png b/test/goldens/rsquare/rsquare_33.png new file mode 100644 index 0000000..4d28888 Binary files /dev/null and b/test/goldens/rsquare/rsquare_33.png differ diff --git a/test/goldens/square/square_0001.png b/test/goldens/square/square_0001.png new file mode 100644 index 0000000..3e9477b Binary files /dev/null and b/test/goldens/square/square_0001.png differ diff --git a/test/goldens/square/square_014.png b/test/goldens/square/square_014.png index 49e0333..7dac9c6 100644 Binary files a/test/goldens/square/square_014.png and b/test/goldens/square/square_014.png differ diff --git a/test/goldens/square/square_019.png b/test/goldens/square/square_019.png index 29385dc..e3c1d00 100644 Binary files a/test/goldens/square/square_019.png and b/test/goldens/square/square_019.png differ diff --git a/test/goldens/square/square_023.png b/test/goldens/square/square_023.png index 64caa3f..35e26c8 100644 Binary files a/test/goldens/square/square_023.png and b/test/goldens/square/square_023.png differ diff --git a/test/goldens/square/square_024.png b/test/goldens/square/square_024.png index e6794c3..49c047c 100644 Binary files a/test/goldens/square/square_024.png and b/test/goldens/square/square_024.png differ diff --git a/test/goldens/square/square_026.png b/test/goldens/square/square_026.png new file mode 100644 index 0000000..302e8ac Binary files /dev/null and b/test/goldens/square/square_026.png differ diff --git a/test/goldens/square/square_027.png b/test/goldens/square/square_027.png new file mode 100644 index 0000000..ffc9210 Binary files /dev/null and b/test/goldens/square/square_027.png differ diff --git a/test/goldens/square/square_028.png b/test/goldens/square/square_028.png new file mode 100644 index 0000000..ffc9210 Binary files /dev/null and b/test/goldens/square/square_028.png differ diff --git a/test/goldens/square/square_029.png b/test/goldens/square/square_029.png new file mode 100644 index 0000000..0722a78 Binary files /dev/null and b/test/goldens/square/square_029.png differ diff --git a/test/goldens/square/square_030.png b/test/goldens/square/square_030.png new file mode 100644 index 0000000..c76e8e7 Binary files /dev/null and b/test/goldens/square/square_030.png differ diff --git a/test/oval_test.dart b/test/oval_test.dart index ae3cbd2..eccaa04 100644 --- a/test/oval_test.dart +++ b/test/oval_test.dart @@ -11,12 +11,32 @@ void main() { group( 'Oval', () { + testGoldens( + '1- Shrink to take the min available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: Oval( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'oval/oval_0001'); + }, + ); testGoldens( '1- Expands to take the max available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( - Center(child: Oval()), + Center( + child: Oval( + shouldExpand: true, + )), wrapper: materialAppWrapper( theme: ThemeData.light(), platform: TargetPlatform.android, @@ -32,6 +52,7 @@ void main() { Center( child: Oval( width: 100, + shouldExpand: true, color: Colors.red, ), ), @@ -51,6 +72,7 @@ void main() { Center( child: Oval( height: 100, + shouldExpand: true, color: ColorWithGradient( const LinearGradient(colors: [Colors.red, Colors.blue])), ), @@ -269,7 +291,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildOval( @@ -280,7 +302,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildOval( @@ -292,7 +314,7 @@ void main() { .background( alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildOval( width: 100, @@ -302,7 +324,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildOval( @@ -313,7 +335,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildOval( @@ -540,34 +562,56 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .background( - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - ) - .buildOval( - width: 100, - height: 80, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: Oval( + width: 100, + height: 80, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -585,8 +629,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -604,8 +648,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, child: Image.memory( data, fit: BoxFit.cover, @@ -630,8 +674,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -651,8 +695,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -672,8 +716,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -699,8 +743,80 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 80, + // maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + // maxHeight: 25, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, @@ -718,8 +834,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 100, + maxHeight: 50, ), child: Image.memory( data, @@ -735,8 +851,8 @@ void main() { )), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + maxHeight: 25, ), child: Image.memory( data, @@ -1210,10 +1326,10 @@ void main() { testGoldens( '25- test start and swipe angles', (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); + // final file = File( + // path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + // ); + // final data = file.readAsBytesSync(); await tester.pumpWidgetBuilder( Center( child: Column( @@ -1323,20 +1439,6 @@ void main() { ), ], ) - // Image.memory( - // data, - // fit: BoxFit.cover, - // width: 300, - // height: 300, - // ) - // .background() - // .buildOval( - // startAngle: 1, - // swipeAngle: 1, - // width: 150, - // height: 150, - // ) - // .colorize(Colors.amber), ], ), ), @@ -1348,6 +1450,234 @@ void main() { await screenMatchesGolden(tester, 'oval/oval_025'); }, ); + + testGoldens( + '25- with clipBehavior with infinite sized width', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'oval/oval_025bis'); + }, + ); + + testGoldens( + '26- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'oval/oval_026'); + }, + ); + + testGoldens( + '27- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildOval( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'oval/oval_027'); + }, + ); + + testGoldens( + '28- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildOval( + // width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'oval/oval_028'); + }, + ); + + testGoldens( + '29- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildOval( + width: 100, + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'oval/oval_029'); + }, + ); + }, + ); + + testGoldens( + '30- inkWell', + (tester) async { + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildOval(), + const Text('build foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildOval(), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build background')); + await tester.press(find.text('build foreground')); + + await screenMatchesGolden(tester, 'oval/oval_030'); }, ); } diff --git a/test/r_capsule_test.dart b/test/r_capsule_test.dart index 2876182..8ad72a7 100644 --- a/test/r_capsule_test.dart +++ b/test/r_capsule_test.dart @@ -11,12 +11,32 @@ void main() { group( 'rectangle', () { + testGoldens( + '1- Shrink to take the min available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: RRectangle.capsule( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rcapsule/rcapsule_0001'); + }, + ); testGoldens( '1- Expands to take the max available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( - Center(child: RRectangle.capsule()), + Center( + child: RRectangle.capsule( + shouldExpand: true, + )), wrapper: materialAppWrapper( theme: ThemeData.light(), platform: TargetPlatform.android, @@ -32,6 +52,7 @@ void main() { Center( child: RRectangle.capsule( width: 100, + shouldExpand: true, color: Colors.red, ), ), @@ -51,6 +72,7 @@ void main() { Center( child: RRectangle.capsule( height: 100, + shouldExpand: true, color: ColorWithGradient( const LinearGradient(colors: [Colors.red, Colors.blue])), ), @@ -269,7 +291,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildCapsule( @@ -280,7 +302,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildCapsule( @@ -292,7 +314,7 @@ void main() { .background( alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildCapsule( width: 100, @@ -302,7 +324,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildCapsule( @@ -313,7 +335,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildCapsule( @@ -540,34 +562,56 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .background( - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - ) - .buildCapsule( - width: 100, - height: 80, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCapsule( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: RRectangle.capsule( + width: 100, + height: 80, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -585,8 +629,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -604,8 +648,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, child: Image.memory( data, fit: BoxFit.cover, @@ -630,8 +674,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -651,8 +695,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -672,8 +716,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -699,8 +743,80 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCapsule( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 80, + // maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCapsule( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + // maxHeight: 25, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildCapsule( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, @@ -718,8 +834,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 100, + maxHeight: 50, ), child: Image.memory( data, @@ -735,8 +851,8 @@ void main() { )), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + maxHeight: 25, ), child: Image.memory( data, @@ -1206,6 +1322,198 @@ void main() { await screenMatchesGolden(tester, 'rcapsule/rcapsule_024'); }, ); + + testGoldens( + '26- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCapsule( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rcapsule/rcapsule_026'); + }, + ); + + testGoldens( + '27- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCapsule( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rcapsule/rcapsule_027'); + }, + ); + + testGoldens( + '28- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCapsule( + // width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rcapsule/rcapsule_028'); + }, + ); + + testGoldens( + '29- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildCapsule( + width: 100, + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rcapsule/rcapsule_029'); + }, + ); + }, + ); + + testGoldens( + '30- inkWell', + (tester) async { + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildCapsule(), + const Text('build foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildCapsule(), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build background')); + await tester.press(find.text('build foreground')); + + await screenMatchesGolden(tester, 'rcapsule/rcapsule_030'); }, ); } diff --git a/test/r_rectangle_test.dart b/test/r_rectangle_test.dart index 4f4fcd1..8f599f7 100644 --- a/test/r_rectangle_test.dart +++ b/test/r_rectangle_test.dart @@ -9,14 +9,34 @@ import 'package:path/path.dart' as path; void main() { group( - 'rectangle', + 'rrectangle', () { + testGoldens( + '1- Shrink to take the min available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: RRectangle( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rrectangle/rrectangle_0001'); + }, + ); testGoldens( '1- Expands to take the max available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( - Center(child: RRectangle()), + Center( + child: RRectangle( + shouldExpand: true, + )), wrapper: materialAppWrapper( theme: ThemeData.light(), platform: TargetPlatform.android, @@ -32,6 +52,7 @@ void main() { Center( child: RRectangle( width: 100, + shouldExpand: true, color: Colors.red, ), ), @@ -51,6 +72,7 @@ void main() { Center( child: RRectangle( height: 100, + shouldExpand: true, color: ColorWithGradient( const LinearGradient(colors: [Colors.red, Colors.blue])), ), @@ -269,7 +291,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildRRect( @@ -280,7 +302,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildRRect( @@ -292,7 +314,7 @@ void main() { .background( alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildRRect( width: 100, @@ -302,7 +324,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildRRect( @@ -313,7 +335,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildRRect( @@ -540,34 +562,56 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .background( - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - ) - .buildRRect( - width: 100, - height: 80, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: RRectangle( + width: 100, + height: 80, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -585,8 +629,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -604,8 +648,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, child: Image.memory( data, fit: BoxFit.cover, @@ -630,8 +674,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -651,8 +695,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -672,8 +716,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -699,8 +743,80 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 80, + // maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + // maxHeight: 25, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, @@ -718,8 +834,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 100, + maxHeight: 50, ), child: Image.memory( data, @@ -735,8 +851,8 @@ void main() { )), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + maxHeight: 25, ), child: Image.memory( data, @@ -765,7 +881,6 @@ void main() { await screenMatchesGolden(tester, 'rrectangle/rrectangle_014'); }, ); - testGoldens( '15- with clipBehavior and image with both image w and h and rect w and h are null', (tester) async { @@ -1295,13 +1410,13 @@ void main() { height: 150, child: Center( child: RRectangle( - child: const FlutterLogo( - size: 100, - ), borderRadius: BorderRadius.circular(30), outerVBorderRadius: const BorderRadius.all( Radius.elliptical(20, 40), ), + child: const FlutterLogo( + size: 100, + ), ).colorize(Colors.amber), ), ).colorize(Colors.green), @@ -1370,13 +1485,13 @@ void main() { height: 150, child: Center( child: RRectangle( - child: const FlutterLogo( - size: 100, - ), borderRadius: BorderRadius.circular(30), outerHBorderRadius: const BorderRadius.all( Radius.elliptical(20, 40), ), + child: const FlutterLogo( + size: 100, + ), ).colorize(Colors.amber), ), ).colorize(Colors.green), @@ -1445,9 +1560,6 @@ void main() { height: 150, child: Center( child: RRectangle( - child: const FlutterLogo( - size: 100, - ), borderRadius: BorderRadius.circular(30), outerHBorderRadius: const BorderRadius.all( Radius.elliptical(20, 40), @@ -1455,6 +1567,9 @@ void main() { outerVBorderRadius: const BorderRadius.all( Radius.elliptical(20, 40), ), + child: const FlutterLogo( + size: 100, + ), ).colorize(Colors.amber), ), ).colorize(Colors.green), @@ -1512,6 +1627,198 @@ void main() { await screenMatchesGolden(tester, 'rrectangle/rrectangle_028'); }, ); + + testGoldens( + '29- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rrectangle/rrectangle_29'); + }, + ); + + testGoldens( + '30- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rrectangle/rrectangle_30'); + }, + ); + + testGoldens( + '32- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRRect( + // width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rrectangle/rrectangle_31'); + }, + ); + + testGoldens( + '32- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRRect( + width: 100, + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rrectangle/rrectangle_32'); + }, + ); + }, + ); + + testGoldens( + '33- inkWell', + (tester) async { + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildRRect(borderRadius: BorderRadius.circular(50)), + const Text('build foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildRRect(borderRadius: BorderRadius.circular(50)), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build background')); + await tester.press(find.text('build foreground')); + + await screenMatchesGolden(tester, 'rrectangle/rrectangle_33'); }, ); } diff --git a/test/r_square_test.dart b/test/r_square_test.dart index 0bea7b0..f38f5a7 100644 --- a/test/r_square_test.dart +++ b/test/r_square_test.dart @@ -12,7 +12,7 @@ void main() { 'rectangle', () { testGoldens( - '1- Expands to take the max available space if both height and width' + '1- Shrink to take the min available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( @@ -22,6 +22,23 @@ void main() { platform: TargetPlatform.android, ), ); + await screenMatchesGolden(tester, 'rsquare/rsquare_0001'); + }, + ); + testGoldens( + '1- Expands to take the max available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: RRectangle.square( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); await screenMatchesGolden(tester, 'rsquare/rsquare_001'); }, ); @@ -262,7 +279,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildRSquare( @@ -272,7 +289,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildRSquare( @@ -283,7 +300,7 @@ void main() { .background( alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildRSquare( side: 80, @@ -292,7 +309,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildRSquare( @@ -302,7 +319,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildRSquare( @@ -518,33 +535,54 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .background( - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - ) - .buildRSquare( - side: 100, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRSquare( + side: 60, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: RRectangle.square( + side: 60, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -556,13 +594,13 @@ void main() { clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -574,13 +612,79 @@ void main() { clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRSquare( + side: 60, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + // maxHeight: 200, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRSquare( + side: 60, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 80, + // maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRSquare( + side: 60, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + // maxHeight: 25, + ), child: Image.memory( data, fit: BoxFit.cover, @@ -592,7 +696,7 @@ void main() { clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), @@ -604,8 +708,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -614,18 +718,19 @@ void main() { height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -634,18 +739,19 @@ void main() { height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -654,11 +760,12 @@ void main() { height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), @@ -670,8 +777,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, @@ -682,14 +789,14 @@ void main() { clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 100, + maxHeight: 50, ), child: Image.memory( data, @@ -699,13 +806,11 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildRSquare( - side: 100, - )), + .buildRSquare(side: 60)), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + maxHeight: 25, ), child: Image.memory( data, @@ -716,7 +821,7 @@ void main() { clipBehavior: Clip.antiAlias, ) .buildRSquare( - side: 100, + side: 60, ) .colorize(Colors.amber), ), @@ -1471,6 +1576,195 @@ void main() { await screenMatchesGolden(tester, 'rsquare/rsquare_028'); }, ); + + testGoldens( + '29- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRSquare( + side: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rsquare/rsquare_029'); + }, + ); + + testGoldens( + '30- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRSquare( + side: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rsquare/rsquare_030'); + }, + ); + + testGoldens( + '31- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRSquare( + side: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rsquare/rsquare_031'); + }, + ); + + testGoldens( + '32- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRSquare( + side: 80, + + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rsquare/rsquare_032'); + }, + ); + }, + ); + testGoldens( + '33- inkWell', + (tester) async { + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildRSquare(borderRadius: BorderRadius.circular(50)), + const Text('build foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildRSquare(borderRadius: BorderRadius.circular(50)), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build background')); + await tester.press(find.text('build foreground')); + + await screenMatchesGolden(tester, 'rsquare/rsquare_33'); }, ); } diff --git a/test/rectangle_.dart b/test/rectangle_.dart deleted file mode 100644 index bf8a68d..0000000 --- a/test/rectangle_.dart +++ /dev/null @@ -1,1088 +0,0 @@ -import 'dart:io'; - -import 'package:flutter/material.dart'; -import 'package:flutter_test/flutter_test.dart'; -import 'package:golden_toolkit/golden_toolkit.dart'; - -import 'package:shape_builder/shape_builder.dart'; -import 'package:path/path.dart' as path; - -void main() { - group( - 'rectangle', - () { - testGoldens( - 'Expands to take the max available space if both height and width' - 'are not specified and the child is null', - (tester) async { - await tester.pumpWidgetBuilder( - Center(child: Rectangle()), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_001'); - }, - ); - testGoldens( - 'Takes the width is specified', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: 100, - color: Colors.red, - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_002'); - }, - ); - - testGoldens( - 'Takes the height is specified', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - height: 100, - color: ColorWithGradient( - const LinearGradient(colors: [Colors.red, Colors.blue])), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_003'); - }, - ); - testGoldens( - 'Takes the both width and height are specified', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - height: 100, - width: 100, - color: ColorWithGradient( - const RadialGradient(colors: [Colors.red, Colors.blue])), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_004'); - }, - ); - - testGoldens( - 'Takes the child specified', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - color: ColorWithGradient( - const RadialGradient(colors: [Colors.red, Colors.blue])), - child: const Text('Hi this is me'), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_005'); - }, - ); - - testGoldens( - 'the child, width and height are specified', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: 100, - height: 100, - boxShadow: BoxShadowWithElevation(5, color: Colors.red), - child: const Text('Hi this is me'), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_006'); - }, - ); - - testGoldens( - 'the child, with Sized box', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: SizedBox( - width: 100, - height: 100, - child: Rectangle( - child: const Text('Hi this is me'), - boxShadow: const [ - BoxShadow( - offset: Offset(4, 4), - spreadRadius: 5, - blurRadius: 3, - ) - ], - ), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_007'); - }, - ); - - testGoldens( - 'with child, with width double. infinity', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: double.infinity, - alignment: Alignment.centerRight, - child: const Text('Hi this is me'), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_008'); - }, - ); - testGoldens( - 'with child, with height double. infinity', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - height: double.infinity, - alignment: Alignment.bottomCenter, - child: const Text('Hi this is me'), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_009'); - }, - ); - testGoldens( - 'with child, with width and height = double. infinity', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: double.infinity, - height: double.infinity, - alignment: Alignment.bottomRight, - child: const Text('Hi this is me'), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_010'); - }, - ); - - testGoldens( - ' with paintStyle', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: 200, - height: 200, - paintStyle: PaintStyle( - style: PaintingStyle.stroke, - strokeWidth: 10, - strokeJoin: StrokeJoin.round, - strokeCap: StrokeCap.square, - strokeMiterLimit: 20, - ), - child: const Text('Hi this is me'), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_011'); - }, - ); - - testGoldens( - ' with clipBehavior', - (tester) async { - await tester.pumpWidgetBuilder( - Center( - child: Column( - children: [ - const Text('1 12 123 1234'), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.centerLeft, - clipBehavior: Clip.antiAlias, - child: const Text('1 12 123 1234'), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.center, - clipShrink: true, - clipBehavior: Clip.antiAlias, - child: const Text('1 12 123 1234'), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.centerRight, - clipShrink: true, - clipBehavior: Clip.antiAlias, - child: const Text('1 12 123 1234'), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.centerLeft, - clipBehavior: Clip.antiAlias, - clipShrink: false, - child: const Text('1 12 123 1234'), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.center, - clipShrink: false, - clipBehavior: Clip.antiAlias, - child: const Text('1 12 123 1234'), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.centerRight, - clipShrink: false, - clipBehavior: Clip.antiAlias, - child: const Text('1 12 123 1234'), - ).colorize(Colors.amber), - ], - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_012'); - }, - ); - testGoldens( - '13- with clipBehavior and image', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Column( - children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.topLeft, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - const SizedBox(height: 8), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Rectangle( - width: 100, - height: 50, - alignment: Alignment.topLeft, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.topCenter, - clipBehavior: Clip.hardEdge, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.topRight, - clipBehavior: Clip.hardEdge, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ], - ), - const SizedBox(height: 8), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Rectangle( - width: 100, - height: 50, - alignment: Alignment.centerLeft, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.center, - clipBehavior: Clip.hardEdge, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.centerRight, - clipBehavior: Clip.hardEdge, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ], - ), - const SizedBox(height: 8), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Rectangle( - width: 100, - height: 50, - alignment: Alignment.bottomLeft, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.bottomCenter, - clipBehavior: Clip.hardEdge, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Rectangle( - width: 100, - height: 50, - alignment: Alignment.bottomRight, - clipBehavior: Clip.hardEdge, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ], - ), - const SizedBox(height: 4), - ], - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_013'); - }, - ); - - testGoldens( - '14 - with clipBehavior and image with sized box', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Column( - children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - SizedBox( - width: 200, - height: 100, - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ), - SizedBox( - width: 150, - height: 90, - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ), - SizedBox( - width: 100 * .8, - height: 80 * .8, - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ), - ], - ), - const SizedBox(height: 8), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, - ), - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, - ), - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, - ), - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - ).colorize(Colors.amber), - ), - ], - ), - const SizedBox(height: 8), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, - ), - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, - ), - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, - ), - child: Rectangle( - width: 100, - height: 80, - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - ], - ), - ], - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_014'); - }, - ); - - testGoldens( - ' with clipBehavior and image with both image w and h and rect w and h are null', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Rectangle( - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_015'); - }, - ); - - testGoldens( - ' with clipBehavior and image with both image w and h and rect w and h are null' - 'Case inside sized box', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: SizedBox( - width: 400, - height: 400, - child: Rectangle( - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_016'); - }, - ); - - testGoldens( - ' with clipBehavior and image with both only rect w is given', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: 400, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_017'); - }, - ); - testGoldens( - ' with clipBehavior and image with both only rect w is given' - 'With alignment to top left', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - width: 400, - clipBehavior: Clip.antiAlias, - alignment: Alignment.topLeft, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_018'); - }, - ); - - testGoldens( - ' with clipBehavior and image with both only image w is given', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - width: 400, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_019'); - }, - ); - - testGoldens( - ' with clipBehavior and image with both only rect h is given', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - height: 400, - clipBehavior: Clip.antiAlias, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_020'); - }, - ); - - testGoldens( - '21- with clipBehavior and image with both only image h is given', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - height: 40, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_021'); - }, - ); - - testGoldens( - '22- with clipBehavior and image without any dimension and with different sized box', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Column( - children: [ - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 300, - maxHeight: 300, - ), - // width: 300, - // height: 300, - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - SizedBox( - width: 200, - height: 200, - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - SizedBox( - width: 100, - height: 100, - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - ], - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_022'); - }, - ); - - testGoldens( - '23- with clipBehavior and image without img dimension and with different sized box', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Column( - children: [ - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 300, - maxHeight: 300, - ), - // width: 300, - // height: 300, - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - width: 250, - height: 250, - fit: BoxFit.cover, - ), - ).colorize(Colors.amber), - ), - SizedBox( - width: 200, - height: 200, - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 250, - height: 250, - ), - ).colorize(Colors.amber), - ), - SizedBox( - width: 100, - height: 100, - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 250, - height: 250, - ), - ).colorize(Colors.amber), - ), - ], - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_023'); - }, - ); - - testGoldens( - '24- with clipBehavior and image without rect dimension and with different sized box', - (tester) async { - final file = File( - path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), - ); - final data = file.readAsBytesSync(); - await tester.pumpWidgetBuilder( - Center( - child: Column( - children: [ - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 300, - maxHeight: 300, - ), - child: Rectangle( - width: 150, - height: 150, - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 300, - height: 300, - ), - ).colorize(Colors.amber), - ), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 200, - ), - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - width: 150, - height: 150, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 300, - height: 300, - ), - ).colorize(Colors.amber), - ), - ConstrainedBox( - constraints: const BoxConstraints( - maxWidth: 100, - maxHeight: 100, - ), - child: Rectangle( - clipBehavior: Clip.antiAlias, - alignment: Alignment.center, - width: 150, - height: 150, - child: Image.memory( - data, - fit: BoxFit.cover, - width: 300, - height: 300, - ), - ).colorize(Colors.amber), - ), - ], - ), - ), - wrapper: materialAppWrapper( - theme: ThemeData.light(), - platform: TargetPlatform.android, - ), - ); - await screenMatchesGolden(tester, 'rectangle/rectangle_024'); - }, - ); - }, - ); -} diff --git a/test/rectangle_test.dart b/test/rectangle_test.dart index a1635b4..ddc9dcf 100644 --- a/test/rectangle_test.dart +++ b/test/rectangle_test.dart @@ -12,7 +12,7 @@ void main() { 'rectangle', () { testGoldens( - '1- Expands to take the max available space if both height and width' + '1- Shrink to take the min available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( @@ -22,6 +22,23 @@ void main() { platform: TargetPlatform.android, ), ); + await screenMatchesGolden(tester, 'rectangle/rectangle_0001'); + }, + ); + testGoldens( + '1- Expands to take the max available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: Rectangle( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); await screenMatchesGolden(tester, 'rectangle/rectangle_001'); }, ); @@ -32,6 +49,7 @@ void main() { Center( child: Rectangle( width: 100, + shouldExpand: true, color: Colors.red, ), ), @@ -51,6 +69,7 @@ void main() { Center( child: Rectangle( height: 100, + shouldExpand: true, color: ColorWithGradient( const LinearGradient(colors: [Colors.red, Colors.blue])), ), @@ -269,7 +288,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildRect( @@ -280,7 +299,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildRect( @@ -292,7 +311,7 @@ void main() { .background( alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildRect( width: 100, @@ -302,7 +321,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildRect( @@ -313,7 +332,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildRect( @@ -355,7 +374,7 @@ void main() { fit: BoxFit.cover, ) .background( - alignment: Alignment.topLeft, + alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) .buildRect( @@ -540,34 +559,56 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .background( - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, - ) - .buildRect( - width: 100, - height: 80, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: Rectangle( + width: 100, + height: 80, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -585,8 +626,8 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -604,8 +645,77 @@ void main() { .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + // maxHeight: 200, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 80, + // maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + // maxHeight: 25, + ), child: Image.memory( data, fit: BoxFit.cover, @@ -630,8 +740,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -640,6 +750,7 @@ void main() { height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) @@ -651,8 +762,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -661,6 +772,7 @@ void main() { height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) @@ -672,8 +784,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -682,6 +794,7 @@ void main() { height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) @@ -699,8 +812,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, @@ -718,8 +831,8 @@ void main() { ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 100, + maxHeight: 50, ), child: Image.memory( data, @@ -735,8 +848,8 @@ void main() { )), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + maxHeight: 25, ), child: Image.memory( data, @@ -899,6 +1012,7 @@ void main() { data, fit: BoxFit.cover, width: 400, + // height: 400, ) .background( clipBehavior: Clip.antiAlias, @@ -1135,7 +1249,7 @@ void main() { ConstrainedBox( constraints: const BoxConstraints( maxWidth: 300, - maxHeight: 300, + // maxHeight: 300, ), child: Image.memory( data, @@ -1156,7 +1270,7 @@ void main() { ConstrainedBox( constraints: const BoxConstraints( maxWidth: 200, - maxHeight: 200, + // maxHeight: 200, ), child: Image.memory( data, @@ -1177,7 +1291,7 @@ void main() { ConstrainedBox( constraints: const BoxConstraints( maxWidth: 100, - maxHeight: 100, + // maxHeight: 100, ), child: Image.memory( data, @@ -1206,6 +1320,234 @@ void main() { await screenMatchesGolden(tester, 'rectangle/rectangle_024'); }, ); + + testGoldens( + '25- with clipBehavior with infinite sized width', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rectangle/rectangle_025'); + }, + ); + + testGoldens( + '26- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rectangle/rectangle_026'); + }, + ); + + testGoldens( + '27- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRect( + width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rectangle/rectangle_027'); + }, + ); + + testGoldens( + '28- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRect( + // width: 100, + height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rectangle/rectangle_028'); + }, + ); + + testGoldens( + '29- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildRect( + width: 100, + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'rectangle/rectangle_029'); + }, + ); + + testGoldens( + '30- inkWell', + (tester) async { + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build Rect background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildRect(), + const Text('build Rect foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildRect(), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build Rect background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build Rect background')); + await tester.press(find.text('build Rect foreground')); + + await screenMatchesGolden(tester, 'rectangle/rectangle_030'); + }, + ); }, ); } diff --git a/test/square_test.dart b/test/square_test.dart index 70bf773..e9ce545 100644 --- a/test/square_test.dart +++ b/test/square_test.dart @@ -11,12 +11,33 @@ void main() { group( 'rectangle', () { + testGoldens( + '1- Shrink to take the min available space if both height and width' + 'are not specified and the child is null', + (tester) async { + await tester.pumpWidgetBuilder( + Center( + child: Rectangle.square( + shouldExpand: true, + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'square/square_0001'); + }, + ); + testGoldens( '1- Expands to take the max available space if both height and width' 'are not specified and the child is null', (tester) async { await tester.pumpWidgetBuilder( - Center(child: Rectangle.square()), + Center( + child: Rectangle.square( + shouldExpand: true, + )), wrapper: materialAppWrapper( theme: ThemeData.light(), platform: TargetPlatform.android, @@ -233,7 +254,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildSquare(80) @@ -241,7 +262,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: true, + shrinkToClippedSize: true, clipBehavior: Clip.antiAlias, ) .buildSquare(80) @@ -250,14 +271,14 @@ void main() { .background( alignment: Alignment.centerLeft, clipBehavior: Clip.antiAlias, - clipShrink: false, + shrinkToClippedSize: false, ) .buildSquare(80) .colorize(Colors.amber), const Text('1 12 123 1234') .background( alignment: Alignment.center, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildSquare(80) @@ -265,7 +286,7 @@ void main() { const Text('1 12 123 1234') .background( alignment: Alignment.centerRight, - clipShrink: false, + shrinkToClippedSize: false, clipBehavior: Clip.antiAlias, ) .buildSquare(80) @@ -459,31 +480,54 @@ void main() { Center( child: Column( children: [ - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ), - const SizedBox(height: 8), - Image.memory( - data, - fit: BoxFit.cover, - width: 200, - height: 100, - ) - .background( - alignment: Alignment.center, - clipBehavior: Clip.antiAlias, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + const SizedBox(width: 8), + Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, ) - .buildSquare(80) - .colorize(Colors.amber), + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildSquare( + 60, + ) + .colorize(Colors.amber), + ], + ), + const SizedBox(width: 8), Row( mainAxisSize: MainAxisSize.min, children: [ SizedBox( - width: 200, - height: 100, + width: 150, + // height: 200, + child: Rectangle.square( + side: 60, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ), + ).colorize(Colors.amber), + ), + SizedBox( + width: 150, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -494,12 +538,14 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), SizedBox( - width: 150, - height: 90, + width: 80, + // height: 200, child: Image.memory( data, fit: BoxFit.cover, @@ -510,12 +556,14 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), SizedBox( - width: 100 * .8, - height: 80 * .8, + width: 50, + // height: 80 * .8, child: Image.memory( data, fit: BoxFit.cover, @@ -526,7 +574,9 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), ], @@ -537,8 +587,8 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, @@ -550,13 +600,15 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, @@ -568,13 +620,15 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, ), child: Image.memory( data, @@ -586,7 +640,9 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), ], @@ -597,39 +653,77 @@ void main() { children: [ ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 200, - maxHeight: 100, + maxWidth: 300, + // maxHeight: 200, ), child: Image.memory( data, fit: BoxFit.cover, + width: 200, + height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 150, - maxHeight: 90, + maxWidth: 80, + // maxHeight: 50, ), child: Image.memory( data, fit: BoxFit.cover, + width: 200, + height: 100, ) .background( + shouldExpand: true, alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80), + .buildSquare( + 60, + ) + .colorize(Colors.amber), ), ConstrainedBox( constraints: const BoxConstraints( - maxWidth: 100 * .8, - maxHeight: 80 * .8, + maxWidth: 50, + // maxHeight: 25, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + width: 200, + height: 100, + ) + .background( + shouldExpand: true, + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildSquare( + 60, + ) + .colorize(Colors.amber), + ), + ], + ), + const SizedBox(height: 8), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 300, + maxHeight: 200, ), child: Image.memory( data, @@ -639,7 +733,41 @@ void main() { alignment: Alignment.center, clipBehavior: Clip.antiAlias, ) - .buildSquare(80) + .buildSquare( + 60, + ) + .colorize(Colors.amber), + ), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 100, + maxHeight: 50, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildSquare(80)), + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 50, + maxHeight: 25, + ), + child: Image.memory( + data, + fit: BoxFit.cover, + ) + .background( + alignment: Alignment.center, + clipBehavior: Clip.antiAlias, + ) + .buildSquare( + 60, + ) .colorize(Colors.amber), ), ], @@ -1089,6 +1217,195 @@ void main() { ); }, ); + + testGoldens( + '26- with clipBehavior with infinite sized width. case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: SizedBox( + width: double.infinity, + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildSquare( + 80, + ) + .colorize(Colors.amber), + )), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'square/square_026'); + }, + ); + + testGoldens( + '27- with clipBehavior case shouldExpand is true', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildSquare( + 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'square/square_027'); + }, + ); + + testGoldens( + '28- with clipBehavior case shouldExpand is true, shape width = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildSquare( + 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'square/square_028'); + }, + ); + + testGoldens( + '29- with clipBehavior case shouldExpand is true, shape hight = null', + (tester) async { + final file = File( + path.join(Directory.current.path, 'test', 'flutter_logo_image.png'), + ); + final data = file.readAsBytesSync(); + await tester.pumpWidgetBuilder( + Center( + child: Image.memory( + data, + fit: BoxFit.cover, + width: 300, + height: 300, + ) + .background( + shouldExpand: true, + clipBehavior: Clip.antiAlias, + alignment: Alignment.center, + ) + .buildSquare( + 100, + // height: 80, + ) + .colorize(Colors.amber), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + await screenMatchesGolden(tester, 'square/square_029'); + }, + ); + + testGoldens( + '30- inkWell', + (tester) async { + dynamic message; + await tester.pumpWidgetBuilder( + Center( + child: Column( + children: [ + const Text('build background') + .background() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildSquare(), + const Text('build foreground') + .foreground() + .inkWell( + InkWell( + splashColor: Colors.red, + onTap: () { + message = 'onTap'; + }, + ), + ) + .buildSquare(), + ], + ), + ), + wrapper: materialAppWrapper( + theme: ThemeData.light(), + platform: TargetPlatform.android, + ), + ); + expect(message, null); + await tester.tap(find.text('build background')); + await tester.pump(); + expect(message, 'onTap'); + message = null; + await tester.press(find.text('build background')); + await tester.press(find.text('build foreground')); + + await screenMatchesGolden(tester, 'square/square_030'); + }, + ); } class _CustomClipper extends CustomClipper {