Блог

Итак, я возился с Flutter для Интернета и собрал небольшой генератор паролей (в стиле XKCD) только для экспериментального проекта.

(Да, я знаю, что Flutter не подходит для веб-сайтов, больше для веб-приложений, я просто пытаюсь разобраться, как это работает в Интернете.)

Итак, вы можете проверить это здесь: https://pass.lumberstack.org

На рабочем столе это выглядит так:

На Android это выглядит так:

На iOS это выглядит так:

Да, по какой-то причине изображение и текст были очень маленькими. Если я заставлю его запросить сайт рабочего стола, он будет работать так же, как и Android. Есть идеи, что я делаю не так?

Я попытался заставить его использовать только canvas kit flutter build web --web-renderer canvaskit , но он ведет себя так же.

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

 

Итак, проблема, похоже, заключалась в библиотеке flutter_svg. Не совсем уверен, почему это приводило к странному масштабированию другого текста, но изменение способа рендеринга изображения устранило проблему.