iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
😇
Notes on Resolving Errors When Exporting Flutter Code from Supernova Studio: Part 1

2020/11/05に公開
Flutter
Supernova
tech
This time, it happened to be fixed quite smoothly, so I'm leaving a note here in hopes that it might be helpful to someone.

 TL;DRGenerally, it's okay once you remove nested Align widgets.
Don't forget to add assets to pubspec.yaml (a simple mistake).
I steadily fixed redundant specifications and layout collapses manually...

 The Potential of Supernova Studio is AmazingI think many people who have tried Supernova Studio have felt its potential.

It's a "super" tool that can output code for Flutter, iOS (Swift), and Android (Java/Kotlin) just by importing a Sketch file.

For more details, see below:
Supernova Studio
https://www.supernova.io/

Can you dream of ultra-speed Flutter development with Supernova Studio? | Motoi Kataoka | Speaker Deck
https://speakerdeck.com/motoy3d/supernova-studio-and-flutter-ultra-speed-development

Can you make smartphone apps with Sketch!? What is Supernova Studio? | Web Design Trends
https://webdesign-trends.net/entry/5697


 "Let's try it!"... and it doesn't work at all due to errorsThis is something being said everywhere. Well... (bewildered)

Here's an example of an error I encountered on my end:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: BoxConstraints forces an infinite width.
flutter: These invalid constraints were provided to RenderPositionedBox's layout() function by the following
flutter: function, which probably computed the invalid constraints in question:
flutter:   RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:768:15)
flutter: The offending constraints were:
flutter:   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
flutter:
flutter: The relevant error-causing widget was:
flutter:   Column file:*********lib/views/screens/login.dart:38:22
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:517:9)
flutter: #1      BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:559:21)
flutter: #2      BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:565:6)
flutter: #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1677:24)
flutter: #4      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:768:15)
flutter: #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #6      RenderStack.layoutPositionedChild (package:flutter/src/rendering/stack.dart:491:11)
flutter: #7      RenderStack.performLayout (package:flutter/src/rendering/stack.dart:587:30)
flutter: #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #9      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #11     RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:268:14)
flutter: #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #13     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:12)
flutter: #14     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:498:7)
flutter: #15     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:243:7)
flutter: #16     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:402:14)
flutter: #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #18     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #19     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #20     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #21     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1308:11)
flutter: #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #23     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #25     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #27     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #29     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:560:15)
flutter: #30     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #31     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #32     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #33     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #34     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #35     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #36     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #37     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #38     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #39     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #40     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #41     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #42     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3222:13)
flutter: #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #44     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #45     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #46     _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:685:15)
flutter: #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #48     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #50     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #51     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #52     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #53     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #54     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #55     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #56     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #57     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #58     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:113:14)
flutter: #59     RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
flutter: #60     RenderView.performLayout (package:flutter/src/rendering/view.dart:167:14)
flutter: #61     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1634:7)
flutter: #62     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:884:18)
flutter: #63     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:436:19)
flutter: #64     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:914:13)
flutter: #65     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:302:5)
flutter: #66     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15)
flutter: #67     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1055:9)
flutter: #68     SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:864:7)
flutter: (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
flutter:
flutter: The following RenderObject was being processed when the exception was fired: RenderFlex#0176d relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
flutter:   creator: Column ← Positioned ← Stack ← DecoratedBox ← ConstrainedBox ← Container ← _BodyBuilder ←
flutter:     MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ←
flutter:     DefaultTextStyle ← ⋯
flutter:   parentData: top=129.0; bottom=65.0; offset=Offset(0.0, 0.0) (can use size)
flutter:   constraints: BoxConstraints(0.0<=w<=Infinity, h=732.0)
flutter:   size: MISSING
flutter:   direction: vertical
flutter:   mainAxisAlignment: start
flutter:   mainAxisSize: max
flutter:   crossAxisAlignment: stretch
flutter:   verticalDirection: down
flutter: This RenderObject had the following descendants (showing up to depth 5):
flutter:     child 1: RenderPositionedBox#a56ba NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:       child: RenderDecoratedBox#09521 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:         child: RenderParagraph#bbf72 NEEDS-LAYOUT NEEDS-PAINT
flutter:           text: TextSpan
flutter:     child 2: RenderPositionedBox#dcd74 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:       child: RenderPadding#570b9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:         child: RenderConstrainedBox#80a78 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:           child: RenderDecoratedBox#2b7e6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:             child: RenderPadding#0a7f3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:     child 3: RenderPositionedBox#525bc NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:       child: RenderConstrainedBox#50151 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:         child: RenderDecoratedBox#236ce NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:           child: RenderPadding#abebf NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:             child: RenderMouseRegion#8ef5f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:     child 4: RenderPositionedBox#61265 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:       child: RenderPadding#a3945 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:         child: RenderConstrainedBox#8d4f4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:           child: RenderSemanticsAnnotations#ed757 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:             child: _RenderInputPadding#37fcc NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:     child 5: RenderPositionedBox#d1c6c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:       child: RenderPadding#8adcd NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:         child: RenderConstrainedBox#77a51 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:           child: RenderParagraph#a82e6 NEEDS-LAYOUT NEEDS-PAINT
flutter:             text: TextSpan
flutter:     child 6: RenderPositionedBox#708cc NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:       child: RenderPadding#e2bac NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:         child: RenderConstrainedBox#4f3c7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:           child: RenderSemanticsAnnotations#57cc0 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter:             child: _RenderInputPadding#6610f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#0176d relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter: Another exception was thrown: Null check operator used on a null value
flutter: Another exception was thrown: Updated layout information required for RenderPositionedBox#a56ba NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.
flutter: Another exception was thrown: Bad state: Future already completed
flutter: Another exception was thrown: Unable to load asset: assets/images/login-bg.png

Application finished.
Don't be intimidated; let's read through the error messages.

 Resolving "Unable to load asset"This was a simple mistake. I hadn't added the settings to pubspec.yaml to load the images.

So, I resolved it by specifying it as follows:
flutter:
  uses-material-design: true

  assets:
    - assets/images/

 Resolving "BoxConstraints forces an infinite width""BoxConstraints forces an infinite width."

This means the BoxConstraints are being forced to have an infinite width.
When outputting from Supernova Studio, it usually looks something like this:
return Scaffold(
  body: Container(
  constraints: BoxConstraints.expand(),
  child: Stack(
    alignment: Alignment.center,
    children: [
    Positioned(
      top: 129,
      bottom: 65,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: 315,
              child: Text(
	        "Forgot your password?",
		textAlign: TextAlign.right,
		style: TextStyle(
		  fontWeight: FontWeight.w400,
		  fontSize: 15,
		),
	      ),
            ),
          ),
...
It gets output with an insane amount of nesting like that.

It seems to get by using absolute positioning with Positioned and specifying element sizes with Container.
As a side note, this feels somewhat similar to the image of translating a design into code using position: absolute; in CSS.
.hofe {
    position: absolute;
    left: 50px;
    top: 50px;
}
Back to the main topic.

While looking at the code, I searched for the cause of the problem by trial and error, such as deleting chunks of code.

Then, I found that,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: []
in the case of my generated code, all errors disappeared when Column.children was an empty element.

So, the culprit was something inside there.
Text.style: TextStyle wasn't an issue, and

Container.child: Text didn't seem like much of a problem either.

Then, it wasn't immediately clear if the Align widget, which was the parent of the Container, was necessary, so I tried deleting it... Bingo! All the errors disappeared.
That's all. This did the trick for me this time.

If I run into any other errors, I'll write another article.

 p.s. Layout collapseEven though the output was generated after seeing a preview,

(I noticed this in the Dart code displayed on Supernova Studio) I found various forceful or redundant specifications, such as buttons not having colors,

all color specifications being Color.fromARGB,

or using a Container with specified width and height when just min-width and height for the child widget would have sufficed.

I ended up fixing these manually.

It's quite tough; I almost felt it would be faster to build everything from scratch... Ah (realization).
iTranslated by AI

TL;DR

The Potential of Supernova Studio is Amazing

"Let's try it!"... and it doesn't work at all due to errors

Resolving "Unable to load asset"

Resolving "BoxConstraints forces an infinite width"

p.s. Layout collapse

Discussion
