Creating Reusable Custom Widgets in Flutter | raywenderlich.com

Learn how to design and create your own custom widgets in Flutter that you can use in any of your projects or share with the world.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/10126984-creating-reusable-custom-widgets-in-flutter

there is one text widget on each screen, let’s call it “title”, while it has a different color on the screens, how to make it reusable with its own styles that look like this

/// Headline 1 Bold White
static final TextStyle headline1White = TextStyle(
fontFamily: Assets.fonts.gilroyBold,
fontSize: 24,
height: 32 / 24,
fontWeight: FontWeight.w700,
color: AppColors.textFFFFFF,
);

/// Headline 1 Bold Pink
static final TextStyle headline1Pink = TextStyle(
fontFamily: Assets.fonts.gilroyBold,
fontSize: 24,
height: 32 / 24,
fontWeight: FontWeight.w700,
color: AppColors.textFF3C60,
);

If it were me I probably wouldn’t bother creating a reusable widget. I would just have a central file to store the styles and then just set them in the text widgets. If they are styles that you will use throughout your app you should also look at setting the theme, which includes a text theme.