Quick Look fails (for Groups / Masks?)

Maybach91 commented 4 years ago

Describe the bug When i select a group of elements the preview within the plugin works and it shows code. When i click "Quick Look" it opens the link, but its stuck with the "loading" screen. When selecting another group i get the message "Failed to build, look in console" shown in Figma.

Compiling a full Page e.g. iPhone 11 Pro Max - 9 does not showing whats visible in figma: https://console.bridged.xyz/quicklook?url=https://a.uguu.se/myhQCesJb3ps_%5BobjectObject%5D

To Reproduce

Steps to reproduce the behavior:

Duplicate this Template: https://www.figma.com/community/file/893381127703378146
Go to screen iPhone 11 Pro Max - 3
Select Group 4
Open Plugin and click Quick Look → This opens the link, but it will stuck in the loading-state

Go to iPhone 11 Pro Max - 7 and click on layer Group 49 → This will get fail to build message in Figma

Expected behavior

Opens a working Quick Look link in the browser.

Screenshots

The generated code for the Group 4 layer:

Container(
  child: Stack(
    children: [
      Positioned.fill(
        child: Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Opacity(
                  opacity: 0.8999999761581421,
                  child: SizedBox(
                    child: Text(
                      "Veggie tomato mix",
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w600,
                        fontFamily: "SF Pro Rounded",
                      ),
                      textAlign: TextAlign.center,
                    ),
                    width: 125,
                    height: 52,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                SizedBox(
                  child: Text(
                    "N1,900",
                    style: TextStyle(
                      fontSize: 17,
                      fontWeight: FontWeight.w700,
                      fontFamily: "SF Pro Rounded",
                    ),
                    textAlign: TextAlign.center,
                  ),
                  width: 172,
                  height: 19,
                ),
              ],
            ),
            width: 220,
            padding: EdgeInsets.only(
              top: 145,
              bottom: 39,
            ),
            decoration: BoxDecoration(
              color: Color(
                0xffffff,
              ),
              borderRadius: BorderRadius.circular(
                30,
              ),
              boxShadow: [
                BoxShadow(
                  color: Color(
                    0x19393939,
                  ),
                  offset: Offset(
                    0,
                    30,
                  ),
                  blurRadius: 60,
                ),
              ],
            ),
          ),
        ),
      ),
      Positioned.fill(
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            child: Stack(
              children: [
                Container(
                  width: 164.16,
                  height: 164.16,
                  decoration: BoxDecoration(
                    color: Color(
                      0xffffff,
                    ),
                    shape: BoxShape.circle,
                  ),
                ),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      width: 276.14,
                      height: 183.14,
                    ),
                  ),
                ),
              ],
            ),
            width: 164.16,
            height: 164.16,
          ),
        ),
      ),
    ],
  ),
  width: 220,
);

Generated Code for Group 49:

Container(
  child: Stack(
    children: Container(
      child: Stack(
        children: [
          Positioned(
            left: 64,
            top: 43,
            child: Container(
              child: Opacity(
                opacity: 0.5,
                child: Container(
                  width: 16,
                  height: 12,
                  decoration: BoxDecoration(
                    color: Color(
                      0xffffff,
                    ),
                  ),
                ),
              ),
              padding: EdgeInsets.symmetric(
                vertical: 2,
              ),
            ),
          ),
          Positioned(
            left: 102,
            top: 27,
            child: Text(
              "Veggie tomato mix",
              style: TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.w600,
                fontFamily: "SF Pro Rounded",
              ),
              textAlign: TextAlign.center,
            ),
          ),
          Positioned(
            left: 103,
            top: 58,
            child: Text(
              "#1,900",
              style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.w600,
                fontFamily: "SF Pro Rounded",
              ),
              textAlign: TextAlign.center,
            ),
          ),
          Positioned(
            left: 17,
            top: 16,
            child: Container(
              child: Stack(
                children: [
                  Container(
                    width: 69.21,
                    height: 69.21,
                    decoration: BoxDecoration(
                      color: Color(
                        0xffffff,
                      ),
                      shape: BoxShape.circle,
                    ),
                  ),
                  Positioned.fill(
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        width: 116.41,
                        height: 77.21,
                      ),
                    ),
                  ),
                ],
              ),
              width: 69.21,
              height: 69.21,
            ),
          ),
        ],
      ),
      width: 315,
      height: 102,
      decoration: BoxDecoration(
        color: Color(
          0xffffff,
        ),
        borderRadius: BorderRadius.circular(
          20,
        ),
        boxShadow: [
          BoxShadow(
            color: Color(
              0x7000000,
            ),
            offset: Offset(
              0,
              10,
            ),
            blurRadius: 40,
          ),
        ],
      ),
    ),
  ),
);

Desktop (please complete the following information):

OS: macOS Catalina 10.15.7 (19H2)
Browser: Chrome 86.0.4240.111 (but using the macOS App)
Figma Release 90 Build 3

softmarshmallow commented 4 years ago

Thanks for such detailed report. I'll take a look and reply shortly.

softmarshmallow commented 4 years ago

The Card Not visible problem.

As you can see in the generated code, The color is set properly as 0xffffff.

decoration: BoxDecoration(
              color: Color(
                0xffffff,
              ),
              borderRadius: BorderRadius.circular(
                30,
              ),
              boxShadow: [
                BoxShadow(
                  color: Color(
                    0x19393939,
                  ),
                  offset: Offset(
                    0,
                    30,
                  ),
                  blurRadius: 60,
                ),
              ],
            ),

But the reason you cannot see in the quicklook is the problem on flutter web not processing white container with a box shadow. (i believe) If you run it as Mac or android. It might show up properly. I'll double check if this is a flutter's web renderer problem.

Divider (Line) Not showing up This is a known issue, as we haven't implemented interpreter for processing figma Line Node It just being ignored, and no code will be generated now. I've created a new feature request #18 . And this will be implemented shortly.
Group 4 Not being compiled or showing up in quicklook

I Copied the code and ran it on dartpad, It works fine. Think this is a issue related on quicklook's iframe view, I'll inpect on this further.

BTW the same code you can try on dartpad.

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    body:Container(
  child: Stack(
    children: [
      Positioned.fill(
        child: Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Opacity(
                  opacity: 0.8999999761581421,
                  child: SizedBox(
                    child: Text(
                      "Veggie tomato mix",
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w600,
                        fontFamily: "SF Pro Rounded",
                      ),
                      textAlign: TextAlign.center,
                    ),
                    width: 125,
                    height: 52,
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                SizedBox(
                  child: Text(
                    "N1,900",
                    style: TextStyle(
                      fontSize: 17,
                      fontWeight: FontWeight.w700,
                      fontFamily: "SF Pro Rounded",
                    ),
                    textAlign: TextAlign.center,
                  ),
                  width: 172,
                  height: 19,
                ),
              ],
            ),
            width: 220,
            padding: EdgeInsets.only(
              top: 145,
              bottom: 39,
            ),
            decoration: BoxDecoration(
              color: Color(
                0xffffff,
              ),
              borderRadius: BorderRadius.circular(
                30,
              ),
              boxShadow: [
                BoxShadow(
                  color: Color(
                    0x19393939,
                  ),
                  offset: Offset(
                    0,
                    30,
                  ),
                  blurRadius: 60,
                ),
              ],
            ),
          ),
        ),
      ),
      Positioned.fill(
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            child: Stack(
              children: [
                Container(
                  width: 164.16,
                  height: 164.16,
                  decoration: BoxDecoration(
                    color: Color(
                      0xffffff,
                    ),
                    shape: BoxShape.circle,
                  ),
                ),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      width: 276.14,
                      height: 183.14,
                    ),
                  ),
                ),
              ],
            ),
            width: 164.16,
            height: 164.16,
          ),
        ),
      ),
    ],
  ),
  width: 220,
)
    );
  }
}

I'll leave this issue open until above related issues and feature requests are resolved.

softmarshmallow commented 4 years ago

Mostly are resolved. The nothing-shown issue is caused by singlechild scrollview. Working on this.

other compile-level errors are all resolved.

https://github.com/bridgedxyz/assistant/issues/23

softmarshmallow commented 4 years ago

Container's fill not shown by Boxshadow issue. related: https://github.com/dart-lang/dart-pad/issues/1669

softmarshmallow commented 4 years ago

All quicklook issue has been resolved and published to newest version of plugin.

gridaco / assistant