Added spacing to item width (#3)

* Added spacing to item width

* bump package version

* updated changelogs

.gitignore

@@ -27,3 +27,4 @@ migrate_working_dir/
 **/doc/api/
 .dart_tool/
 build/
+.vscode/branch-timer.json

CHANGELOG.md

@@ -1,3 +1,6 @@
 ## 0.0.1
 
 * Adds FlexibleWrap widget
+
+## 0.0.3
+* Adds spacing to item width

example/lib/main.dart

@@ -33,6 +33,8 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   final padding = 8.0;
+  final spacing = 10.0;
+  final itemWidth = 380.0;
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -44,18 +46,19 @@ class _MyHomePageState extends State<MyHomePage> {
         length: 35, // Number of children to display
         runAlignment: WrapAlignment.start,
         crossAxisAlignment: WrapCrossAlignment.end,
+        spacing: spacing,
         builder: (int index, double itemExtraWidth) {
           return Padding(
             padding: EdgeInsets.all(padding),
             child: Container(
               height: 60,
               color: Colors.blue,
-              width: 380.0 + itemExtraWidth,
+              width: itemWidth + itemExtraWidth,
               child: Center(child: Text('Item $index')),
             ),
           );
         },
-        itemWidth: 380.0 +
+        itemWidth: itemWidth +
             (padding *
                 2), // Width of each item + padding value, 2 => horizontal and vertical
         direction: Axis.horizontal, // Direction to arrange the children

lib/src/flexible_wrap_base.dart

@@ -30,7 +30,7 @@ class FlexibleWrap extends StatelessWidget {
   final int length;
 
   /// The builder function to generate children with the given index and extra width.
-  final Widget Function(int index, double itemExtraWIdth) builder;
+  final Widget Function(int index, double itemExtraWidth) builder;
 
   /// The width of each item in the wrap.
   final double itemWidth;
@@ -66,9 +66,10 @@ class FlexibleWrap extends StatelessWidget {
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (context, constraint) {
       double extraWidth = 0.0;
+      final double widthWithSpacing = itemWidth + spacing;
       if (constraint.maxWidth.isFinite) {
-        int items = (constraint.maxWidth / itemWidth).floor();
-        double remainder = constraint.maxWidth.remainder(itemWidth);
+        int items = (constraint.maxWidth / widthWithSpacing).floor();
+        double remainder = constraint.maxWidth.remainder(widthWithSpacing);
         extraWidth = remainder / items;
       }
       return Wrap(

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flexible_wrap
 description: "FlexibleWrap is a Flutter widget designed to provide a flexible and customizable way to arrange widgets in a wrap layout"
-version: 0.0.2
+version: 0.0.3
 homepage: https://github.com/bixat/flexible_wrap
 
 environment: