CODEWITHSUNDEEP
fluttertextthemessimplify
Bliv_Dev
Bliv_Dev

Reputation: 617

Flutter assign Theme text style

I was wondering is there is a better way to assign a certain default text style of my Theme to a Text widget than this approach.

Text(
 'Hello world',
  style: Theme.of(context).textTheme.headline1,
),

I did assume there should be something like a separate Widget or a Text Method Text.headline1 or simply a style Command style: TextStyle.headline1.

But seems I have to go through the Theme.of(context) to get this.

Does anyone have a better solution?

Upvotes: 6

Views: 9861

Answers (5)

Mukhtar Ahmed
Mukhtar Ahmed

Reputation: 21

You define all Your Theme Style in Main like this

return MaterialApp(
  theme: ThemeData(
      primarySwatch: Colors.purple,
      textTheme: TextTheme(
      headline1: TextStyle(
      color: const Color(0xFF232323),
      fontSize: 26.sp,
      fontWeight: FontWeight.w500,
      fontFamily: "Mont Regular",
      ),
    ),
  )

Then use like this

 Text("A cloud-agnostic solution for Project and HR Management",
 style: Theme.of(context).textTheme.headline1)

Upvotes: 2

Bonco
Bonco

Reputation: 298

I think yon can't escape some boilerplate. For me this approach looks cleanest

import 'package:flutter/material.dart';

class StyledText extends StatelessWidget {
  final String text;
  late final TextStyle? Function(BuildContext context)? getStyle;

  StyledText.headline1(this.text, {Key? key}) : super(key: key) {
    getStyle = (context) {
      return Theme.of(context).textTheme.headline1;
    };
  }

  StyledText.headline2(this.text, {Key? key}) : super(key: key) {
    getStyle = (context) {
      return Theme.of(context).textTheme.headline2;
    };
  }

  // ...

  @override
  Widget build(BuildContext context) {
    return Text(text, style: getStyle?.call(context));
  }
}

And use the widget like this

 StyledText.headline1("Hello world");

Upvotes: 8

Stewie Griffin
Stewie Griffin

Reputation: 5608

Theme.of returns the ThemeData value specified for the nearest BuildContext ancestor. If you don't use it, then you won't be able to access the theme configuration you may set and benefit from its advantages.

However, you can create a class called Styles where you can access the pre-defined colors, text styles and more:

class Styles {
  static const Color primaryColor = Colors.blue;

  static const TextStyle headline1 = TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
  );

  static const TextStyle bodyText1 = TextStyle(
    fontSize: 16.0,
    fontWeight: FontWeight.normal,
  );
}

Here is an example of using it:

Text(
  'Hello world',
  style: Styles.headline1,
)

Upvotes: 0

Jared Cornwall
Jared Cornwall

Reputation: 46

Theme.of(context) is a great way to go for a variety of reasons, like switching between light and dark themes. I like to create a variable for the theme and text theme to keep things clean and efficient.

Widget build(BuildContext context) {
  final theme = Theme.of(context);
  final textTheme = theme.textTheme;

  return Column(
    children: [
      Text('Heading Text', style: textTheme.headline1),
      Text('Caption Text', style: textTheme.caption),
      Text('Body text...', style: textTheme.bodyText1),
    ],
  );
}

Upvotes: 2

Boris Grigorov
Boris Grigorov

Reputation: 408

You can use TextStyle directly:

Text(
 'Hello world',
  style: TextStyle(color: Colors.black, fontSize: 15.0), // Etc...
),

Upvotes: 0

Related Questions