“This is the 14th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Introduction to the

I have done flutter development and know that when you write a UI, you can’t avoid the nesting of widgets, one layer after another. When you write too much code, it looks very troublesome. Later I found that styled_widget can change the nesting of widgets layer by layer by layer by chain Cool a lot

These three parties take advantage of the extension method introduced after dart2.7.0 to change the widget tree encoding to chain encoding

Pub: pub. Dev/packages/st… Making: github.com/ReinBentdal…

example

Let’s take a look at an example, a simple square with a shaded rounded corner on the outside and two circles on the inside with an Icon in the middle. Let’s look at the tree encoding first and then the chain encoding using styled_widget

Tree coding

DecoratedBox(
  decoration: BoxDecoration(
    color: Color(0xffEBECF1),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Card(
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Color(0xffE8F2F7),
            shape: BoxShape.circle,
          ),
          child: Padding(
            padding: EdgeInsets.all(15),
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Color(0xff7AC1E7),
                shape: BoxShape.circle,
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Icon(
                  OMIcons.home,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);
Copy the code

The chain code

Icon(OMIcons.home, color: Colors.white)
  .padding(all: 10)
  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)
  .padding(all: 15)
  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)
  .padding(all: 20)
  .card(
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  )
  .alignment(Alignment.center)
  .backgroundColor(Color(0xffEBECF1));
Copy the code

It’s pretty obvious, 39 lines of code before chained coding, 14 lines after chained coding, and you don’t have to pair parentheses anymore, so it’s a lot cleaner

List of animations and methods

Styled_widget also provides some simple animations to be used with widgets

YourWidget()
  .padding(
    all: onTapState ? 10 : 20,
    animate: true,
  )
  .animation(
    duration: Duration(milliseconds: 300),
    curve: Curves.easeOut,
  )

Copy the code

At present, all the methods are on Github. Interested partners can have a look in advance, and I will introduce all the methods later

conclusion

I hope you can share some good three parties in the comments section, learn together and make progress together

As a primary student of Flutter, I hope you can give me more advice and discuss with me if there is any problem