Create custom TextStyle class on Flutter-CodePudding

How can I create a custom TextStyle class in flutter? For example I have several buttons and want the text inside to all be the same fontSize and color but I don't want to repeat the TextStyle inside of each Text widget, but instead create something such as CustomTextStyle that I could use in the place of the TextStyle itself. Is there a way to do this?

CodePudding user response：

Create a separate class names CustomTextStyle and add the styles inside them like:

class CustomTextStyle {
  static const TextStyle nameOfTextStyle = TextStyle(
    fontSize: 24,
    color: Colors.green,
    fontWeight: FontWeight.bold,
  );
}

Now you can use it in Text widget like:

Text('Lorem Ipsum',
   style: CustomTextStyle.nameOfTextStyle,
)

CodePudding user response：

To define your button or text style globally, you need to use theme.

For example, you can define a custom theme for TextButton :

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textButtonTheme: TextButtonThemeData(
          style: ButtonStyle(
            textStyle: MaterialStateProperty.all(
              const TextStyle(fontSize: 20),
            ),
          ),
        ),
        [...]

CodePudding user response：

There are three ways to do this:

Using Theme:

You can declare multiple TextStyles separately in Theme based on widgets, for e.g. AppBar's TitleTextTheme, AppBar's ToolbarTextTheme, Button's TextTheme, General TextTheme for the whole app, or based on ThemeMode, for e.g. Dark Mode or Light mode, you can combine these two Widgets based and ThemeModes based as well.

To do this, Create a class called ThemeModel for example, Create the ThemeData Variables in it in which you'll declare these TextThemes and use it in your MaterialApp in main.dart as
```
MaterialApp(
  ...,
  theme: ThemeModel().lightMode,
  darkTheme: ThemeModel().darkMode,
)
```

Using a Custom Text Widget.

const CustomText extends StatelessWidget {
final String text;
const CustomText(this.text, {Key? key}): super(key:key);  

@override
Widget build(BuildContext context) {
  return Text(
    text,
    style: TextStyle(
      color: YourColor,
      fontSize: YourSize,
      fontWeight: YourFontWeight
    ),
  );

and use it as,

ElevatedButton(
  onPressed: (){},
  child: CustomText('Click Me'),
)

This way the TextStyle will remain same wherever you'll use this widget.

Using Custom TextStyle:

class CustomTextStyle {
  static const TextStyle textStyle = TextStyle(
    color: YourColor,
    fontSize: YourSize,
    fontWeight: YourFontWeight
  );
}

and, use it as:

ElevatedButton(
  onPressed: (){},
  child: Text('Click Me', 
    style: CustomTextStyle.textStyle,
  ),
)

Hope, you understand that every one of these methods have their own utility and can be customized way further to make your app development easy.