Created
June 14, 2023 17:32
-
-
Save caseycrogers/48af3f80c85eed0b97d9ede6eba1cc09 to your computer and use it in GitHub Desktop.
An alternative to the extension method system for styling widgets without excessive nesting.
This file contains 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'; | |
abstract class StatelessContainerWidget extends StatelessWidget { | |
/// A constructor that exposes all of the `Container` arguments as a style | |
/// object. | |
const StatelessContainerWidget({ | |
super.key, | |
this.cStyle, | |
}); | |
final ContainerStyle? cStyle; | |
/// Build wraps the child in a container. | |
@override | |
Widget build(BuildContext context) { | |
if (cStyle == null) { | |
return buildTwoElectricBoogaloo(context); | |
} | |
return Container( | |
alignment: cStyle!.alignment, | |
padding: cStyle!.padding, | |
color: cStyle!.color, | |
decoration: cStyle!.decoration, | |
foregroundDecoration: cStyle!.foregroundDecoration, | |
width: cStyle!.width, | |
height: cStyle!.height, | |
constraints: cStyle!.constraints, | |
margin: cStyle!.margin, | |
transform: cStyle!.transform, | |
transformAlignment: cStyle!.transformAlignment, | |
clipBehavior: cStyle!.clipBehavior, | |
child: Builder(builder: (context) => buildTwoElectricBoogaloo(context)), | |
); | |
} | |
/// Override this instead of [build]. | |
Widget buildTwoElectricBoogaloo(BuildContext context); | |
} | |
class ContainerStyle { | |
const ContainerStyle({ | |
this.alignment, | |
this.padding, | |
this.color, | |
this.decoration, | |
this.foregroundDecoration, | |
this.width, | |
this.height, | |
this.constraints, | |
this.margin, | |
this.transform, | |
this.transformAlignment, | |
this.clipBehavior = Clip.none, | |
}); | |
final AlignmentGeometry? alignment; | |
final EdgeInsets? padding; | |
final Color? color; | |
final BoxDecoration? decoration; | |
final BoxDecoration? foregroundDecoration; | |
final BoxConstraints? constraints; | |
final EdgeInsetsGeometry? margin; | |
final Matrix4? transform; | |
final AlignmentGeometry? transformAlignment; | |
final Clip clipBehavior; | |
final double? width; | |
final double? height; | |
} | |
class MyWidget extends StatelessContainerWidget { | |
const MyWidget({ | |
super.key, | |
super.cStyle, | |
}); | |
@override | |
Widget buildTwoElectricBoogaloo(BuildContext context) { | |
return const Column( | |
children: [ | |
CStyleText( | |
'this is padded', | |
cStyle: ContainerStyle( | |
padding: EdgeInsets.all(8), | |
), | |
), | |
CStyleText( | |
'this is padded with a blue background', | |
cStyle: ContainerStyle( | |
color: Colors.blue, | |
padding: EdgeInsets.all(8), | |
), | |
), | |
CStyleText( | |
'this avoids the nesting of Container while remaining Flutter ' | |
'idiomatic.', | |
cStyle: ContainerStyle( | |
color: Colors.red, | |
padding: EdgeInsets.all(8), | |
margin: EdgeInsets.only(top: 4), | |
width: 200, | |
height: 200, | |
), | |
), | |
], | |
); | |
} | |
} | |
class CStyleText extends StatelessContainerWidget { | |
const CStyleText( | |
this.text, { | |
super.key, | |
super.cStyle, | |
}); | |
final String text; | |
@override | |
Widget buildTwoElectricBoogaloo(BuildContext context) { | |
return Text(text); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment