Can't Import Font for Flutter in Visual Studio Code

39 views Asked by At

I'm trying to import the Roboto Slab font from Google Fonts but I keep getting an error. I'm using Visual Studio Code. The directory location for the font is lib/fonts/Robo_Slab

Here is the file i'm using the font in

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Title',
        style: TextStyle(
          fontFamily: 'RobotoSlab'
        ),
        ),
        actions: [
          IconButton(
            onPressed: () {}, 
            icon: const Icon(Icons.search)
            ),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.more_vert)
            )
        ],
      )
      
    );
  }
}

Here is the pubspec.yaml file

name: flutter_application_2
description: "A new Flutter project."
publish_to: 'none'
version: 0.1.0

environment:
  sdk: '>=3.2.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  fonts:
    - family: RobotoSlab
      fonts:
        - asset: fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf
1

There are 1 answers

3
Ivo On

you forgot the lib/ part of the path. It needs to be

        - asset: lib/fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf

Also I'm not sure what the actual path is since at first you say it's in Robo_Slab but the yaml file says Roboto_Slab