ubuntu / yaru.dart

Ubuntu Yaru Flutter widgets and themes for building desktop and web applications
https://ubuntu.github.io/yaru.dart/
Mozilla Public License 2.0
234 stars 36 forks source link

How to change font family and font weight #905

Closed kawsaramin101 closed 4 months ago

kawsaramin101 commented 4 months ago

I have this code to change font family and font weight when using Yaru theme

import 'package:flutter/material.dart';

import 'package:yaru/yaru.dart';

void main() async {
  await YaruWindowTitleBar.ensureInitialized();
  runApp(MainWidget());
}

class MainWidget extends StatelessWidget {

  const MainWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return YaruTheme(
        data: const YaruThemeData(
            themeMode: ThemeMode.dark, useMaterial3: true),
        builder: (context, yaru, child) {
          final ThemeData lightTheme = yaru.theme ?? ThemeData.light();
          final ThemeData darkTheme = yaru.darkTheme ?? ThemeData.dark();

          return MaterialApp(
            home: const BaseLayout(),
            theme: _buildTheme(lightTheme, Brightness.light),
            darkTheme: _buildTheme(darkTheme, Brightness.light),
            themeMode: ThemeMode.dark,
            debugShowCheckedModeBanner: false,
            builder: (context, child) {
              return MediaQuery(
                data: MediaQuery.of(context).copyWith(
                  textScaler: const TextScaler.linear(1.0),
                ),
                child: child!,
              );
            },
          );
        });
  }
}

ThemeData _buildTheme(ThemeData base, Brightness brightness) {
  const FontWeight fontWeight = FontWeight.w300;
  const String fontFamily = 'RobotoMono';

  return base.copyWith(
      brightness: brightness,
      splashFactory: NoSplash.splashFactory,
      textTheme: const TextTheme(
        displayLarge: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        displayMedium:
            TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        displaySmall: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        headlineLarge:
            TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        headlineMedium:
            TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        headlineSmall:
            TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        titleLarge: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        titleMedium: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        titleSmall: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        bodyLarge: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        bodyMedium: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        bodySmall: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        labelLarge: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        labelMedium: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
        labelSmall: TextStyle(fontFamily: fontFamily, fontWeight: fontWeight),
      ));
}

The app just crashes, doesn't even show any error. How can I fix this? I have the fonts loaded correctly, because it was working before adding Yaru.

kawsaramin101 commented 4 months ago

I made this change to _buildTheme function and now it's working

ThemeData _buildTheme(ThemeData base, Brightness brightness) {
  const String fontFamily = 'RobotoMono';

  return base.copyWith(
    brightness: brightness,
    splashFactory: NoSplash.splashFactory,
    textTheme: Typography().white.apply(fontFamily: fontFamily),  // Added typography instead of TextTheme
  );
}

I have the font with only one font weight, so I didn't have to change the font weight in code.