CODEWITHSUNDEEP
flutter
andrea pirola
andrea pirola

Reputation: 101

Flutter custom font doesn't change

I tried to use a custom font for my AppBar, but it didn't change. I tried with two different fonts, RobotoMono and DancingScript, but nothing, the app did't change the font. I tried to unistall the app from the virtual phone too, too create another virtual device, but nothing. That's my main.dart :

import 'package:flutter/material.dart';
import 'background_image_task-9.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Blumax',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'Dancing', 
        primarySwatch: myColour
      ),
      home: BackgroundImage(
        ),
    );
  }
}

const MaterialColor myColour = const MaterialColor(
  0xFF0009FF,
  const <int, Color>{
    50: const Color(0xFF0009FF),
    100: const Color(0xFF0009FF),
    200: const Color(0xFF0009FF),
    300: const Color(0xFF0009FF),
    400: const Color(0xFF0009FF),
    500: const Color(0xFF0009FF),
    600: const Color(0xFF0009FF),
    700: const Color(0xFF0009FF),
    800: const Color(0xFF0009FF),
    900: const Color(0xFF0009FF),
  },
);

This is where i use the custom font, background_image_task-9.dart :

import 'package:flutter/material.dart';

class BackgroundImage extends StatelessWidget{
    @override
    Widget build(BuildContext context){
      return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Blumax', style: TextStyle(
            fontWeight: FontWeight.w500,
            fontFamily: 'RobotoMono',
            fontSize: 40
          ),),
          centerTitle: true,
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/blumax.jpg"), fit: BoxFit.cover),
          ),
        ),
    );
  }
}

And that's my pubspec.yaml :

name: iphone_prj
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  english_words: ^3.1.0

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:
  assets:
    - assets/


  uses-material-design: true
fonts:
  - family: RobotoMono
    fonts:
      - asset: assets/fonts/RobotoMono-Bold.ttf
  - family: DancingScript
    fonts:
      - asset: assets/fonts/DancingScript-Bold.ttf
        weight: 300

Upvotes: 1

Views: 5183

Answers (3)

ParSa
ParSa

Reputation: 1436

There can be many reasons that avoid changing font in flutter :

1- Notice that the pubsec.yaml file is Space sensitive , It means that you need to use 2 or 4 spaces for declaring blocks. That's why you have to use indentation before declaring fonts. you can see the correct example in the snippet below:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

2- As the document mentioned the Folder Structure should be like :

awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

3- Add your font-family name correctly in your main ThemeData as per pubspec.yaml file:

 MaterialApp(
 title: 'Custom Fonts',
 // Set Raleway as the default app font.
 theme: ThemeData(fontFamily: 'Raleway'),
 home: MyHomePage(),);

Upvotes: 2

Naveen Avidi
Naveen Avidi

Reputation: 3073

your using asset prefix while declaring fonts in pubspec.yaml

Here is the solution https://stackoverflow.com/a/59113335/5557479

Upvotes: 0

Jay Mungara
Jay Mungara

Reputation: 7150

Just add your font-family name properly in your main ThemeData as per pubspec.yaml file

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Blumax',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'DancingScript', 
        primarySwatch: myColour
      ),
      home: BackgroundImage(
        ),
    );
  }
}

The problem in your case is your font-family name is DancingScript and your providing it in the ThemeData as Dancing. So it will not effect to your app fonts.

Also, in your BackgroundImage class you have added RobotoMono font. But, the "fontWeight: FontWeight.w500" you have added is not matching as per your pubspec.yaml as you have added there RobotoMono-Bold fonts.

So, by matching your font names and font style will effect your app fonts as per your requirements.

Upvotes: 2

Related Questions