Skip to content

Instantly share code, notes, and snippets.

@caseycrogers
Created June 14, 2023 17:32
Show Gist options
  • Save caseycrogers/48af3f80c85eed0b97d9ede6eba1cc09 to your computer and use it in GitHub Desktop.
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.
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