Simplifying Text Styling in Flutter with AppText Widget

Are you tired of duplicating code to style text consistently across your Flutter app? As your app grows, manual styling of each Text widget can lead to code duplication and make your codebase harder to maintain. Fear not! In this blog post, we’ll explore how the custom AppText widget can revolutionize text styling in your Flutter projects, making your code cleaner and more maintainable.

The Problem with Manual Text Styling

In Flutter development, you often find yourself in situations where text requires different styling based on its purpose. For instance, you may want different styles for normal body text, headlines, buttons, or text within text fields. Manually styling each Text widget in these scenarios can result in code duplication and negatively impact the maintainability of your codebase.

Introducing the AppText Widget

To tackle this issue head-on, I’ve created the AppText widget — a powerful and customizable text widget designed to simplify text styling in Flutter. This widget comes with various factory constructors, each catering to specific text styling scenarios.

Enumerated Text Styles

The AppText widget needs the AppTextStyle enum, categorizing commonly used text styles in applications. From small body text to bold headlines, each style is predefined for consistent and scalable implementation.

enum AppTextStyle {
 bodySmall,
 bodyNormal,
 buttonText,
 headline1,
 headline2,
 ....
}

Factory Constructors for Easy Styling

The AppText widget provides several factory constructors, each tailored to a specific text style

class AppText extends StatelessWidget {

  const AppText._(
    this.text, {
    this.textAlign,
    required this.appTextStyle,
    this.textOverflow,
    this.maxLine,
    this.color,
  });

  factory AppText.normal(
    String text, {
    TextOverflow? textOverflow,
    int? maxLine,
    TextAlign? textAlign,
    Color? color,
  }) {
    return AppText._(
      text,
      appTextStyle: AppTextStyle.bodyNormal,
      textAlign: textAlign,
      textOverflow: textOverflow,
      maxLine: maxLine,
      color: color,
    );
  }

  factory AppText.small(
    String text, {
    TextOverflow? textOverflow,
    int? maxLine,
    TextAlign? textAlign,
    Color? color,
  }) {
    return AppText._(
      text,
      appTextStyle: AppTextStyle.bodySmall,
      textAlign: textAlign,
      textOverflow: textOverflow,
      maxLine: maxLine,
      color: color,
    );
  }


  final String text;
  final AppTextStyle appTextStyle;
  final TextOverflow? textOverflow;
  final int? maxLine;
  final TextAlign? textAlign;
  final Color? color;


  TextStyle? getTextStyle(BuildContext context) {
    TextStyle? textStyle;
    switch (appTextStyle) {
      case AppTextStyle.bodyNormal:
        textStyle = TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.normal,
        );
        break;
      case AppTextStyle.bodySmall:
        textStyle = TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.normal,
          color: Colors.black,
        );
        break;
    }

    return textStyle;
  }

  @override
  Widget build(BuildContext context) {
    final TextStyle? textStyle = getTextStyle(context);
    return Text(
      text,
      style: color != null ? textStyle!.copyWith(color: color) : textStyle,
      textAlign: textAlign,
      overflow: textOverflow,
      maxLines: maxLine,
    );
  }
}

Customization Made Easy

The beauty of the AppText widget lies in its simplicity and ease of customization. You can now effortlessly customize text across your app without duplicating styling code. The factory constructors encapsulate the styling logic, ensuring consistent text styles.

Example Usage:

// Using AppText for normal body text
AppText.normal(
 'Hello, Flutter!',
 textAlign: TextAlign.center,
 color: Colors.blue,
);

// Using AppText for a button
AppText.button(
 'Click me!',
 color: Colors.green,
);

// Using AppText for small text
AppText.small(
 'Tiny text here.',
 textAlign: TextAlign.right,
);

Conclusion

By incorporating the AppText widget into your Flutter projects, you can significantly reduce code duplication and create a more maintainable codebase. The factory constructors make it easy to apply consistent styling to different types of text, and the centralized styling logic ensures a cohesive design across your app.

Feel free to explore and extend the capabilities of the AppText widget in your projects. Happy coding, and may your Flutter text styling journey be smoother than ever!