Styledwidget - Simplifying widget style in Flutter.

This PR should solve this issue #59. I could make them in one single method with all the method args for each, instead of having two methods:

• padding, paddingDirectional
• positioned, positionedDirectional
• borderRadius, borderRadiusDirectional

But this would confuse the developer which arg to use if we made a method that takes all these args:

• start
• end
• top
• bottom
• left
• right
• horizontal
• vertical
• all

I think what I did is much more convenient to have those methods separated, like Flutter does:

• EdgeInsets, EdgeInsetsDirectional
• Positioned, PositionedDirectional
• BorderRadius, BorderRadiusDirectional

These facilities help with decoupling styles while retaining the hot reload functionality.

class Styles {
  static TextWrapper get myBeautifulLabel =>
      (Text text) => text.fontSize(14).textColor(Colors.lightBlue);
}
...
Text('Lorem Ipsum').wrap(Styles.myBeautifulLabel)
...

Also, the context can also be provided with wrapWithContext for media queries amongst other things.

It would be nice to have an API where you could apply styles directly from the theme.

Example:

Text("Some text").body1()
Text("Some text").caption()

I achieve this in my own app by creating a StyledTheme widget with a static global key that wraps theme. Then wrap the application in StyledTheme as the child of MaterialApp.

class StyledTheme extends StatefulWidget {
  final Widget child;

  StyledTheme({Key key, this.child}) : super(key: key);

  @override
  _StyledThemeState createState() => _StyledThemeState();

  static ThemeData get theme {
    return Theme.of(_StyledThemeState.styledThemeKey.currentContext);
  }
}

class _StyledThemeState extends State<StyledTheme> {
  static GlobalKey<_StyledThemeState> styledThemeKey = GlobalKey<_StyledThemeState>();

  @override
  Widget build(BuildContext context) {
    return Theme(
      key: styledThemeKey,
      data: theme,
      child: widget.child,
    );
  }
}

I have not been able to find a better way to acheive this.

In 0.3.1 code like: SomeWidget(...).translate(offset: ..., animate: true) throws:

======== Exception caught by widgets library =======================================================
The following _CastError was thrown building _StyledAnimatedBuilder(dependencies: [_StyledInheritedAnimation]):
type 'Null' is not a subtype of type 'AlignmentGeometryTween' in type cast

The relevant error-causing widget was: 
  _StyledAnimatedBuilder file:///Users/ds/.pub-cache/hosted/pub.dartlang.org/styled_widget-0.3.1/lib/src/extensions/widget_extension.dart:861:13
When the exception was thrown, this was the stack: 
#0      _AnimatedTransformState.forEachTween (package:styled_widget/src/animated_widget.dart:263:9)
#1      ImplicitlyAnimatedWidgetState._constructTweens (package:flutter/src/widgets/implicit_animations.dart:427:5)
#2      ImplicitlyAnimatedWidgetState.initState (package:flutter/src/widgets/implicit_animations.dart:381:5)
#3      AnimatedWidgetBaseState.initState (package:flutter/src/widgets/implicit_animations.dart:553:11)
#4      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4632:57)
...

I think you should change as AlignmentGeometryTween; to as AlignmentGeometryTween?; at mentioned in stack trace line 263

Hi, One issue that seems to be present when we decouple the styles is that the hot reload no longer works when the styles are changed (at least it is my experience with division), is there anything that can be done about this?

Hi, first of all I really love your division library. I used Parent() a lot to create "wrap_content" layout on flutter. How can I build widget like Parent() using styled_widget? Thanks.

Would it be possible to add a separator builder, so we can do something like:

[
   Text(),
   Text(),
].toColumn(separator: ()=>SizedBox(height: 8))

I often find myself having to chain both width and height, width(50).height(50) would read better as size(50,50)

Additionally, when alignment things, it can be overly verbose: .alignment(Alignment.center) could just be center()

First of all: I was already using your division-library and now I'm using this. I like both very much! 👌

I was searching to achieve something like this:

Text.rich(
  TextSpan(
    children: <InlineSpan>[
      TextSpan(text: 'All data will be deleted and '),
      TextSpan(
        text: 'this cannot be undone!',
        style: TextStyle(
          color: Colors.red,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
),

but couldn't find anything similar in division or styled_widgets (I was looking for either Txt.rich or just Txt(children:..), for styled_widgets Text(..).rich/children(..)).

Am I missing something or is this a possible future feature? If so, do you already have some ideas about this or do you need some inspiration? :)

Is it possible to create Stacks and position them to a specific percentage of their parent width,heigh?

Thanks for your work with styled_widget, it is fantastic!

I saw its possible to use the Styled.widget(child) in the example, but this does not seem have the methods that are available for Text e.g. textColor().

            Text('NAME')
                .fontSize(16)
                .fontWeight(FontWeight.w600)
                .textColor(Colors.black),

            Text('AGE')
                .fontSize(16)
                .fontWeight(FontWeight.w600)
                .textColor(Colors.black),

Imagine we had something like above, it seems redundant to repeat ourselves. Is there a possibility to create a base style that can be applied to all Text widgets

e.g.

     final styledText= (Widget child) => StyledText.widget(child)
        .textColor(Colors.black)
        .fontSize(16)

     styledText(Text('NAME')),
     styledText(Text('AGE')),

or

Text('NAME')
  .applyStyles(?)

Text('AGE')
  .applyStyles(?)

The use case for .material is mostly when you just want to wrap something in Material so that widgets that require material parents work correctly. I kinda understand that maybe this use case doesn't warrant adding it to this repository so I can revert it if you want :).

.textWidthBasic() .textDirection() conflict with the origin same name properties

Flutter 2.13.0-0.2.pre • channel beta • https://github.com/flutter/flutter.git Framework • revision 8662e22bac (4 days ago) • 2022-04-20 08:21:52 -0700 Engine • revision 24a02fa5ee Tools • Dart 2.17.0 (build 2.17.0-266.5.beta) • DevTools 2.12.2

Hey guys! I just discovered Styled_Widgets and I'd like to say Kudos! for building such a wonderful library.

I have 2, rather simple questions.

1. Would using this package have any effect on the performance of the app, assuming that it is a graphically intensive application?
2. Can I use this to build a desktop app? (I am assuming that I can because of how flutter compiles Dart code to desktop bundles)

Thanks!

Scale method has named parameter and hasn't declared on what type of argument does pressed ? 0.95 : 1.0 would be.

Line 231 .scale(pressed ? 0.95 : 1.0, animate: true)