Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details?

Make text selection match your design

When using MaterialApp, it picks the cursor and selection colors for you. If you have a custom design, you probably want to pick them yourself.

Look how it nicely complements expen.app's black & red design: the brand red with opacity for the selection, full brand red for the handles:

Add textSelectionTheme to your ThemeData. This applies to TextField, SelectableText, and anything else that uses text selection:

ThemeData(
  textSelectionTheme: TextSelectionThemeData(
    selectionColor: Colors.purple.withValues(alpha: 0.3),
    selectionHandleColor: Colors.purple,
    cursorColor: Colors.purple,
  ),
)

Your accent or brand color works best here. Selection sits behind text, so contrast matters. Light brand colors usually work as is. Dark ones can clash with the text, so add some opacity until it reads cleanly. Cursor and handles can stay at full color, they're small enough.