Last active
July 14, 2023 10:45
-
-
Save jogboms/3111f38bc3b1433fa12f90c057fd6997 to your computer and use it in GitHub Desktop.
An Alternative idea to styling Text widgets
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
/// How to use | |
/// | |
/// ModifiedText( | |
/// "hello", | |
/// modifier: TextModifiers.fontSize(50).bold.primaryColor, | |
/// ) | |
class ModifiedText extends StatelessWidget { | |
const ModifiedText(this.data, {Key? key, this.modifier = TextModifiers}) : super(key: key); | |
final String data; | |
final TextModifierBuilder modifier; | |
@override | |
Widget build(BuildContext context) => Text(data, style: modifier(context)); | |
} |
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'; | |
/// How to use | |
/// | |
/// Text( | |
/// "hello", | |
/// TextModifiers.fontSize(50).bold.primaryColor(context) | |
/// ) | |
// ignore: constant_identifier_names | |
const TextModifiers = TextModifierBuilder(); | |
typedef TextModifier = TextStyle Function(TextStyle style, ThemeData theme); | |
class TextModifierBuilder { | |
const TextModifierBuilder([this._modifiers = const <TextModifier>[]]); | |
final List<TextModifier> _modifiers; | |
TextStyle call(BuildContext context) => build(context); | |
TextStyle build(BuildContext context) { | |
final theme = Theme.of(context); | |
return _modifiers.fold(const TextStyle(), (style, modifier) => modifier(style, theme)); | |
} | |
TextModifierBuilder append(TextModifier modifier) => | |
TextModifierBuilder([..._modifiers, modifier]); | |
TextModifierBuilder prepend(TextModifier modifier) => | |
TextModifierBuilder([modifier, ..._modifiers]); | |
} | |
extension TextModifiersExtensions on TextModifierBuilder { | |
TextModifierBuilder get bold => append((style, _) => style.copyWith(fontWeight: FontWeight.bold)); | |
TextModifierBuilder get primaryColor => | |
append((style, theme) => style.copyWith(color: theme.colorScheme.primary)); | |
TextModifierBuilder fontSize(double fontSize) => | |
append((style, _) => style.copyWith(fontSize: fontSize)); | |
} |
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'; | |
// ignore: constant_identifier_names | |
const TextModifiers = TextModifierBuilder(); | |
class TextModifierContext { | |
const TextModifierContext({required this.style}); | |
final TextStyle style; | |
TextModifierContext copyWith({TextStyle? style}) => | |
TextModifierContext(style: style ?? this.style); | |
} | |
typedef TextModifier = TextModifierContext Function(TextModifierContext style, ThemeData theme); | |
class TextModifierBuilder { | |
const TextModifierBuilder([this._modifiers = const <TextModifier>[]]); | |
final List<TextModifier> _modifiers; | |
TextModifierContext call(BuildContext context) => build(context); | |
TextModifierContext build(BuildContext context) { | |
final theme = Theme.of(context); | |
return _modifiers.fold( | |
const TextModifierContext(style: TextStyle()), | |
(context, modifier) => modifier(context, theme), | |
); | |
} | |
TextModifierBuilder append(TextModifier modifier) => | |
TextModifierBuilder([..._modifiers, modifier]); | |
} | |
extension TextModifiersExtensions on TextModifierBuilder { | |
TextModifierBuilder get bold => append( | |
(context, _) => context.copyWith(style: context.style.copyWith(fontWeight: FontWeight.bold))); | |
TextModifierBuilder get primaryColor => append((context, theme) => | |
context.copyWith(style: context.style.copyWith(color: theme.colorScheme.primary))); | |
TextModifierBuilder fontSize(double fontSize) => | |
append((context, _) => context.copyWith(style: context.style.copyWith(fontSize: fontSize))); | |
} |
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'; | |
/// How to use | |
/// | |
/// Text( | |
/// "hello", | |
/// TextModifiers.from(context).fontSize(50).bold.primaryColor() | |
/// ) | |
class TextModifiers { | |
static TextModifierBuilder from(BuildContext context) => TextModifierBuilder(Theme.of(context)); | |
} | |
typedef TextModifier = TextStyle Function(TextStyle style, ThemeData theme); | |
class TextModifierBuilder { | |
TextModifierBuilder(this._themeData, [this._modifiers = const <TextModifier>[]]); | |
final ThemeData _themeData; | |
final List<TextModifier> _modifiers; | |
TextStyle call() => build(); | |
TextStyle build() => | |
_modifiers.fold(const TextStyle(), (style, modifier) => modifier(style, _themeData)); | |
TextModifierBuilder append(TextModifier modifier) => | |
TextModifierBuilder(_themeData, [..._modifiers, modifier]); | |
TextModifierBuilder prepend(TextModifier modifier) => | |
TextModifierBuilder(_themeData, [modifier, ..._modifiers]); | |
} | |
extension TextModifiersExtensions on TextModifierBuilder { | |
TextModifierBuilder get bold => append((style, _) => style.copyWith(fontWeight: FontWeight.bold)); | |
TextModifierBuilder get primaryColor => | |
append((style, theme) => style.copyWith(color: theme.colorScheme.primary)); | |
TextModifierBuilder fontSize(double fontSize) => | |
append((style, _) => style.copyWith(fontSize: fontSize)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment