Skip to main content
Mapagam

Managing Fonts and Icons

1. Using System Fonts

Font Family Usage Notes
systemFont FontFamily.systemFont() Uses the system's default font
googleFonts FontFamily.googleFonts() Uses Google Fonts with custom font families

Example: Using System Fonts in Text Widget

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 16,
  ),
)
Note: Ensure that the font family name matches the actual font installed or loaded in your app.

2. Adding Custom Fonts

Property Value Description
fontFamily 'Roboto' Name of the font family to use
fontFamilyFallback ['Arial', 'Helvetica'] Fallback fonts if the primary font is not available

Example: Define a custom font in pubspec.yaml

fonts:
  - family: Roboto
    fonts:
      - asset: assets/fonts/Roboto-Regular.ttf
      - asset: assets/fonts/Roboto-Bold.ttf
        weight: 700

Example: Use custom font in a Text widget

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 16,
  ),
)

3. Using Font Families and Weights

Property Values Description
fontFamily String Name of the font family to use. Can be a system font or a custom font loaded via assets.
fontStyle FontStyle.normal, FontStyle.italic Style of the font (normal or italic).
fontWeight FontWeight.w100 to FontWeight.w900 Weight of the font (100 to 900). Common values: FontWeight.normal, FontWeight.bold.

Example: Applying Font Family and Weight

Text(
  'Hello Flutter',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontWeight: FontWeight.bold,
    fontSize: 18.0,
  ),
)

Example: Using Custom Font from Assets

Text(
  'Custom Font Text',
  style: TextStyle(
    fontFamily: 'MyCustomFont',
    fontSize: 20.0,
  ),
)
Note: Custom fonts must be declared in pubspec.yaml under the fonts section to be used.

4. Using Google Fonts Package

Property Values Description
fontFamily 'Roboto' Name of the font family to use
fontStyle 'normal' | 'italic' Style of the font
fontWeight 'normal' | 'bold' | '100' to '900' Weight of the font

Example: Adding Google Fonts to Flutter Project

dependencies:
  google_fonts: ^4.0.3

Example: Using Google Fonts in UI

import 'package:google_fonts/google_fonts.dart';

Text(
  'Hello, World!',
  style: GoogleFonts.roboto(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)
Note: Ensure that the font family name matches exactly with the one from Google Fonts.

5. Using Icon Widget

Property Values Description
icon IconData The icon to display. Required.
size double The size of the icon. Defaults to 24.0.
color Color The color of the icon. Defaults to the current text color.
semanticLabel string Descriptive label for accessibility.

Example: Basic Icon Usage

Icon(Icons.favorite, size: 32, color: Colors.red)

Example: Icon with Semantic Label

Icon(Icons.accessibility, semanticLabel: 'Accessibility Icon')

6. Using Material Icons

Icon Usage Description
Icons.add Icon(Icons.add) Add icon for adding new items
Icons.delete Icon(Icons.delete) Delete icon for removing items
Icons.save Icon(Icons.save) Save icon for saving data
Icons.refresh Icon(Icons.refresh) Refresh icon for reloading content
Icons.search Icon(Icons.search) Search icon for filtering content
Icons.settings Icon(Icons.settings) Settings icon for configuration

Example: Using Material Icons in a Button

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    // Handle favorite action
  },
)
Note: Material icons are part of the material package. Make sure to import it in your Dart file.

7. Using Cupertino Icons

Icon Code Description
Icons.chevron_left Icons.chevron_left Left-pointing chevron icon
Icons.chevron_right Icons.chevron_right Right-pointing chevron icon
Icons.arrow_back Icons.arrow_back Back arrow icon (iOS style)
Icons.arrow_forward Icons.arrow_forward Forward arrow icon (iOS style)
Icons.home Icons.home Home icon
Icons.settings Icons.settings Settings icon

Example: Using Cupertino Icons in a Button

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

class CupertinoIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Cupertino Icons"),
      ),
      body: Center(
        child: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
Note: Cupertino icons are part of the cupertino_icons package and are designed to match iOS design language.

8. Customizing Icon Size and Color

Property Values Description
size double Defines the size of the icon in logical pixels
color Color Sets the color of the icon

Example: Customizing Icon Size and Color

Icon(Icons.favorite, size: 32.0, color: Colors.red)
Note: The size property scales the icon proportionally, while color changes its fill color.

9. Using IconButton Widget

Property Values Description
icon Widget The icon to display inside the button
onPressed VoidCallback? Callback when the button is pressed
iconSize double? Size of the icon
color Color? Color of the icon
padding EdgeInsetsGeometry? Padding around the icon
alignment AlignmentGeometry? Alignment of the icon within the button

Example: Basic IconButton Usage

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    print('Heart pressed');
  },
)

Example: IconButton with Custom Size and Color

IconButton(
  icon: Icon(Icons.refresh),
  iconSize: 30,
  color: Colors.blue,
  onPressed: () {
    // Refresh logic here
  },
)
Note: The IconButton widget is designed to be used with Material Design icons from the Icons class or custom Widget icons.

10. Using ImageIcon Widget

Property Values Description
icon IconData The icon to display. Required.
size double The size of the icon. Defaults to the current font size.
color Color The color of the icon. Defaults to the current text color.
semanticLabel String Descriptive label for accessibility.

Example: Basic ImageIcon Usage

IconImage(
  icon: Icons.favorite,
  size: 32.0,
  color: Colors.red,
)

Example: ImageIcon with Semantic Label

IconImage(
  icon: Icons.accessibility,
  semanticLabel: 'Accessibility Icon',
)

11. Creating Icon Themes

Property Values Description
iconTheme IconThemeData Defines the theme for all icons in a widget tree.
iconTheme.color Color Color to apply to all icons in the theme.
iconTheme.size double Size of the icons in the theme.
iconTheme.opacity double Opacity level of the icons (0.0 to 1.0).

Example: Defining an Icon Theme

IconTheme(
  data: IconThemeData(
    color: Colors.blue,
    size: 24.0,
    opacity: 0.8,
  ),
  child: Icon(Icons.favorite),
)
Note: Icon themes are inherited by child widgets, allowing for consistent icon styling throughout the app.

Was this article helpful?

Related Cheat Sheets