fixes bug in multi-child <if> element

Author: waseemdev

package.json

@@ -3,7 +3,7 @@
 	"displayName": "XML Layout for Flutter",
 	"description": "XML Layout for Flutter. Brings Angular's style to Flutter!",
 	"publisher": "WaseemDev",
-	"version": "0.0.13",
+	"version": "0.0.16",
 	"icon": "images/logo.png",
 	"repository": {
 		"type": "github",

src/property-handlers/child-wrapper-property.ts

@@ -21,7 +21,7 @@ export class ChildWrapperPropertyHandler extends WrapperPropertyHandler {
         attr.value = property.value !== null && property.value !== undefined ? property.value : attr.value;
         let value = property.targetProperty ? ValueTransformersProvider.transform(attr.value, property.targetProperty, this.targetWidgetType) : attr.value;
 
-        const propertyName = this.propertyResolver.isUnNamedParamaeter(property.targetProperty, this.targetWidgetType) ? '' : property.targetProperty;
+        const propertyName = this.propertyResolver.isUnNamedParameter(property.targetProperty, this.targetWidgetType) ? '' : property.targetProperty;
 
         const newChildWidget: WidgetModel = {
             controllers: [],

src/property-handlers/if-element.test.ts

@@ -570,14 +570,15 @@ Container(
   <Row>
       <if value="ifCondition">
           <Text text="1" />
+          <Text text="2" />
       </if>
       <elseIf value="elseIfCondition">
-          <Text text="2" />
           <Text text="3" />
+          <Text text="4" />
       </elseIf>
       <else>
-          <Text text="4" />
           <Text text="5" />
+          <Text text="6" />
       </else>
   </Row>
 `;
@@ -591,27 +592,30 @@ Container(
                   () => [
                     Text(
                       1,
+                    ),
+                    Text(
+                      2,
                     )
                   ]
                 ),
                 SwitchCaseMultiChild(
                   elseIfCondition,
                   () => [
                     Text(
-                      2,
+                      3,
                     ),
                     Text(
-                      3,
+                      4,
                     )
                   ]
                 ),
               ],
               () => [
                 Text(
-                  4,
+                  5,
                 ),
                 Text(
-                  5,
+                  6,
                 )
               ]
             ),

src/property-handlers/if-element.ts

@@ -27,14 +27,20 @@ export class IfElementHandler extends CustomPropertyHandler {
     resolvePropertyElement(ifElement: parseXml.Element, widgetResolveResult: WidgetResolveResult, parent: parseXml.Element, parentChildren: parseXml.Element[], resolveWidget: (element: parseXml.Element, parent: parseXml.Element) => WidgetResolveResult): WidgetModel {
         const ifChains: IfModel[] = [];
         const wrappers: WidgetModel[] = [];
-
+        const multipleChild = widgetResolveResult.widget instanceof Array;
+        
         // apply binding for <if> element
         const ifBoundResult = this.propertyResolver.pipeValueResolver.resolve(ifElement, 'value', widgetResolveResult.propertyElementProperties.filter(a => a.name === 'value')[0].value, widgetResolveResult.widget);
+        if (ifBoundResult.wrapperWidget && multipleChild) {
+            throw new Error("::You can't use behavior or stream pipe on <if> element that has more than one child. Instead wrap the children with Column or Row.");
+        }
+
         const ifConditionValue = ifBoundResult.value;
+        const childWidget: any[] = multipleChild ? (widgetResolveResult.widget as any) : [widgetResolveResult.widget];
         wrappers.push(ifBoundResult.wrapperWidget as any);
         ifChains.push({
             condition: ifConditionValue,
-            childWidget: [widgetResolveResult.widget]
+            childWidget: [...childWidget]
         });
 
 
@@ -168,13 +174,13 @@ export class IfElementHandler extends CustomPropertyHandler {
         code += ifChains.map(a => {
             return `SwitchCase${hasMultipleChild ? 'MultiChild' : ''}(
 ${tabs}      ${a.condition},
-${tabs}      () => ${hasMultipleChild ? `[\n${itemTabs}  ` : ''}${a.childWidget.map(c => generateChildWidgetCode(c, tabsLevel + 3 + (hasMultipleChild ? 1 : 0))).join(`,\n${itemTabs}  `)}${hasMultipleChild ? `\n${itemTabs}]` : ''}
+${tabs}      () => ${hasMultipleChild ? `[\n${itemTabs}  ` : ''}${a.childWidget.map(c => generateChildWidgetCode(c, tabsLevel + 3 + (hasMultipleChild ? 1 : 0))).join(`,\n${itemTabs}  `) || 'null'}${hasMultipleChild ? `\n${itemTabs}]` : ''}
 ${tabs}    ),`;
         }).join(`\n${tabs}    `);
 
         code += `
 ${tabs}  ],
-${tabs}  () => ${hasMultipleChild ? `[\n${elseItemsTabs}  ` : ''}${elseCode}${hasMultipleChild ? `\n${elseItemsTabs}]` : ''}
+${tabs}  () => ${hasMultipleChild ? `[\n${elseItemsTabs}  ` : ''}${elseCode || 'null'}${hasMultipleChild ? `\n${elseItemsTabs}]` : ''}
 ${tabs})`;
 
         return code;

src/property-handlers/wrapper-property.ts

@@ -125,7 +125,7 @@ export class WrapperPropertyHandler extends CustomPropertyHandler {
     }
 
     protected createWrapperWidget(widget: WidgetModel, targetProperty: string, value: string, onWrapped: ((wrapper: WidgetModel) => void)[]): { wrapperWidget: WidgetModel, propertyToUpdateAfterBinding: PropertyModel | null } {
-        const propertyName = this.propertyResolver.isUnNamedParamaeter(targetProperty, this.targetWidgetType) ? '' : targetProperty;
+        const propertyName = this.propertyResolver.isUnNamedParameter(targetProperty, this.targetWidgetType) ? '' : targetProperty;
 
         const wrapperWidget: WidgetModel = {
             controllers: [],

src/resolvers/widget-resolver.ts

@@ -308,7 +308,8 @@ export class WidgetResolver {
 
         if (!result) {
             const arrayProperties: any = {
-                'DropdownButton': ['items']
+                'DropdownButton': ['items'],
+                'CustomScrollView': ['slivers']
             };
             result = arrayProperties[parentName] && arrayProperties[parentName].filter((a: any) => a === name).length === 1 || 
                 !!this.config.arrayProperties && this.config.arrayProperties[parentName] && this.config.arrayProperties[parentName].filter(a => a === name).length === 1;