material_texts 1.1.1 copy "material_texts: ^1.1.1" to clipboard
material_texts: ^1.1.1 copied to clipboard

Material Texts is a package that simplifies text styling in Flutter by providing 15 different customizable text widgets based on Material Design typography.

example/example.md

Examples #

Display Texts #

Display Large #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DisplayLarge Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [DisplayLarge] with custom settings.
            ///
            /// - [fontSize]: 57
            /// - [textColor]: Colors.red
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            DisplayLarge(
              'Big Bold Text',
              fontSize: 57,
              textColor: Colors.red,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [DisplayLarge] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            DisplayLarge(
              'This is a DisplayLarge example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [DisplayLarge] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: -0.1
            /// - [lineHeight]: 1.25
            DisplayLarge(
              'Custom letter spacing and line height.',
              letterSpacing: -0.1,
              lineHeight: 1.25,
              textAlign: TextAlign.right,
              textColor: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

Display Medium #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DisplayMedium Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [DisplayMedium] with custom settings.
            ///
            /// - [fontSize]: 45
            /// - [textColor]: Colors.green
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            DisplayMedium(
              'Medium Text',
              fontSize: 45,
              textColor: Colors.green,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [DisplayMedium] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            DisplayMedium(
              'This is a DisplayMedium example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [DisplayMedium] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.5
            /// - [lineHeight]: 1.3
            DisplayMedium(
              'Custom letter spacing and line height.',
              letterSpacing: 0.5,
              lineHeight: 1.3,
              textAlign: TextAlign.right,
              textColor: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

Display Small #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DisplaySmall Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [DisplaySmall] with custom settings.
            ///
            /// - [fontSize]: 36
            /// - [textColor]: Colors.orange
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            DisplaySmall(
              'Small Text',
              fontSize: 36,
              textColor: Colors.orange,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [DisplaySmall] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            DisplaySmall(
              'This is a DisplaySmall example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [DisplaySmall] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.2
            /// - [lineHeight]: 1.5
            DisplaySmall(
              'Custom letter spacing and line height.',
              letterSpacing: 0.2,
              lineHeight: 1.5,
              textAlign: TextAlign.right,
              textColor: Colors.purple,
            ),
          ],
        ),
      ),
    );
  }
}

Headline Texts #

Headline Large #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeadlineLarge Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [HeadlineLarge] with custom settings.
            ///
            /// - [fontSize]: 32
            /// - [textColor]: Colors.blue
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            HeadlineLarge(
              'Large Headline',
              fontSize: 32,
              textColor: Colors.blue,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [HeadlineLarge] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            HeadlineLarge(
              'This is a HeadlineLarge example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [HeadlineLarge] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.5
            /// - [lineHeight]: 1.4
            HeadlineLarge(
              'Custom letter spacing and line height.',
              letterSpacing: 0.5,
              lineHeight: 1.4,
              textAlign: TextAlign.right,
              textColor: Colors.purple,
            ),
          ],
        ),
      ),
    );
  }
}

Headline Medium #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeadlineMedium Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [HeadlineMedium] with custom settings.
            ///
            /// - [fontSize]: 28
            /// - [textColor]: Colors.black
            /// - [fontWeight]: FontWeight.bold
            /// - [letterSpacing]: 0.5
            /// - [lineHeight]: 1.3
            HeadlineMedium(
              'Medium Headline',
              fontSize: 28,
              textColor: Colors.black,
              fontWeight: FontWeight.bold,
              letterSpacing: 0.5,
              lineHeight: 1.3,
            ),
            SizedBox(height: 20),

            /// Example of using [HeadlineMedium] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            HeadlineMedium(
              'This is a HeadlineMedium example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [HeadlineMedium] with custom letter spacing.
            ///
            /// - [letterSpacing]: 1.0
            /// - [lineHeight]: 1.4
            HeadlineMedium(
              'Custom letter spacing and line height.',
              letterSpacing: 1.0,
              lineHeight: 1.4,
              textColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Headline Small #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeadlineSmall Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [HeadlineSmall] with custom settings.
            ///
            /// - [fontSize]: 24
            /// - [textColor]: Colors.black
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0.5
            /// - [lineHeight]: 1.4
            HeadlineSmall(
              'Small Headline',
              fontSize: 24,
              textColor: Colors.black,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
              letterSpacing: 0.5,
              lineHeight: 1.4,
            ),
            SizedBox(height: 20),

            /// Example of using [HeadlineSmall] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            HeadlineSmall(
              'This is a HeadlineSmall example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [HeadlineSmall] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 1.0
            /// - [lineHeight]: 1.5
            HeadlineSmall(
              'Custom letter spacing and line height.',
              letterSpacing: 1.0,
              lineHeight: 1.5,
              textColor: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

Title Texts #

Title Large #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TitleLarge Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [TitleLarge] with custom settings.
            ///
            /// - [fontSize]: 22
            /// - [textColor]: Colors.black
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0
            /// - [lineHeight]: 1.27
            TitleLarge(
              'Large Title Text',
              fontSize: 22,
              textColor: Colors.black,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
              letterSpacing: 0,
              lineHeight: 1.27,
            ),
            SizedBox(height: 20),

            /// Example of using [TitleLarge] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            TitleLarge(
              'Default TitleLarge settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [TitleLarge] with custom text decoration and shadows.
            ///
            /// - [textDecoration]: TextDecoration.underline
            /// - [textShadows]: [Shadow(color: Colors.grey, offset: Offset(1, 1), blurRadius: 2)]
            TitleLarge(
              'Custom text decoration and shadows.',
              textDecoration: TextDecoration.underline,
              textShadows: [
                Shadow(
                  color: Colors.grey,
                  offset: Offset(1, 1),
                  blurRadius: 2,
                ),
              ],
              textColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Title Medium #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import your material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TitleMedium Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [TitleMedium] with custom settings.
            ///
            /// - [fontSize]: 16
            /// - [textColor]: Colors.black
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0.15
            /// - [lineHeight]: 1.5
            TitleMedium(
              'Medium Title Text',
              fontSize: 16,
              textColor: Colors.black,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
              letterSpacing: 0.15,
              lineHeight: 1.5,
            ),
            SizedBox(height: 20),

            /// Example of using [TitleMedium] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            TitleMedium(
              'Default TitleMedium settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [TitleMedium] with custom text decoration and shadows.
            ///
            /// - [textDecoration]: TextDecoration.underline
            /// - [textShadows]: [Shadow(color: Colors.grey, offset: Offset(1, 1), blurRadius: 2)]
            TitleMedium(
              'Custom text decoration and shadows.',
              textDecoration: TextDecoration.underline,
              textShadows: [
                Shadow(
                  color: Colors.grey,
                  offset: Offset(1, 1),
                  blurRadius: 2,
                ),
              ],
              textColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Title Small #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import your material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TitleSmall Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [TitleSmall] with custom settings.
            ///
            /// - [fontSize]: 14
            /// - [textColor]: Colors.black
            /// - [fontWeight]: FontWeight.w600
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0.1
            /// - [lineHeight]: 1.4
            TitleSmall(
              'Small Title Text',
              fontSize: 14,
              textColor: Colors.black,
              fontWeight: FontWeight.w600,
              textAlign: TextAlign.center,
              letterSpacing: 0.1,
              lineHeight: 1.4,
            ),
            SizedBox(height: 20),

            /// Example of using [TitleSmall] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            TitleSmall(
              'Default TitleSmall settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [TitleSmall] with custom text decoration and shadows.
            ///
            /// - [textDecoration]: TextDecoration.lineThrough
            /// - [textShadows]: [Shadow(color: Colors.blue, offset: Offset(2, 2), blurRadius: 3)]
            TitleSmall(
              'Custom text decoration and shadows.',
              textDecoration: TextDecoration.lineThrough,
              textShadows: [
                Shadow(
                  color: Colors.blue,
                  offset: Offset(2, 2),
                  blurRadius: 3,
                ),
              ],
              textColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

Body Texts #

Body Large #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BodyLarge Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [BodyLarge] with custom settings.
            ///
            /// - [fontSize]: 18
            /// - [textColor]: Colors.blue
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            BodyLarge(
              'Hello, World!',
              fontSize: 18,
              textColor: Colors.blue,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [BodyLarge] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            BodyLarge(
              'This is a BodyLarge example with default settings.',
            ),
          ],
        ),
      ),
    );
  }
}

Body Medium #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BodyMedium Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [BodyMedium] with custom settings.
            ///
            /// - [fontSize]: 16
            /// - [textColor]: Colors.blue
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            BodyMedium(
              'Hello, World!',
              fontSize: 16,
              textColor: Colors.blue,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [BodyMedium] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            BodyMedium(
              'This is a BodyMedium example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [BodyMedium] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 1.0
            /// - [lineHeight]: 1.6
            BodyMedium(
              'Custom letter spacing and line height.',
              letterSpacing: 1.0,
              lineHeight: 1.6,
              textAlign: TextAlign.left,
              textColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

Body Small #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BodySmall Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [BodySmall] with custom settings.
            ///
            /// - [fontSize]: 14
            /// - [textColor]: Colors.red
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            BodySmall(
              'Custom BodySmall Text',
              fontSize: 14,
              textColor: Colors.red,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 20),

            /// Example of using [BodySmall] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            BodySmall(
              'This is a BodySmall example with default settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [BodySmall] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.8
            /// - [lineHeight]: 1.5
            BodySmall(
              'Custom letter spacing and line height.',
              letterSpacing: 0.8,
              lineHeight: 1.5,
              textAlign: TextAlign.left,
              textColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

Label Texts #

Label Large #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LabelLarge Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [LabelLarge] with custom settings.
            ///
            /// - [fontSize]: 14
            /// - [textColor]: Colors.blue
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0.2
            /// - [lineHeight]: 1.5
            LabelLarge(
              'Large Label Text',
              fontSize: 14,
              textColor: Colors.blue,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
              letterSpacing: 0.2,
              lineHeight: 1.5,
            ),
            SizedBox(height: 20),

            /// Example of using [LabelLarge] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            LabelLarge(
              'Default LabelLarge settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [LabelLarge] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.3
            /// - [lineHeight]: 1.6
            LabelLarge(
              'Custom letter spacing and line height.',
              letterSpacing: 0.3,
              lineHeight: 1.6,
              textColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Label Medium #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LabelMedium Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [LabelMedium] with custom settings.
            ///
            /// - [fontSize]: 12
            /// - [textColor]: Colors.blue
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0.5
            /// - [lineHeight]: 1.33
            LabelMedium(
              'Medium Label Text',
              fontSize: 12,
              textColor: Colors.blue,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
              letterSpacing: 0.5,
              lineHeight: 1.33,
            ),
            SizedBox(height: 20),

            /// Example of using [LabelMedium] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            LabelMedium(
              'Default LabelMedium settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [LabelMedium] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.6
            /// - [lineHeight]: 1.4
            LabelMedium(
              'Custom letter spacing and line height.',
              letterSpacing: 0.6,
              lineHeight: 1.4,
              textColor: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

Label Small #

import 'package:flutter/material.dart';
import 'package:material_texts/material_texts.dart'; // Import the material_texts package

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Texts Example',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          onPrimaryContainer:
              Colors.black, // Define the default text color in the theme
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LabelSmall Example'), // App bar title
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            /// Example of using [LabelSmall] with custom settings.
            ///
            /// - [fontSize]: 11
            /// - [textColor]: Colors.grey
            /// - [fontWeight]: FontWeight.bold
            /// - [textAlign]: TextAlign.center
            /// - [letterSpacing]: 0.5
            /// - [lineHeight]: 1.45
            LabelSmall(
              'Small Label Text',
              fontSize: 11,
              textColor: Colors.grey,
              fontWeight: FontWeight.bold,
              textAlign: TextAlign.center,
              letterSpacing: 0.5,
              lineHeight: 1.45,
            ),
            SizedBox(height: 20),

            /// Example of using [LabelSmall] with default settings.
            ///
            /// This demonstrates the widget's default styling and behavior.
            LabelSmall(
              'Default LabelSmall settings.',
            ),
            SizedBox(height: 20),

            /// Example of using [LabelSmall] with custom letter spacing and line height.
            ///
            /// - [letterSpacing]: 0.6
            /// - [lineHeight]: 1.5
            LabelSmall(
              'Custom letter spacing and line height.',
              letterSpacing: 0.6,
              lineHeight: 1.5,
              textColor: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

1
likes
160
points
21
downloads

Publisher

unverified uploader

Weekly Downloads

Material Texts is a package that simplifies text styling in Flutter by providing 15 different customizable text widgets based on Material Design typography.

Homepage
Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on material_texts