Flutter Web - iOS 上的奇怪缩放

Question

所以我正在研究 Flutter for web，并为一个实验项目拼凑了一个小的（XKCD 风格）密码生成器。

（是的，我知道 Flutter 不适合网站，更适合网络应用程序，我只是想了解它在网络上的工作方式。）

所以你可以在这里查看：https://pass.lumberstack.org

在桌面上，它看起来像这样：

在 Android 上，它看起来像这样：

在 iOS 上，它看起来像这样：

是的，由于某种原因，图像和文本被缩放得非常小。如果我强制它请求桌面站点，它会像 Android 一样工作。知道我做错了什么吗？

我尝试使用 flutter build web --web-renderer canvaskit 强制它仅使用 canvas 工具包，但它的行为相同。

main.dart 下面。

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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

好的，问题似乎出在 flutter_svg 库上。不确定为什么它会导致其他文本奇怪地缩放，但改变我渲染图像的方式解决了这个问题。

Flutter Web - iOS 上的奇怪缩放

Flutter Web - Weird scaling on iOS

dart

flutter

flutter-web