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: <Widget>[
          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: <Widget>[
          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 =
    '<svg viewBox="0.0 0.0 200.0 200.0" ><defs><filter id="shadow"><feDropShadow dx="0" dy="3" stdDeviation="6"/></filter></defs><path transform="translate(-2.25, -2.25)" d="M 152.8860168457031 2.25 L 51.52471542358398 2.25 C 24.34328460693359 2.25 2.25 24.83424758911133 2.25 52.50664138793945 L 2.25 151.94873046875 C 2.25 179.6211242675781 24.34328460693359 202.2053680419922 51.52471542358398 202.2053680419922 L 152.9306488037109 202.2053680419922 C 180.1120910644531 202.2053680419922 202.25 179.6211242675781 202.25 151.94873046875 L 202.25 52.50664138793945 C 202.2053680419922 24.83424758911133 180.1120910644531 2.25 152.8860168457031 2.25 Z M 66.07504272460938 99.99604797363281 L 66.07504272460938 100.308479309082 C 66.07504272460938 105.173469543457 62.01344680786133 109.4135971069336 57.19309616088867 109.4135971069336 L 46.79363250732422 109.4135971069336 C 41.97328186035156 109.4135971069336 37.91168975830078 105.173469543457 37.91168975830078 100.308479309082 L 37.91168975830078 99.99604797363281 L 37.91168975830078 54.69365310668945 L 37.91168975830078 54.06879043579102 C 38.35801696777344 49.24844360351563 42.01791763305664 45.05294418334961 46.79363250732422 45.05294418334961 L 57.19309616088867 45.05294418334961 C 62.05807876586914 45.05294418334961 66.07504272460938 49.42696762084961 66.07504272460938 54.33658218383789 L 66.07504272460938 99.99604797363281 Z M 120.5271835327148 165.7849273681641 C 120.5271835327148 170.8730926513672 116.5548477172852 173.6403198242188 111.5559692382813 173.6403198242188 L 92.89942169189453 173.6403198242188 C 87.90053558349609 173.6403198242188 83.92820739746094 170.0250549316406 83.92820739746094 164.8922729492188 L 83.92820739746094 151.8148345947266 C 83.92820739746094 141.4153747558594 92.00676727294922 132.9351196289063 102.2276916503906 132.9351196289063 C 112.4486312866211 132.9351196289063 120.5271835327148 141.4153747558594 120.5271835327148 151.8148345947266 L 120.5271835327148 165.7849273681641 Z M 166.4990539550781 99.99604797363281 L 166.4990539550781 100.308479309082 C 166.4990539550781 105.173469543457 162.4374694824219 109.4135971069336 157.6171112060547 109.4135971069336 L 146.7713165283203 109.4135971069336 C 141.9509582519531 109.4135971069336 137.8893585205078 105.173469543457 137.8893585205078 100.308479309082 L 137.8893585205078 99.99604797363281 L 137.8893585205078 54.69365310668945 L 137.8893585205078 54.06879043579102 C 138.335693359375 49.24844360351563 141.9955902099609 45.05294418334961 146.7713165283203 45.05294418334961 L 157.6171112060547 45.05294418334961 C 162.4374542236328 45.05294418334961 166.4990539550781 49.42696762084961 166.4990539550781 54.33658218383789 L 166.4990539550781 99.99604797363281 Z" fill="#d90b0b" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" filter="url(#shadow)"/></svg>';

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: <Widget>[
          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 =
    '<svg viewBox="0.0 0.0 200.0 200.0" ><defs><filter id="shadow"><feDropShadow dx="0" dy="3" stdDeviation="6"/></filter></defs><path transform="translate(-2.25, -2.25)" d="M 152.8860168457031 2.25 L 51.52471542358398 2.25 C 24.34328460693359 2.25 2.25 24.83424758911133 2.25 52.50664138793945 L 2.25 151.94873046875 C 2.25 179.6211242675781 24.34328460693359 202.2053680419922 51.52471542358398 202.2053680419922 L 152.9306488037109 202.2053680419922 C 180.1120910644531 202.2053680419922 202.25 179.6211242675781 202.25 151.94873046875 L 202.25 52.50664138793945 C 202.2053680419922 24.83424758911133 180.1120910644531 2.25 152.8860168457031 2.25 Z M 66.07504272460938 99.99604797363281 L 66.07504272460938 100.308479309082 C 66.07504272460938 105.173469543457 62.01344680786133 109.4135971069336 57.19309616088867 109.4135971069336 L 46.79363250732422 109.4135971069336 C 41.97328186035156 109.4135971069336 37.91168975830078 105.173469543457 37.91168975830078 100.308479309082 L 37.91168975830078 99.99604797363281 L 37.91168975830078 54.69365310668945 L 37.91168975830078 54.06879043579102 C 38.35801696777344 49.24844360351563 42.01791763305664 45.05294418334961 46.79363250732422 45.05294418334961 L 57.19309616088867 45.05294418334961 C 62.05807876586914 45.05294418334961 66.07504272460938 49.42696762084961 66.07504272460938 54.33658218383789 L 66.07504272460938 99.99604797363281 Z M 120.5271835327148 165.7849273681641 C 120.5271835327148 170.8730926513672 116.5548477172852 173.6403198242188 111.5559692382813 173.6403198242188 L 92.89942169189453 173.6403198242188 C 87.90053558349609 173.6403198242188 83.92820739746094 170.0250549316406 83.92820739746094 164.8922729492188 L 83.92820739746094 151.8148345947266 C 83.92820739746094 141.4153747558594 92.00676727294922 132.9351196289063 102.2276916503906 132.9351196289063 C 112.4486312866211 132.9351196289063 120.5271835327148 141.4153747558594 120.5271835327148 151.8148345947266 L 120.5271835327148 165.7849273681641 Z M 166.4990539550781 99.99604797363281 L 166.4990539550781 100.308479309082 C 166.4990539550781 105.173469543457 162.4374694824219 109.4135971069336 157.6171112060547 109.4135971069336 L 146.7713165283203 109.4135971069336 C 141.9509582519531 109.4135971069336 137.8893585205078 105.173469543457 137.8893585205078 100.308479309082 L 137.8893585205078 99.99604797363281 L 137.8893585205078 54.69365310668945 L 137.8893585205078 54.06879043579102 C 138.335693359375 49.24844360351563 141.9955902099609 45.05294418334961 146.7713165283203 45.05294418334961 L 157.6171112060547 45.05294418334961 C 162.4374542236328 45.05294418334961 166.4990539550781 49.42696762084961 166.4990539550781 54.33658218383789 L 166.4990539550781 99.99604797363281 Z" fill="#d90b0b" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" filter="url(#shadow)"/></svg>';

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: <Widget>[
          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: <Widget>[
          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: <Widget>[
          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: <Widget>[
          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 =
    '<svg viewBox="0.0 0.0 102.6 102.6" ><defs><filter id="shadow"><feDropShadow dx="0" dy="3" stdDeviation="6"/></filter></defs><path transform="translate(-3.37, -3.37)" d="M 60.35555648803711 3.375000238418579 L 48.96437835693359 3.375000238418579 L 48.96437835693359 60.35555648803711 L 60.35555648803711 60.35555648803711 L 60.35555648803711 3.375000238418579 Z M 87.87191772460938 15.75243091583252 L 79.78467559814453 23.83967781066895 C 88.78420257568359 31.0886116027832 94.55375671386719 42.18391799926758 94.55375671386719 54.65997314453125 C 94.55375671386719 76.70264434814453 76.72730255126953 94.55374908447266 54.65998077392578 94.55374908447266 C 32.59264755249023 94.55374908447266 14.76618099212646 76.70264434814453 14.76618099212646 54.65997314453125 C 14.76618099212646 42.18391799926758 20.51108551025391 31.0639533996582 29.4612979888916 23.76571083068848 L 21.42336273193359 15.72777462005615 C 10.37737083435059 25.14645385742188 3.375000238418579 39.05257797241211 3.375000238418579 54.65997314453125 C 3.375000238418579 82.98998260498047 26.32995796203613 105.9449310302734 54.65997314453125 105.9449310302734 C 82.98998260498047 105.9449310302734 105.9449310302734 82.98998260498047 105.9449310302734 54.65997314453125 C 105.9449310302734 39.05257797241211 98.94255828857422 25.14645385742188 87.87191772460938 15.75243091583252 Z" fill="#d90b0b" stroke="none" stroke-width="1" stroke-miterlimit="4" stroke-linecap="butt" filter="url(#shadow)"/></svg>';


Solution 1: Dwi Kurnianto M

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

  1. There is not just create and convert from xd to flutter
  2. You need to chain the widget your self
  3. Use XD to flutter for UI purpose only, because XD cannot contain logical behavior of your program
  4. 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