I have made a new package called styled_widget which uses the new dart extension feature added in dart version 2.6.0. This is just an early concept.

GitHub: https://github.com/ReinBentdal/styled_widget
Pub: https://pub.dev/packages/styled_widget (Pub clearly didnt like dart version 2.6.0)

What do you think? Is there a future in styling widgets this way? If you like the concept or dont, let me know! Of course contributions are very welcome.

When using ripple effect with onTap/onTapDown/onTapUp gesture, the function from onTap is never called on division 0.7.0. On changelog says it was fixed on version 0.6.4 for all gestures, and it works with every gesture but onTap ones.

Example:

Division(
	style: S()
	  ..background.color(Colors.red)
	  ..height(32)
	  ..ripple(true)
	  ..width(32),
	gesture: G()..onTap(() => print('Hello')),
	child: Container(),
),

It never prints Hello when ripple is true.

flutter doctor

[√] Flutter (Channel stable, v1.7.8+hotfix.4, on Microsoft Windows [Version 10.0.18362.239], locale en-US)
    • Flutter version 1.7.8+hotfix.4 at C:\src\flutter
    • Framework revision 20e59316b8 (3 weeks ago), 2019-07-18 20:04:33 -0700
    • Engine revision fee001c93f
    • Dart version 2.4.0

 
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\jeanl\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[√] Android Studio (version 3.4)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 38.1.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[√] VS Code (version 1.36.1)
    • VS Code at C:\Users\jeanl\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.3.0

[√] Connected device (1 available)
    • SNE LX3 • DVR0218A08000797 • android-arm64 • Android 9 (API 28)

• No issues found

hidden,
hidden-[direction],
scollable (SingleChildScrollView),
scollable-[direction],
visible (flutter default overflow)

I use CachedNetworkImage a lot and it's not possible to pass that as the image parameter of a division.
A simple ImageProvider could allow the user to use whatever alternative provider he or she wants other than simply AssetImage or NetworkImage

Hi, congratz on the library, its a great start.

Are there any plans for future improvements? It seems that the next thing to do is to make more Styled widgets like Row -> StyledRow and Col -> StyledCol. Also if you find this to be a logic next step I would also advise you to use a new naming scheme for the widget classes Parent -> StyledContainer and Txt -> StyledText.

While it is currently possible to set a default input value by directly setting the positional argument of the Txt widget, the default value only appears after the field is selected, causing a weird jump from an empty to a filled field.

Related but not part of the request, it would also be nice to have a way to have a value implementation alongside the defaultValue, which is similar to HTML's implementation of value and defaultValue.

Change the widget tree inside the Division widget to performe better. Only include widgets in use

It's possible to build flutter widgets from html.

Normally, to detect a gesture on a container that does not have a background color, one would need to set GestureDetector(behavior: HitTestBehavior.opaque)

(for example, you could need a transparent background on a tappable region because it is contained inside a rounded widget and you don't want to cover the rounded border with the color of the tappable rectangular region).

It would be cool to add that property to GestureClass

The problem is that ripple doesn't affect children. How it can be fixed?
If I wrap the parent with another parent and add ripple to it, it doesn't actually work as it has to do.

after tap:

Parent(
      style: ParentStyle()
        ..background.color(Theme.of(context).accentColor)
        ..borderRadius(all: flashcardSmallBorderRadius)
        ..border(all: 1, color: Colors.grey[100])
        ..elevation(10, color: Colors.grey[400])
        ..animate(100, Curves.bounceIn)
        ..ripple(!isIOS)
        ..margin(
            vertical: flashcardSmallVerticalMargin,
            horizontal: flashcardSmallHorizontalMargin)
        ..padding(
            vertical: flashcardSmallVerticalPadding,
            horizontal: flashcardSmallHorizontalPadding),
      child: Column(
        children: <Widget>[
          flashcard.frontText.isNotEmpty
              ? SmallFlashcardTitle(flashcard.frontText)
              : Container(),
          flashcard.frontImages.isNotEmpty
              ? CustomImage(
                  imagePaths: flashcard.frontImages,
                )
              : Container(),
          Container(
            margin: EdgeInsets.symmetric(vertical: flashcardSmallSidesDistance),
            color: Theme.of(context).dividerColor,
            height: 1,
          ),
          flashcard.backText.isNotEmpty
              ? SmallFlashcardTitle(flashcard.backText)
              : Container(),
          flashcard.backImages.isNotEmpty
              ? CustomImage(
                  imagePaths: flashcard.backImages,
                )
              : Container(),
        ],
      ),
    );

I tested the program from Reso Coder using Flutter Web
https://github.com/ResoCoder/flutter-division-tutorial

I imported Division 0.8.4+1 and it seems to be working.

Was thinking about ways to implement ThemeData into Division.

// TxtStyle.themeData.create(dynamic key)
TxtStyle.themeData.create('button')
  ..borderRadius(all: 10)
  ..elevation(10)
  etc...

  // and maybe
  ..primaryColor(Colors.orange)
  etc...

Widget build(BuildContext context) {
...
Txt(
  'some text',
  style: TxtStyle.themeData.use('button')
    ..rotate(0.5) // posibility to customize default style 
)
...
}

Something like this. And maybe it could respond to theme data set globaly, like brightness: Brightness.dark in some way.

useGlobalTheme for default background color etc.

TxtStyle({AngleFormat angleFormat, bool useGlobalTheme = true}) // or default to false

What do you think? I need feedback to further develop the idea or potentialy discard it. Thanks!

Added a presets file: 'package:division/presets.dart'.

As written in the dartdoc:
https://dart-lang.github.io/linter/lints/avoid_returning_this.html

May revert back that feature and go back to double dotted chained methods.

When I use 0.8.6 version, everything looks beautiful. However, starting with 0.8.7 version, anything wrapped within a Parent does not render the child widget. Looks like the bug is in widget.dart

if (child != null) ParentBuild(child: child);

should be

if (child != null) widgetTree = ParentBuild(child: child);

Expand the StyleClass class to be able to style text aswell

the error and the stack trace

'package:flutter/src/services/text_input.dart': Failed assertion: line 742 pos 12: 'attached': is not true.

The following assertion was thrown building TxtBuildEditable(state: _TxtBuildEditableState#e1377):
'package:flutter/src/services/text_input.dart': Failed assertion: line 742 pos 12: 'attached': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=BUG.md

The relevant error-causing widget was:
Txt file:///C:/workspace/flutter/smart_school/lib/widgets/app_text_field.dart:25:14
When the exception was thrown, this was the stack:
#2 TextInputConnection.setStyle (package:flutter/src/services/text_input.dart:742:12)
#3 EditableTextState.didUpdateWidget (package:flutter/src/widgets/editable_text.dart:1162:29)
#4 StatefulElement.update (package:flutter/src/widgets/framework.dart:4396:58)
#5 Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
#6 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)

here is the code i use as a textField widget in my app. now it works fine but i get this error when i'm using multiple instances of this widget in a page. when i tap first field keyboard pops up and the i tap on another field suddenly error happens. and that only happens if the first field (or any other ) still has the focus.

class AppTextField extends StatefulWidget {
  final StringCallback onChange;
  final String hint;
  final TextInputType inputType;

  AppTextField(this.onChange, {this.hint,this.inputType});

  @override
  State<StatefulWidget> createState() => _AppTextField();
}

class _AppTextField extends State<AppTextField> {
  String value = '';

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: AppColors.THEME_GREY, borderRadius: BorderRadius.circular(6)),
      child: Txt(
        '',
        style: TxtStyle()
          ..fontSize(14)
          ..fontFamily(Fonts.SAMIM)
          ..padding(horizontal: 10,vertical: 5)
          ..editable(
            placeholder: widget.hint,
            maxLines: 1,
            onChange: widget.onChange,
            keyboardType: widget.inputType ?? TextInputType.text
          ),
      ),
    );
  }
}

It seems to be triggered only when a long press is made over a Parent. Additionally, it is triggered twice in that case (at least for me).

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building:
type 'double' is not a subtype of type 'bool'

When the exception was thrown, this was the stack
#0 CoreStyle.border package:division/src/style.dart:178
...
════════════════════════════════════════════════════════════════════════════════

Versions:
division: ^0.8.7+1
flutter: 1.12.13
dart: 2.7.0

Code to reproduce:

  final ParentStyle userCardStyle = ParentStyle()
    ..height(100)
    ..padding(horizontal: 20.0, vertical: 10)
    ..alignment.center()
    ..border(bottom: 1.0, color: Colors.white24);

Not sure if I miss something. But hot reload is not working for me. for example. changing ..textColor(Colors.black)
and save. Nothing happens to the UI. I need to reload manually

Plz put onHighlightChanged, is better to do animations

Documentation is not in the quality i want yet. The current documentation does not follow the documentation guidelines correctly and is not written good and easy to understand.

Is it possible to set the color of an icon using ParentStyle()?

Taking inspiration from SwiftUI to exapnd. The first step i think is to create a text widget almost like the one in the picture.

[Widget name](String text)
  .size(24) // fontsize
  .weight(.bold) // fontweight
  .color('#000000')
  etc

Single dot methods coming in the next update.

Considered Text widget names: Line, Text(override), P, Paragraph, Txt

Hello,

I struggeling a bit with trying to autofocus an element as soon as i toggle the enable variable.

This is my code:

txt(
   widget.category.name,
   style: TxtStyle()
      ..fontSize(26)
      ..fontWeight(FontWeight.w500)
      ..padding(left: 16)
      ..editable(
          enable: _editCategoryName,
          maxLines: 1,
          onChange: (name) {
                widget.category.name = name;
                widget.category.save();
           },
   },
),

In the second example (https://github.com/ReinBentdal/division/blob/master/example/example/example_form.dart) is one property called autoFocus: true, but when i use this property. I get an error:

Compiler message:
lib/pages/todoListe.dart:66:25: Error: No named parameter with the name 'autoFocus'.
                        autoFocus: true,

I also tried using the focus node but i think I did it wrong.

It would be great if someone could show me how to accomplish that.

..circle() instead of ..borderRadius(all:bigNumber)
like "shape: BoxShape.circle" on BoxDecoration
use Radius on circles is not soo good for the eyes

Hi,
I followed the example on youtube, but how to do the animation on the border? I get this code:

style: containerStyle.clone()
          ..elevation(isBeingTapped ? 4 : 8)
          ..scale(isBeingTapped ? 0.975 : 1),

but I don't know how to do this for changing the border

style: containerStyle.clone()
          ..elevation(isBeingTapped ? 4 : 8)
          ..scale(isBeingTapped ? 0.975 : 1)
          ..border(isBeingTapped ? ....),

this gives me:
Too many positional arguments: 0 expected, but 1 found.
Try removing the extra positional arguments, or specifying the name for named ##arguments.dart(extra_positional_arguments_could_be_named)

The diagnostics provieded in the debug console when an error occurs is not precise enough.
aserts in the constructor and debugFillProperties should be implemented for better diagnistocs.

Look at the AnimatedContainer widget source code for examples.

The goal is to be able to specify the parameters you want to animate with the only parameter.

Parameters

StyleClass()..animate(int duration, Curve curve, StyleClass only);

Example

StyleClass()
  ..width(100)
  ..height(100)
  ..animate(
    500,  
    Curves.easeInOut, 
    StyleClass()
      ..borderRadius(all: 15.0));

decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.elliptical(5, 6)),
),

My suggestion

..borderRadius.all(25)
..borderRadius.only(bottomLeft: 5,bottomRight: 5,topLeft: 5,topRight: 5)
..borderRadius.elliptical(5,6)

Hey,

I like your package a lot.

Can you please add support for changing cursor related styles in editable text such as color, ... etc.
The current default color is always black, which can't be seen if the app is using a dark theme.

Known issues:

• Does not work with certain gestures such as onTapUp.
• Does not fill content when both border and borderRadius is in use
• Does not work if alignChild is not defined
• Doesnt activate if pressed directly on the child
• If no child is specified, the app will crash

To sum it up

A rewrite of the ripple method is needed or i might remove it.

Can you implement expanded text?
TxtStyle()..expandedText(max: 50, min: 5)
or
TxtStyle()..expanded(max: 50, min: 5)

In my plugin have an ExpandedText Widget for you to base yourself
https://pub.dev/packages/simple_code#-readme-tab-

Since the StyleClass widget add new style using methods, there is no way of making it a const. That is because changes is made through the methods instead of being defined in the constructor. I dont know the exact performance difference, but it may be significant. Everything would have to be defined in the constructor like:

StyleClass(
  width: 100,
  height: 100,
  backgroundColor: ColorClass.hex('f5f5f5'),
  etc
)

or even

Division(
  child: Widget,
  onTap: () {},
  width: 100,
  elevation: Elevation(10),
  etc
)

Dart that could change help:

• dart-lang/language#357
• extension methods

Adds styling that doesnt permanently affect the StyleClass. Only adds styling to be used one time.

Compared to StylaClass..add(), it doesnt permanently add style.

Usefull when you have a StyleClass to be used on many widgets but with some changes.

All animation happends inside the AnimatedContainer widget. Those properties is not set inside that widget.

Documentation for all widgets and methods should be steamlined and updated.

TxtStyle()..boxShadow(
                  color: Color(0xff000000).withOpacity(0.30),
                  blur: 6,
                  offset: Offset(0.00 , 3.00), 

is different from

TextStyle(
  shadows:[
    Shadow(
      offset: Offset(0.00,3.00),
      color: Color(0xff000000).withOpacity(0.30),
      blurRadius: 6,
    ),
  ], 
),

Thinking of a way to handle the animations internaly inside the Division widget through the S.animation(duration: 500, curve: 'ease-in', only['width', 'margin']) command inside the style property.

Please send suggestions!

Hi @ReinBentdal, I was wondering why you don't use the Material boxshadows that are already on flutter when using elevation with the default color? that would make it look just like the first-party elevation. This is mostly because they use a combination of 3 shadows "Umbra Penumbra and Ambient Shadow."

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/shadows.dart

Version

The following issue was found on the version 0.8.7+2 of division package

The issue

Let's say I want to style a button and add tow state styles (active and inactive). I would create a parent button style the holds all the dimensions specs and then add tow additional styles for active and inactive states. I tried to achieve this with the clone function but it seems to override the parent style. That is all the buttons will sync and get the same style!
Here is an example:

Example

final rootButtonStyle = ParentStyle() 
  ..width(32)
  ..height(32)
  ..borderRadius(all: 16)
  ..border(all: 1)
  ..alignmentContent.center()

final activeButtonStyle = rootButtonStyle()
  ..clone()
  ..background.hex("#0D8E5D");

final disabledButtonStyle = rootButtonStyle()
  ..clone()
  ..background.hex("#919191");

In the above example, all the buttons will be ether in the active or disabled style, depending if I set override to ture or not!

Hint

I explored a bit the source code and found that the clone() function is simply calling the add() function which is simply replacing the styles!

Build a custom ImplicitlyAnimatedWidget to controll all the animations.

Dart interprets # followed by some text as a Symbol. May take advantage of that and convert the symbol to color.

Symbol foo = #f5f5f5
String hexString = MirrorSystem.getName(foo) 
// etc 

May work

It would be cool to clip the content of the Division following the rounded corners set in ..borderRadius() when the overflow parameter is set to "hidden".

Or maybe a whole separate parameter could enforce that behavior, like "roundClip = true" or something!

Optimize the division widget to require less steps before the style is applied to the widget.

Want to aliminate as many of the dynamic parameters as possible. For example

..alignment(dynamic alignment) // alignment("top")

to

..alignment.[position] // alignment.top

Fields i want to change to:

..alignment.[position]
..alignment.coordinate(x, y)
..background.hex(xxxxxx)
..background.rgba(int, int, int, [dynamic])
..background.color([Color])
..background.image()
..background.blur
..overflow.[type] // overflow.hidden(), overflow.scrollable(Axis.vertical) etc

TxtStyle..height doesn't work as expected.
TextStyle(height) works like line-height in css but TxtStyle..height is the container height I believe...
Is there a way to set line-height?