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
35
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)

Documentation

Documentation
API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on material_texts