Name conflicts with custom widgets in Flutter

Question

What is the best way to make custom widgets in Flutter that don't conflict with those exported by the material package? Specifically: I'm trying to make a design system based on atomic design . So, let's say I want my own Text and Card widgets. I can't name them Text or Card because both of these are exported by the material package.

Some options that I've considered:

1. Creating a ui library and importing using as

// components/atoms/Text.dart
import "package:flutter/material.dart" hide Text;
import "package:flutter/material.dart" as material show Text;

class Text extends StatelessWidget {
  Text(String content);

  Widget build(BuildContext context) {
    // Imagine some more complicated styling specific to my design system
    return material.Text(content);
  }
}

// components/ui.dart
library ui

export "package:my_app/components/atoms/Text";

// screens/HomeScreen.dart

import "package:flutter/material.dart";
import "package:my_app/components/ui" as ui;

class HomeScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    // Example usage
    return ui.Text(content);
  }
}

This doesn't feel great... First, I need to remember to include as whenever I import the ui library, and second, it's slightly annoying to have to hide and show classes in my Text implementation.

2. Just hide the conflicting classes

// screens/HomeScreen.dart

import "package:flutter/material.dart" hide Text;
import "package:my_app/components/Text";

class HomeScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    // Example usage
    return Text(content);
  }
}

Similar to option (1), I don't want to have to remember to hide all the classes that conflict with my custom widgets.

3. Just use different names

Maybe AppText or ThemeText or UIText or AtomText ? This doesn't feel great either, especially for some of the other widgets like IconButton .

Is there a convention around this, or some decent solution? I haven't seen any custom UI libraries, but this is mostly useful for teams that want to reuse widgets across apps and keep a consistent style.

Answer 1

From what I gather, you want your custom Text class to do the exact same thing as a normal Text widget, but with a different design. If that really is the case, I propose that you change the ThemeData of your project. The MaterialApp widget takes a theme argument, so you can style your TextTheme, CardTheme, IconButtonTheme etc. in there. This would prevent any naming conflicts, save you a lot of coding, and makes it easy to tweak.

Things such as TextTheme allow for different types of styles, such as headlines, bodytext, etc., as described here .

Answer 2

1. You can add 'My' at the beginning of the widget, for example, 'MyText' instead of 'Text' and 'MyCard' instead of 'Card'.

2. You can use a tricky way, in my case I use an intentionally wrong dictation for naming. For instance, instead of 'Card' you can name 'Cart', or instead of 'Text', you can name tekst.