April 10, 2024 3 min read

Dart 3.10's Dot Shorthand Changed How I Write Flutter

The new dot shorthand syntax in Dart 3.10 eliminates boilerplate when accessing static members and enum values. Here's how it transforms everyday Flutter code.

dart flutter

Dart 3.10 introduced dot shorthand—a small syntax change that has a big impact on how Flutter code reads. Let me show you why I’m excited about it.

The Problem

Flutter code is verbose. When using enums or static constants, you repeat type names constantly:

// Before: So much repetition
Container(
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Text(
    'Hello',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
    ),
  ),
)

See how Alignment, Colors, BorderRadius, FontWeight are all redundant? The compiler already knows the expected type.

The Solution: Dot Shorthand

With dot shorthand, when the expected type is known, you can omit it:

// After: Clean and focused
Container(
  alignment: .center,
  decoration: BoxDecoration(
    color: .blue,
    borderRadius: .circular(8),
  ),
  child: Text(
    'Hello',
    style: TextStyle(
      fontWeight: .bold,
      fontSize: 16,
    ),
  ),
)

Real-World Impact

Enums Become Cleaner

// Before
switch (status) {
  case ConnectionStatus.connected:
    return Icon(Icons.wifi, color: Colors.green);
  case ConnectionStatus.disconnected:
    return Icon(Icons.wifi_off, color: Colors.red);
}

// After
switch (status) {
  case .connected:
    return Icon(.wifi, color: .green);
  case .disconnected:
    return Icon(.wifi_off, color: .red);
}

// Before
Padding(
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [...],
  ),
)

// After
Padding(
  padding: .symmetric(horizontal: 16, vertical: 8),
  child: Row(
    mainAxisAlignment: .spaceBetween,
    crossAxisAlignment: .center,
    children: [...],
  ),
)

Try It Yourself

Here’s a live example you can experiment with:

When Not to Use It

Dot shorthand improves readability, but sometimes the explicit type helps:

When the type isn’t obvious from context
In complex expressions where clarity matters
When teaching or documenting code

Migration Strategy

You don’t need to change everything at once:

Start using it in new code
Apply it during code reviews
Let your IDE’s quick-fixes help with refactoring

Conclusion

Dot shorthand is a small change that makes Flutter code significantly more readable. Less visual noise means you can focus on what your code actually does.

The best syntax improvements are the ones you stop noticing because they just feel natural. Dot shorthand is one of those.