lundi 2 mars 2020

visual issue with flutter to Web (font and gradient)

I'm trying to convert a flutter project to the web.

I built my project with "flutter build web" and ran a simple python server with "python -m SimpleHTTPServer 8000"

But I have a little bug with a button that got a gradient background, it has the gradient background but when I put the mouse on the page, it lost it for a totally black background. Also, on safari only, the font of the main title gets low quality even when it first gets loaded with high quality. Here is a gif that illustrates the problems :

Problem gif

If you want to see the code, here is the code for the title row :

Row(
            children: <Widget>[
              ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 100),
                child: Image.asset("assets/test.png",
                  width: _width * 0.075,
                  height: _width * 0.075,
                ),
              ),
              ConstrainedBox(
                constraints: BoxConstraints(maxHeight: 100, maxWidth: 322),
                child: SizedBox(
                  width: _width*0.5,
                  child: FittedBox(
                    fit: BoxFit.fitHeight,
                    child:Text("MAVOXEL",
                      style:TextStyle(
                        fontFamily: "Poppins-Bold",
                        letterSpacing: .6,
                        fontWeight: FontWeight.bold
                      )
                    )
                  )
                )
              )
            ]
          ),

And for the button :

class Button extends StatelessWidget{

  final Function callbackFunc;

  Button(this.callbackFunc);


  Widget build(BuildContext context){
    return new InkWell(
      child: Container(
        width: ScreenUtil.getInstance().setWidth(330),
        height: ScreenUtil.getInstance().setHeight(100),
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              Color(0xFF17ead9),
              Color(0xFF6078ea)
            ]),
            borderRadius: BorderRadius.circular(6.0),
            boxShadow: [
              BoxShadow(
                  color: Color(0xFF6078ea).withOpacity(.3),
                  offset: Offset(0.0, 8.0),
                  blurRadius: 8.0)
            ]),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: callbackFunc,
            child: Center(
              child: Text("SIGNIN",
                  style: TextStyle(
                      color: Colors.white,
                      fontFamily: "Poppins-Bold",
                      fontSize: 18,
                      letterSpacing: 1.0)),
            ),
          ),
        ),
      ),
    );
  }
}

Note: Everything is working well with the debugger on an emulated iPhone 11 and on the chrome debugger and on chrome I have the same issue but without font resolution problem




Aucun commentaire:

Enregistrer un commentaire