Last active
September 25, 2025 15:14
-
-
Save definev/72d0881637a25d884d7b922cab8bb0ff to your computer and use it in GitHub Desktop.
ColoredBox unwanted strip example and fixed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| import 'package:flutter/rendering.dart'; | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return const MaterialApp( | |
| debugShowCheckedModeBanner: false, | |
| home: Scaffold( | |
| body: Center( | |
| child: Column( | |
| mainAxisSize: MainAxisSize.min, | |
| spacing: 8, | |
| children: [ | |
| Text('Current'), | |
| ColoredBox( | |
| color: Colors.orange, | |
| child: Padding( | |
| padding: EdgeInsets.all(2), | |
| child: Row( | |
| mainAxisSize: MainAxisSize.min, | |
| crossAxisAlignment: CrossAxisAlignment.end, | |
| children: [ | |
| ColoredBox( | |
| color: Colors.white, | |
| child: Text("Short", style: TextStyle(fontSize: 16)), | |
| ), | |
| ColoredBox( | |
| color: Colors.white, | |
| child: Text( | |
| "Just text ", | |
| style: TextStyle(fontSize: 14), | |
| ), | |
| ), | |
| ColoredBox( | |
| color: Colors.white, | |
| child: Text( | |
| " Tall text ", | |
| style: TextStyle(fontSize: 18), | |
| ), | |
| ), | |
| ColoredBox( | |
| color: Colors.white, | |
| child: Text("Medium", style: TextStyle(fontSize: 32)), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| Text('Expected'), | |
| CustomColoredBox( | |
| color: Colors.orange, | |
| child: Padding( | |
| padding: EdgeInsets.all(2), | |
| child: Row( | |
| mainAxisSize: MainAxisSize.min, | |
| crossAxisAlignment: CrossAxisAlignment.end, | |
| children: [ | |
| CustomColoredBox( | |
| color: Colors.white, | |
| child: Text("Short", style: TextStyle(fontSize: 16)), | |
| ), | |
| CustomColoredBox( | |
| color: Colors.white, | |
| child: Text( | |
| "Just text ", | |
| style: TextStyle(fontSize: 14), | |
| ), | |
| ), | |
| CustomColoredBox( | |
| color: Colors.white, | |
| child: Text( | |
| " Tall text ", | |
| style: TextStyle(fontSize: 18), | |
| ), | |
| ), | |
| CustomColoredBox( | |
| color: Colors.white, | |
| child: Text("Medium", style: TextStyle(fontSize: 32)), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| /// A widget that paints its area with a specified [Color] and then draws its | |
| /// child on top of that color. | |
| class CustomColoredBox extends SingleChildRenderObjectWidget { | |
| /// Creates a widget that paints its area with the specified [Color]. | |
| const CustomColoredBox({required this.color, super.child, super.key}); | |
| /// The color to paint the background area with. | |
| final Color color; | |
| @override | |
| RenderObject createRenderObject(BuildContext context) { | |
| return _RenderColoredBox(color: color); | |
| } | |
| @override | |
| void updateRenderObject(BuildContext context, RenderObject renderObject) { | |
| (renderObject as _RenderColoredBox).color = color; | |
| } | |
| @override | |
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | |
| super.debugFillProperties(properties); | |
| properties.add(DiagnosticsProperty<Color>('color', color)); | |
| } | |
| } | |
| class _RenderColoredBox extends RenderProxyBoxWithHitTestBehavior { | |
| _RenderColoredBox({required Color color}) | |
| : _color = color, | |
| super(behavior: HitTestBehavior.opaque); | |
| /// The fill color for this render object. | |
| Color get color => _color; | |
| Color _color; | |
| set color(Color value) { | |
| if (value == _color) { | |
| return; | |
| } | |
| _color = value; | |
| markNeedsPaint(); | |
| } | |
| @override | |
| void paint(PaintingContext context, Offset offset) { | |
| // It's tempting to want to optimize out this `drawRect()` call if the | |
| // color is transparent (alpha==0), but doing so would be incorrect. See | |
| // https://github.com/flutter/flutter/pull/72526#issuecomment-749185938 for | |
| // a good description of why. | |
| if (size > Size.zero) { | |
| context.canvas.drawRect( | |
| offset & size, | |
| Paint() | |
| ..color = color | |
| ..filterQuality = FilterQuality.low | |
| ..isAntiAlias = false, | |
| ); | |
| } | |
| if (child != null) { | |
| context.paintChild(child!, offset); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment