luckybilly / widget_chain

Chain programming, not widget nesting constructors. Get rid of the nested hell with shiny extensions, now!

widget_chain

Get rid of the nested hell with shiny extensions, now!

Chain programming, not widget nesting constructors.

Container buildItem(String name) {
  return Icon(Icons.phone)
    .addNeighbor(Text(name))
    .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
    .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),);
}

Story

If you've ever written anything like this:

/// do you love nested hell?
class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: <Widget>[
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.phone),
                    Text("amy"),
                  ],
                ),
              ),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.phone),
                    Text("billy"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

to resolve nested hell, maybe you will extract a build method, then it looks like:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: <Widget>[
              buildItem("amy"),
              buildItem("billy"),
            ],
          ),
        ),
      ),
    );
  }

  Container buildItem(String name) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.phone),
          Text(name),
        ],
      ),
    );
  }
}

Use widget_chain can replace constructors by an intoXxx() function calling.

The code looks like:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: <Widget>[
              buildItem("amy"),
              buildItem("billy"),
            ],
          ),
        ),
      ),
    );
  }

  Container buildItem(String name) {
    return Icon(Icons.phone)
        .addNeighbor(Text(name))  //the widget(Icon) add a neighbor (Text) and returns a List<Widget>
        .intoRow(crossAxisAlignment: CrossAxisAlignment.center,) // make the List<Widget> as the children of Row, and then returns the Row widget
        .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),) // make the Row as the child of Container, and then returns the Container widget
        ;  
  }
}

Click to show more...

or like this:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: ListView(
            children: WidgetChain
              .addNeighbor(buildItem("amy"),)
              .addNeighbor(buildItem("billy"),),
          ),
        ),
      ),
    );
  }

  Container buildItem(String name) {
    return Icon(Icons.phone)
        .addNeighbor(Text(name))
        .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
        .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),);
  }
}

or like this:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: Offstage(
          offstage: false,
          child: WidgetChain
            .addNeighbor(buildItem("amy"),)
            .addNeighbor(buildItem("billy"),)
            .intoListView(),
        ),
      ),
    );
  }

  Container buildItem(String name) {
    return Icon(Icons.phone)
        .addNeighbor(Text(name))
        .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
        .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),);
  }
}

or like this:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo'),),
      body: Container(
        child: WidgetChain
           .addNeighbor(buildItem("amy"),)
           .addNeighbor(buildItem("billy"),)
           .intoListView()
           .intoOffstage(offstage: false,),
      ),
    );
  }

  Container buildItem(String name) {
    return Icon(Icons.phone)
        .addNeighbor(Text(name))
        .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
        .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),);
  }
}

or like this:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo'),),
        body: WidgetChain
              .addNeighbor(buildItem("amy"),)
              .addNeighbor(buildItem("billy"),)
              .intoListView()
              .intoOffstage(offstage: false)
              .intoContainer()
    );
  }

  Container buildItem(String name) {
    return Icon(Icons.phone)
        .addNeighbor(Text(name))
        .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
        .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),);
  }
}

use buildAllAsWidget extension of List<T>, it looks like this:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var list = ["amy", "billy"]
            .buildAllAsWidget((name) =>
              Icon(Icons.phone)
              .addNeighbor(Text(name))
              .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
              .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),)
            );
    return Scaffold(
        appBar: AppBar(title: Text('Demo'),),
        body: list.intoListView()
            .intoOffstage(offstage: false)
            .intoContainer()
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo'),),
        body: ["amy", "billy"]
            .buildAllAsWidget((name) =>
              Icon(Icons.phone)
              .addNeighbor(Text(name))
              .intoRow(crossAxisAlignment: CrossAxisAlignment.center,)
              .intoContainer(color: Colors.white, padding: EdgeInsets.all(20),)
            )
            .intoListView()
            .intoOffstage(offstage: false)
            .intoContainer()
    );
  }
}

Getting Started

dependencies:
  widget_chain: ^0.1.0

Usage

import 'package:widget_chain/widget_chain.dart';

for Widget:

return widgetA.intoBbb(parmas);

equivalent as:

return Bbb(
  params,
  child: widgetA,
);

for List<Widget>:

return widgetListC.intoDdd(parmas);

equivalent as:

return Ddd(
  params,
  children: widgetListC,
);

widget_chain's Issues

增加新的控件

Card,TabBarView希望也增加上

android studio

我使用最新版本的android studio编写flutter项目，无法像你那样添加我需要的扩展，android studio需要什么配置吗

这个我试了一下 好像加上动画 会出问题

AnimatedSwitcher 用这个 加在一个text上 得到的动画效果和 普通写法的不一样 不知道为什么，
而且感觉影响了执行效率 没有测试，up主试试看，但是我也喜欢up主的这个思路 改成链式写法确实简单直观

问题意见

1.这个封装不够完善,有些组件没有封装
2.这个方式倒向了(是从内往外点),不符合点语法一层层往内走,正常的思维逻辑也是后面的就是子属性方法.

extension methods intoXxx() cause rebuild for const

test code:

void main() {
  test('test const', () {
    foo();
    foo();
  });
}

void foo() {
  var s = const Text("---").intoCenter();
  var i = const Center(
    child: Text("---"),
  );
  debugPrint('');
  debugPrint("s=${s.hashCode.toString()}");
  debugPrint("i=${i.hashCode.toString()}");
}

result:

s=516822764
i=279124051

s=327212696
i=279124051

建议添加 intoInkWell

我超爱此插件，说是最爱的一点都不过分，写出来的代码超级整洁。
在这里想提一个建议，因为我的应用中我的手势检测都使用 InkWell，而不是GestureDetector，
InkWell可以完全代替GestureDetector，因为InkWell有良好的视觉反馈，而GestureDetector缺少有效的反馈。
你的package里面有 intoGestureDetector，但是缺少 intoInkWell，如果能添加的话，我就不用保存我自己修改的版本了，这样就无法顺利升级到更高的版本。

To-do-list

Hi, First of all, thanks for the work. Its a really cool package.

I was wondering if there is a better solution where we can build a package to let users make a method/class chainable by simply adding adecorator to it?

@chain
class Container {
//...
}

Do you think there is a better solution to implement widget chain?

Second, it seems like we would need to add more wrappers to common widgets.
Is there any to-do list so that people can contribute to the project?

If thats the case, it will be greatly helpful if you could write a step-by-step tutorial on how to add a wrapper for widgets for this project.