Skip to content

Instantly share code, notes, and snippets.

@MaximilianKlein
Last active March 30, 2021 05:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MaximilianKlein/d6485e25122d96f4290c42e83f850244 to your computer and use it in GitHub Desktop.
Save MaximilianKlein/d6485e25122d96f4290c42e83f850244 to your computer and use it in GitHub Desktop.
Overflowing Widget inside a Row
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text("hello!")),
body: BasicWidget(),
));
}
}
class BasicWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(children: [
Container(
color: Colors.green,
padding: EdgeInsets.only(top: 20, left: 20, right: 20, bottom: 10),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Text('hello')),
Expanded(child: Text('b')),
Expanded(child: Text('c')),
]))),
Container(
color: Colors.green,
padding: EdgeInsets.only(top: 10, left: 20, right: 20, bottom: 10),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(mainAxisSize: MainAxisSize.max, children: [
Text('hello'),
Expanded(
child: OverlayWidget(
child: Text('*',
style: TextStyle(
color: Colors.red, fontSize: 34)),
keepHeight: false,
keepWidth: true)),
])),
Expanded(child: Text('b')),
Expanded(child: Text('c')),
]))),
Container(
color: Colors.green,
padding: EdgeInsets.only(top: 10, left: 20, right: 20, bottom: 20),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Text('hello')),
Expanded(child: Text('b')),
Expanded(child: Text('c')),
]))),
Container(color: Colors.red, height: 700),
]);
}
}
class OverlayWidget extends SingleChildRenderObjectWidget {
const OverlayWidget({
Key? key,
this.keepHeight = true,
this.keepWidth = true,
required Widget child,
}) : super(key: key, child: child);
final bool keepHeight;
final bool keepWidth;
@override
RenderObject createRenderObject(BuildContext context) {
return _OverlayWidgetRenderObject(
keepHeight: keepHeight,
keepWidth: keepWidth,
);
}
}
/// An element that notifies whenever its size changes.
class _OverlayWidgetRenderObject extends RenderProxyBox {
_OverlayWidgetRenderObject({
required this.keepHeight,
required this.keepWidth,
});
final bool keepHeight;
final bool keepWidth;
Size? _size;
@override
void paint(PaintingContext context, Offset offset) {
super.paint(
context,
offset.translate(
0,
keepHeight ? 0 : -_size!.height / 2,
));
}
@override
void performLayout() {
super.performLayout();
_size = child!.size;
size = constraints.constrain(Size(
constraints.biggest.width,
keepHeight ? size.height : 0,
));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment