Note: This widget is currently in an experimental phase and the code behind this widget could change and lead to breaking code at any time.
A set of extensions that add useful and interesting functionality to the the set of standard widgets. The Following is possible with this package.
\\Valid Code with These Extensions ((Text('Hello').color('#eb4034'.hexColor()).underline() | Text('World').bold().size(20.0)) + (Text('This')+Text('Is')+Text('Awesome')).transpose().wrap() & (Container(height: 1000, width: 1000).center())).copyWith(fit:StackFit.expand); \\The Equivalent Code: Stack( children: <Widget>[ Column( children: <Widget>[ Row( children: <Widget>[ Text('Hello', style: TextStyle( decoration: TextDecoration.underline, color: Color(0xFFEB4034)), ), Text('World', style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold ),) ], ), Wrap( children: <Widget>[ Text('This'), Text('Is'), Text('Awesome') ], direction: Axis.horizontal, ) ], ), Center( child: Container( height: 1000, width: 1000, ), ) ], fit: StackFit.expand, );
| operation can be used to create a row.
// This is Valid and will return a row with two containers Container()|Container() // This will add add the container to the end of the children in the row Row()|Container() // This will add add the container to the begining of the children in the row Container()|Row()
- copyWith method added for rows
- transpose: will turn a row into a column and attempt to preserve settings
+ operation can be used to create a column.
// This is Valid and will return a column with two containers Container()+Container() // This will add add the container to the bottom of the children in the column Column()+Container() // This will add add the container to the top of the children in the column Container()+Column()
- copyWith method added for columns
- transpose: will turn a column into a row and attempt to preserve settings
& operation can be used to create a stack.
// This is Valid and will return a stack with two containers Container()&Container() // This will add add the container to the top of the children in the stack Stack()&Container() // This will add add the container to the bottom of the children in the stack Container()&Stack()
- copyWith method added for columns
- Allows Rows and Columns to be wrapped and unwrapped
- When wrapped and unwrapped, the directionality of the widgets are preserved.
Row().wrap().unwrap() //This will be a row Column().wrap().unwrap() //This will be a Column
Added Easy Access to common Text Field Utilities
Adds functionality for hex colors
//Returns the Hex Color from a string. Opacity is a parameter that can be set '#FFFFFF'.hexColor(); //Returns a string from the Hex Color. There is a parameter to include opacity color.hexString()
Append these extensions to any widget. This adds no new functionality, but it can make the code cleaner.
// Old Way Expanded( child: Center( child: Containter() ) ) // New Way Container().Center().Expanded()
- nothing : An empty widget that takes no space
- paddingAll : Adds padding on all sides
- paddingSymmetric : Adds Padding horizontally and vertically
- paddingLRTB : Adds Padding to each side of the widget
- center : centers the Widget
- expanded : surrounds the widget with expanded
- flexible : surrounds the widget with flexible
- align : surrounds the widget with align widget
- baseline : surrounds the widget with baseline Widget
- positioned : surrounds the widget with positioned widget
- expandedBox : surrounds the widget with expanded box
- putBetween will put something between each row item
Row( children:[list of widgets].putBetween(Spacer()) )
- Added Comments to each extenions
- Changed Row Operator from '*' to '|'
- Changed Column Operator from '/' to '+'
- Changed Stack Operator from '+' to '&'
- First release of the widget_extension package
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: widget_arithmetic: ^0.0.2
2. Install it
You can install packages from the command line:
$ flutter pub get
Alternatively, your editor might support
flutter pub get.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.8.4
- pana: 0.13.13
- Flutter: 1.17.5
Package not compatible with SDK dart
because of import path [widget_arithmetic] that is in a package requiring null.
Maintain an example. (-10 points)
Create a short demo in the
example/ directory to show how to use this package.
Common filename patterns include
widget_arithmetic.dart. Packages with multiple examples should provide
For more information see the pub package layout conventions.
Package is pre-v0.1 release. (-10 points)
While nothing is inherently wrong with versions of
0.0.*, it might mean that the author is still experimenting with the general direction of the API.
The package description is too short. (-3 points)
Add more detail to the
description field of
pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.