Flutter Web – Weird scaling on iOS

Issue

So I’m messing around with Flutter for the web and threw together a little (XKCD-style) password generator just for an experimentation project.

(Yes, I know Flutter isn’t suited for web sites, more for web apps, I’m just trying to get handle on how it works on the web.)

So you can check it out here: https://pass.lumberstack.org

On desktop, it looks like this:

On Android, it looks like this:

On iOS, it looks like this:

Yes, that’s the image and text scaled super small for some reason. If I force it to request the desktop site it works as Android does. Any idea what I’m doing wrong?

I tried forcing it to only use canvas kit using flutter build web --web-renderer canvaskit but it behaves the same.

main.dart below.

import 'package:flutter/material.dart';
import 'package:password_tool/constants.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/services.dart';
import 'dart:math';

import 'package:password_tool/cross_fade.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lumberstack PassGen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Password Generator'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String password = '';
  String list = '';

  void _generate() {
    setState(() {
      var gen = Random.secure();
      List<String> pickedWords = List<String>.generate(
          4, (_) => kWordList[gen.nextInt(kWordList.length)]);
      password = pickedWords.join("-");
    });
  }

  void _copy() {
    Clipboard.setData(new ClipboardData(text: password));
  }

  @override
  Widget build(BuildContext context) {
    _generate();
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            stops: [0.7, 0.7],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [kAppSecondaryColor, kAppPrimaryColor],
          ),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Spacer(
                flex: 1,
              ),
              SvgPicture.asset(
                'assets/svgs/logo.svg',
                semanticsLabel: 'Acme Logo',
                width: 75,
                height: 75,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 30),
                child: Text(
                  'Password Generator',
                  style: GoogleFonts.montserrat(textStyle: kHeadingStyle),
                ),
              ),
              Spacer(
                flex: 1,
              ),
              CrossFade(
                  initialData: '',
                  data: password,
                  builder: (value) {
                    return Text(
                      value,
                      style: GoogleFonts.sourceCodePro(
                          textStyle: kSubHeadingStyle),
                    );
                  }),
              Opacity(
                opacity: 0.5,
                child: RawMaterialButton(
                  splashColor: Colors.transparent,
                  padding: EdgeInsets.all(12),
                  onPressed: _copy,
                  child: Text(
                    'Copy',
                    style: GoogleFonts.montserrat(
                        textStyle: kSmallButtonTextStyle),
                  ),
                ),
              ),
              Spacer(
                flex: 1,
              ),
              RawMaterialButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                splashColor: Colors.transparent,
                padding: EdgeInsets.all(12),
                fillColor: kAppPrimaryColor,
                onPressed: _generate,
                child: Text(
                  'Generate',
                  style: GoogleFonts.montserrat(textStyle: kButtonTextStyle),
                ),
              ),
              Spacer(
                flex: 2,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Solution

Okay, so the issue seemed to be the flutter_svg library. Not sure exactly why it was causing other text to scale oddly, but changing the way I render the image fixed the issue.

Answered By – RogerTheShrubber

Answer Checked By – Jay B. (FlutterFixes Admin)