Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luckybilly/widget_chain
Chain programming, not widget nesting constructors. Get rid of the nested hell with shiny extensions, now!
https://github.com/luckybilly/widget_chain
chain-programming dart-extension nested-hell shiny-extensions widget-chain widget-nesting-constructors
Last synced: 2 months ago
JSON representation
Chain programming, not widget nesting constructors. Get rid of the nested hell with shiny extensions, now!
- Host: GitHub
- URL: https://github.com/luckybilly/widget_chain
- Owner: luckybilly
- License: bsd-3-clause
- Created: 2019-12-28T12:23:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-30T04:50:04.000Z (about 5 years ago)
- Last Synced: 2023-11-07T20:06:33.101Z (about 1 year ago)
- Topics: chain-programming, dart-extension, nested-hell, shiny-extensions, widget-chain, widget-nesting-constructors
- Language: Dart
- Homepage:
- Size: 13.7 KB
- Stars: 170
- Watchers: 3
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# widget_chain
Get rid of the nested hell with shiny extensions, now!
Chain programming, not widget nesting constructors.
[](https://pub.dartlang.org/packages/widget_chain)
```dart
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:
```dart
/// 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: [
Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.phone),
Text("amy"),
],
),
),
Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.phone),
Text("billy"),
],
),
),
],
),
),
),
);
}
}
```
to resolve nested hell, maybe you will extract a build method, then it looks like:
```dart
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: [
buildItem("amy"),
buildItem("billy"),
],
),
),
),
);
}
Container buildItem(String name) {
return Container(
color: Colors.white,
padding: EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.phone),
Text(name),
],
),
);
}
}
```
Use widget_chain can replace constructors by an `intoXxx()` function calling.
The code looks like:
```dart
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: [
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
.intoRow(crossAxisAlignment: CrossAxisAlignment.center,) // make the List 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:
```dart
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:
```dart
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:
```dart
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:
```dart
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`, it looks like this:
```dart
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()
);
}
}
```
```dart
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
```yaml
dependencies:
widget_chain: ^0.1.0
```
## Usage
```dart
import 'package:widget_chain/widget_chain.dart';
```
for `Widget`:
```dart
return widgetA.intoBbb(parmas);
```
equivalent as:
```dart
return Bbb(
params,
child: widgetA,
);
```
for `List`:
```dart
return widgetListC.intoDdd(parmas);
```
equivalent as:
```dart
return Ddd(
params,
children: widgetListC,
);
```