How to use a custom font in a Flutter text widget with Material 3? | How can I create a gradient text style in Flutter?

Designers and developers favor using a custom font to give their app a distinct appearance that helps in building brand awareness and a better product altogether. In this brief article I’ll give you the steps to include your own font in your Flutter project.

To use a custom font in Flutter, follow these steps:

  • Add the font file to your Flutter project's assets folder.
  • In your pubspec.yaml file, add the following under flutter:
flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/MyCustomFont.ttf
  • Use the font in your Flutter widget tree by applying the custom font family to a Text widget's style property.
  • That's it! Now, your custom font is ready to use in your Flutter app. You can apply the font style to any text widget in your app using the fontFamily property.
Text("Hello, World!", style: TextStyle(fontFamily: 'MyCustomFont', fontSize: 36),)
..

or use Below code will change the entire app font family

ThemeData(
    
        useMaterial3: useMaterial3,
        fontFamily: 'Jost',
      
  }
  •  ThemeData is a Flutter class that holds the visual and interactive design elements of an application, such as colors, fonts, and animations.
  • This code creates an instance of ThemeData by setting useMaterial3 to the value of useMaterial3 passed in as an argument and the fontFamily property to 'Jost'. 
  • The useMaterial3 property specifies whether to use the latest Material design widgets or the original ones. 
  • The fontFamily property is used to set the font family for the application. 
  • The returned ThemeData object can then be used to configure the look and feel of the application.

You can get more font in this link : https://fonts.google.com/

Follow these steps to download the font file:
Step 1: Visit Google Fonts and search for Monserrat in the search bar
Step 2: Click on the Monserrat font
Step 3: Now click on the Download family to download the font
Step 4: Unzip the downloaded file
..

How can I create a gradient text style in Flutter?

To apply a custom gradient color to a text in Flutter, you can wrap the text widget with a ShaderMask widget and specify the gradient Shader using a LinearGradient. Here's an example:

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.red, Colors.blue],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ).createShader(bounds);
  },
  child: Text("My Gradient Text", style: TextStyle(fontSize: 30, color: Colors.white)),
)
In this example, a linear gradient is created from red to blue, with the begin and end properties specifying the starting and ending points of the gradient. The shaderCallback function takes in the bounds of the text and returns the gradient shader, which is then applied to the text using the ShaderMask widget.




main.dart
import 'package:flutter/material.dart';
import 'package:material/typography_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bolt UIX',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Jost',
      ),
      home: const TypographyScreen(),
    );
  }
}
  • A main() function that runs the Flutter app defined in the MyApp widget.
  • The MyApp widget extends the StatelessWidget class and defines the appearance and behavior of the Flutter app. It uses a MaterialApp widget as its root widget.
  • The title property sets the title of the app to "Bolt UIX".
  • The debugShowCheckedModeBanner property is set to false to hide the debug banner.
  • The theme property sets the primary color of the app to blue and the default custom font to 'Jost'.
  • The home property sets the default route to a TypographyScreen widget defined in the typography_screen.dart file.
It includes the following:
Import statements for the Flutter framework and a separate Dart file named typography_screen.dart
..
typography_screen.dart
import 'package:flutter/material.dart';

class TypographyScreen extends StatelessWidget {
  const TypographyScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context)
        .textTheme
        .apply(displayColor: Theme.of(context).colorScheme.onSurface);

    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(8),
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[


            TextStyleExample(
                name: "Display Large", style: textTheme.displayLarge!.copyWith(fontFamily: "Royale")),
            TextStyleExample(
                name: "Display Medium", style: textTheme.displayMedium!),
            TextStyleExample(
                name: "Display Small", style: textTheme.displaySmall!),

            TextStyleExample(
                name: "Headline Large", style: textTheme.headlineLarge!),
            TextStyleExample(
                name: "Headline Medium", style: textTheme.headlineMedium!),
            TextStyleExample(
                name: "Headline Small", style: textTheme.headlineSmall!),

            TextStyleExample(name: "Title Large", style: textTheme.titleLarge!),
            TextStyleExample(name: "Title Medium", style: textTheme.titleMedium!),
            TextStyleExample(name: "Title Small", style: textTheme.titleSmall!),

            TextStyleExample(name: "Label Large", style: textTheme.labelLarge!),
            TextStyleExample(name: "Label Medium", style: textTheme.labelMedium!),
            TextStyleExample(name: "Label Small", style: textTheme.labelSmall!),

            TextStyleExample(name: "Body Large", style: textTheme.bodyLarge!),
            TextStyleExample(name: "Body Medium", style: textTheme.bodyMedium!),
            TextStyleExample(name: "Body Small", style: textTheme.bodySmall!),


            /* Gradient sample */
            ShaderMask(
              shaderCallback: (Rect bounds) {
                return const LinearGradient(
                  colors: [Color(0xFF8E2DE2), Color(0xFF4A00E0)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ).createShader(bounds);
              },
              child: const Text("Gradient text", style: TextStyle(fontSize: 40, color: Colors.white),textAlign: TextAlign.center,),
            ),


          ],
        ),
      ),
    );
  }
}

class TextStyleExample extends StatelessWidget {
  const TextStyleExample({
    super.key,
    required this.name,
    required this.style,
  });

  final String name;
  final TextStyle style;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(name, style: style.copyWith(letterSpacing: 1.0)),
    );
  }
}

"TypographyScreen" class which extends the "StatelessWidget" class. The purpose of this class is to display various text styles that are available in the Flutter framework.

The "build" method of the "TypographyScreen" class creates a single child scroll view that contains a column of various text styles. The text styles are created using the "TextTheme" class of the Flutter framework and are applied to the text using the "apply" method.

The "TextStyleExample" class is another stateless widget that is used to display a text style with a name. It takes the name of the style and the style itself as input.

At the end of the code, there is also an example of text with a gradient color using the "ShaderMask" widget.

..

GET source code on Github:

..

..

Comments

Post a Comment