Flutter Create Custom Reusable Style Sheet Example like React Native

Hello guys, In react native and HTML we have seen reusable style sheets concept. Where we can define one style sheet in the Style document and can reuse it many times to achieve same styling. We can achieve this same concept in flutter by using custom reusable style sheet. A user can define styling options using static const TextStyle custom object variable and define it's desired styling options inside it. See the below examples for more deep details.

Flutter Create Custom Reusable Style Sheet Example like React Native:

1. Defining a custom style named as greenTextStyle. In this style we are applying text color, text font size and font weight.

static const TextStyle greenTextStyle =
      TextStyle(color: Colors.green, fontSize: 28, fontWeight: FontWeight.bold);

2. Assign the same greenTextStyle on Text widget.

const Text(
                "Sample Text One",
                style: greenTextStyle,
              )

3. Creating another custom style named as blueTextStyle.

static const TextStyle blueTextStyle =
      TextStyle(color: Colors.blue, fontSize: 38, fontWeight: FontWeight.w600);

4. Applying the blueTextStyle style on Text widget.

Text(
            "Sample Text Two",
            style: blueTextStyle,
          )

5. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const TextStyle greenTextStyle =
      TextStyle(color: Colors.green, fontSize: 28, fontWeight: FontWeight.bold);

  static const TextStyle blueTextStyle =
      TextStyle(color: Colors.blue, fontSize: 38, fontWeight: FontWeight.w600);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      Center(
          child: Container(
              padding: const EdgeInsets.fromLTRB(25, 25, 25, 0),
              child: const Text(
                "Sample Text One",
                style: greenTextStyle,
              ))),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 0),
          child: const Text(
            "Sample Text Two",
            style: blueTextStyle,
          ))
    ])));
  }
}

Screenshot of App: