Created
August 18, 2020 04:29
-
-
Save kaboc/9359135008abcdaf613a7ed846497f37 to your computer and use it in GitHub Desktop.
Three ways to allow the child to overflow the parent.
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'; | |
| void main() { | |
| runApp( | |
| const MaterialApp( | |
| home: SafeArea( | |
| child: Scaffold( | |
| body: App(), | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| class App extends StatelessWidget { | |
| const App(); | |
| @override | |
| Widget build(BuildContext context) { | |
| return LayoutBuilder( | |
| builder: (context, constraints) { | |
| final boxSize = constraints.maxHeight / 3 - 70; | |
| final iconSize = boxSize / 3; | |
| final padding = EdgeInsets.symmetric( | |
| horizontal: (constraints.maxWidth - boxSize) / 2, | |
| vertical: (constraints.maxHeight / 3 - boxSize) / 2, | |
| ); | |
| return Column( | |
| children: [ | |
| Flexible( | |
| child: Padding( | |
| padding: padding, | |
| child: Sample1(boxSize, iconSize), | |
| ), | |
| ), | |
| Flexible( | |
| child: Padding( | |
| padding: padding, | |
| child: Sample2(iconSize), | |
| ), | |
| ), | |
| Flexible( | |
| child: Padding( | |
| padding: padding, | |
| child: Sample3(iconSize), | |
| ), | |
| ), | |
| ], | |
| ); | |
| }, | |
| ); | |
| } | |
| } | |
| class Sample1 extends StatelessWidget { | |
| const Sample1(this.boxSize, this.iconSize); | |
| final double boxSize; | |
| final double iconSize; | |
| @override | |
| Widget build(BuildContext context) { | |
| return ColoredBox( | |
| color: Colors.red.shade200, | |
| child: OverflowBox( | |
| maxWidth: boxSize + iconSize, | |
| maxHeight: boxSize + iconSize, | |
| child: Align( | |
| alignment: Alignment.topRight, | |
| child: Icon(Icons.cancel, size: iconSize), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class Sample2 extends StatelessWidget { | |
| const Sample2(this.iconSize); | |
| final double iconSize; | |
| @override | |
| Widget build(BuildContext context) { | |
| return ColoredBox( | |
| color: Colors.red.shade200, | |
| child: Align( | |
| alignment: Alignment.topRight, | |
| child: Transform.translate( | |
| offset: Offset(iconSize / 2, -iconSize / 2), | |
| child: Icon(Icons.cancel, size: iconSize), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class Sample3 extends StatelessWidget { | |
| const Sample3(this.iconSize); | |
| final double iconSize; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Stack( | |
| overflow: Overflow.visible, | |
| children: [ | |
| Positioned.fill( | |
| child: ColoredBox( | |
| color: Colors.red.shade200, | |
| ), | |
| ), | |
| Positioned( | |
| top: -iconSize / 2, | |
| right: -iconSize / 2, | |
| child: Icon(Icons.cancel, size: iconSize), | |
| ), | |
| ], | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment