0

我正在尝试将几个google_fonts添加到 ThemeData。我所有的主题都被应用了，除了谷歌字体没有。为什么是这样？这是我的项目设置：

主题：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'theme_utils.dart';

MaterialColor primaryColorShades = generateMaterialColor(primaryColor);
MaterialColor accentColorShades = generateMaterialColor(accentColor);

const Color primaryColor = Color(0xFF62d9d5);
const Color accentColor = Color(0xFF27a562);
const Color blueText = Color(0xFF409491);

ThemeData blueTheme = ThemeData(
  colorScheme: const ColorScheme(
      brightness: Brightness.light,
      primary: primaryColor,
      secondary: accentColor,
      surface: Colors.white,
      background: primaryColor,
      error: Colors.red,
      onBackground: Colors.white,
      onError: Colors.white,
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: blueText,
      primaryVariant: Colors.white,
      secondaryVariant: Colors.white),
  visualDensity: VisualDensity.standard,
  canvasColor: primaryColor,
  textTheme: GoogleFonts.varelaRoundTextTheme().copyWith(
    headline1: const TextStyle(
        fontSize: 30.0, fontWeight: FontWeight.bold, color: Colors.white),
    subtitle1: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        color: Colors.white.withOpacity(0.7)),
    button: GoogleFonts.hind(
        textStyle: const TextStyle(
            fontSize: 12.0, fontWeight: FontWeight.w500, color: blueText)),
  ),
);

主要飞镖：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'app/routes/app_pages.dart';
import 'app/theme/theme.dart';

void main() {
  runApp(GetMaterialApp(
    title: 'Application',
    initialRoute: AppPages.INITIAL,
    getPages: AppPages.routes,
    theme: blueTheme,
  ));
}

并在我看来像这样使用它们：

Text('Hi there, \nI\'m Vepo',
                style: Theme.of(context).textTheme.headline1,
                textAlign: TextAlign.center),

Text('I can help you find vegan things in your local area',
     style: Theme.of(context).textTheme.subtitle1,
     textAlign: TextAlign.center),

RaisedButton(padding: const EdgeInsets.symmetric(
             vertical: 10, horizontal: 60),
             elevation: 20.00,
             shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(40.0)),
             child: Text(
             'COOL, SIGN ME UP!',
             style: Theme.of(context).textTheme.button,
             ),
             onPressed: () {}),

在我的 pubspec.yaml 中：

flutter:
    uses-material-design: true
    assets:
        - assets/images/
        - google_fonts/

在我的项目的根目录中：

在此处输入图像描述

为什么没有应用字体？

从 google_fonts pub 页面看来，我可能需要从 ThemeData 中引用上下文，但我无权访问，因为它是一个不同的文件，而且我真的不想将 ThemeData 更改为内联在他们的文档上：

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);
4

1 回答 1

1

我以为我必须以 google_fonts 的方式做事，但是，我没有。google_fonts 方式似乎需要 ThemeData 中某些内容的上下文。更改为颤振方式：

在 pubspec.yaml 中：

flutter:
    uses-material-design: true
    fonts:
        - family: VarelaRound
          fonts:
              - asset: assets/fonts/VarelaRound-Regular.ttf

在我的主题中：

import 'package:flutter/material.dart';

import 'theme_utils.dart';

MaterialColor primaryColorShades = generateMaterialColor(primaryColor);
MaterialColor accentColorShades = generateMaterialColor(accentColor);

const Color primaryColor = Color(0xFF62d9d5);
const Color accentColor = Color(0xFF27a562);
const Color blueText = Color(0xFF409491);

ThemeData blueTheme = ThemeData(
  colorScheme: const ColorScheme(
      brightness: Brightness.light,
      primary: primaryColor,
      secondary: accentColor,
      surface: Colors.white,
      background: primaryColor,
      error: Colors.red,
      onBackground: Colors.white,
      onError: Colors.white,
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: blueText,
      primaryVariant: Colors.white,
      secondaryVariant: Colors.white),
  visualDensity: VisualDensity.standard,
  canvasColor: primaryColor,
  fontFamily: 'varelaRound',
  textTheme: TextTheme(
    headline1: const TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontFamily: 'varelaRound'),
    subtitle1: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'varelaRound',
        color: Colors.white.withOpacity(0.7)),
    caption: TextStyle(
        fontSize: 14.0,
        fontWeight: FontWeight.w600,
        fontFamily: 'hind',
        color: Colors.white.withOpacity(0.7)),
    button: const TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w500,
        color: blueText,
        fontFamily: 'hind'),
  ),
);

然后像这样在视图中使用：

Text('Hi there, \nI\'m Vepo',
     style: Theme.of(context).textTheme.headline1,
     textAlign: TextAlign.center),
),
于 2020-10-17T22:50:16.660 回答