Adobe XD to flutter code results in "RenderCustomMultiChildLayoutBox object was given an infinite size during layout." error

Question

I have started to use Adobe XD to design a UI for my flutter application. When I export my UI to flutter code and try to add it with my existing code I get the error

"RenderCustomMultiChildLayoutBox object was given an infinite size during layout."

I am calling the XDOutlet() function in an already working layout, but when the code runes that error is present.

I have not changed anything from the exported code, and I can't seem to pinpoint the issue. Any help will be appreciated!

XDOutlet.dart

class XDOutlet extends StatelessWidget {
  XDOutlet({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffffffff),
      body: Stack(
        children: [
          Transform.translate(
            offset: Offset(114.0, 315.2),
            child:
                // Adobe XD layer: 'Bottom_Outlet' (component)
                SizedBox(
              width: 200.0,
              height: 200.0,
              child: XDBottom_Outlet(),
            ),
          ),
          Transform.translate(
            offset: Offset(114.0, 52.0),
            child:
                // Adobe XD layer: 'Top_Outlet' (component)
                SizedBox(
              width: 200.0,
              height: 200.0,
              child: XDTop_Outlet(),
            ),
          ),
          Transform.translate(
            offset: Offset(220.0, 809.0),
            child:
                // Adobe XD layer: 'Restart' (component)
                SizedBox(
              width: 188.0,
              height: 60.0,
              child: XDRestart(),
            ),
          ),
          Transform.translate(
            offset: Offset(20.0, 809.0),
            child:
                // Adobe XD layer: 'Update' (component)
                SizedBox(
              width: 188.0,
              height: 60.0,
              child: XDUpdate(),
            ),
          ),
          Transform.translate(
            offset: Offset(20.0, 727.0),
            child:
                // Adobe XD layer: 'Statistics' (component)
                PageLink(
              links: [
                PageLinkInfo(
                  transition: LinkTransition.SlideUp,
                  ease: Curves.easeOut,
                  duration: 0.3,
                  pageBuilder: () => XDOurlet_Statistics(),
                ),
              ],
              child: SizedBox(
                width: 388.0,
                height: 60.0,
                child: XDStatistics(),
              ),
            ),
          ),
          Transform.translate(
            offset: Offset(162.7, 578.4),
            child:
                // Adobe XD layer: 'All_Power' (component)
                SizedBox(
              width: 103.0,
              height: 103.0,
              child: XDAll_Power(),
            ),
          ),
        ],
      ),
    );
  }
}

XDBottom_Outlet.dart

class XDBottom_Outlet extends StatelessWidget {
  final VoidCallback BottomOutlet;
  XDBottom_Outlet({
    Key key,
    this.BottomOutlet,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => BottomOutlet?.call(),
      child: Stack(
        children: [
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 200.0, 200.0),
            size: Size(200.0, 200.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child:
                // Adobe XD layer: 'Bottom_Outlet' (shape)
                SvgPicture.string(
              _svg_p3l2i1,
              allowDrawingOutsideViewBox: true,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );
  }
}

const String _svg_p3l2i1 =
    '';

XDTop_Outlet.dart

class XDTop_Outlet extends StatelessWidget {
  final VoidCallback TopOutlet;
  XDTop_Outlet({
    Key key,
    this.TopOutlet,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => TopOutlet?.call(),
      child: Stack(
        children: [
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 200.0, 200.0),
            size: Size(200.0, 200.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child:
                // Adobe XD layer: 'Top_Outlet' (shape)
                SvgPicture.string(
              _svg_p3l2i1,
              allowDrawingOutsideViewBox: true,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );
  }
}

const String _svg_p3l2i1 =
    '';

XDRestart.dart

class XDRestart extends StatelessWidget {
  final VoidCallback Restart;
  XDRestart({
    Key key,
    this.Restart,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Restart?.call(),
      child: Stack(
        children: [
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 188.0, 60.0),
            size: Size(188.0, 60.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30.0),
                color: const Color(0xfffa0000),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x29000000),
                    offset: Offset(0, 3),
                    blurRadius: 6,
                  ),
                ],
              ),
            ),
          ),
          Pinned.fromSize(
            bounds: Rect.fromLTWH(27.0, 7.0, 134.0, 47.0),
            size: Size(188.0, 60.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child:
                // Adobe XD layer: 'Restart' (text)
                Text(
              'Restart',
              style: TextStyle(
                fontFamily: 'Raleway',
                fontSize: 40,
                color: const Color(0xffffffff),
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.left,
            ),
          ),
        ],
      ),
    );
  }
}

XDUpdate.dart

class XDUpdate extends StatelessWidget {
  final VoidCallback Update;
  XDUpdate({
    Key key,
    this.Update,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Update?.call(),
      child: Stack(
        children: [
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 188.0, 60.0),
            size: Size(188.0, 60.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30.0),
                color: const Color(0xff3790f7),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x29000000),
                    offset: Offset(0, 3),
                    blurRadius: 6,
                  ),
                ],
              ),
            ),
          ),
          Pinned.fromSize(
            bounds: Rect.fromLTWH(24.0, 7.0, 139.0, 47.0),
            size: Size(188.0, 60.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child: Text(
              'Update',
              style: TextStyle(
                fontFamily: 'Raleway',
                fontSize: 40,
                color: const Color(0xffffffff),
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.left,
            ),
          ),
        ],
      ),
    );
  }
}

XDStatistics.dart

class XDStatistics extends StatelessWidget {
  final VoidCallback StatisticsPage;
  XDStatistics({
    Key key,
    this.StatisticsPage,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => StatisticsPage?.call(),
      child: Stack(
        children: [
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 388.0, 60.0),
            size: Size(388.0, 60.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30.0),
                color: const Color(0xff2cd625),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x29000000),
                    offset: Offset(0, 3),
                    blurRadius: 6,
                  ),
                ],
              ),
            ),
          ),
          Pinned.fromSize(
            bounds: Rect.fromLTWH(111.0, 7.0, 168.0, 47.0),
            size: Size(388.0, 60.0),
            pinTop: true,
            pinBottom: true,
            fixedWidth: true,
            child:
                // Adobe XD layer: 'Statistics' (text)
                Text(
              'Statistics',
              style: TextStyle(
                fontFamily: 'Raleway',
                fontSize: 40,
                color: const Color(0xffffffff),
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.left,
            ),
          ),
        ],
      ),
    );
  }
}

XDAll_Power.dart

class XDAll_Power extends StatelessWidget {
  final VoidCallback AllPower;
  XDAll_Power({
    Key key,
    this.AllPower,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => AllPower?.call(),
      child: Stack(
        children: [
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 102.6, 102.6),
            size: Size(102.6, 102.6),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child:
                // Adobe XD layer: 'Icon ionic-md-power' (shape)
                SvgPicture.string(
              _svg_md9vfg,
              allowDrawingOutsideViewBox: true,
              fit: BoxFit.fill,
            ),
          ),
        ],
      ),
    );
  }
}

const String _svg_md9vfg =
    '';

Dwi Kurnianto M · Accepted Answer

Unfortunately XD to flutter is not 100% works and not recommended, here's why :

There is not just create and convert from xd to flutter
You need to chain the widget your self
Use XD to flutter for UI purpose only, because XD cannot contain logical behavior of your program
I would highly recommend you to code it your self, flutter covering almost 100% possibilities of a custom widget, and it's easy enough to understand rather than create UI and convert it to a fully functional program which almost impossible to work flawlessly

Adobe XD to flutter code results in "RenderCustomMultiChildLayoutBox object was given an infinite size during layout." error

Answers (1)

Related Questions

Adobe XD to flutter code results in &quot;RenderCustomMultiChildLayoutBox object was given an infinite size during layout.&quot; error

Answers (1)

Related Questions

Adobe XD to flutter code results in "RenderCustomMultiChildLayoutBox object was given an infinite size during layout." error