Skip to content

Commit ac74bab

Browse files
committed
docs: Add dot shorthands guide to Flutter concepts
1 parent a9d3279 commit ac74bab

File tree

2 files changed

+136
-0
lines changed

2 files changed

+136
-0
lines changed

src/content/ui/dot-shorthands.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
title: "Dot shorthands in Flutter"
3+
description: >
4+
Learn how to use Dart's dot shorthands to write cleaner, concise
5+
Flutter code.
6+
---
7+
8+
The **dot shorthands** feature allows you to omit the explicit type when
9+
accessing static members, constructors, or enum values, provided the compiler
10+
can infer the type from the surrounding context.
11+
12+
:::note
13+
For an technical overview of this feature, refer to the
14+
[Dot Shorthands guide](https://dart.dev/language/dot-shorthand) in the Dart
15+
documentation.
16+
:::
17+
18+
## Why dot shorthands matter
19+
20+
Building layouts in Flutter often involves deeply nested widget trees.
21+
Historically, this meant repeatedly typing explicit class and enum names for
22+
properties like colors, typography, and alignment. Dot shorthands reduce this
23+
boilerplate, making your code easier to read and faster to write.
24+
25+
Here is a side-by-side comparison of building a simple `Container`:
26+
27+
### Without dot shorthands
28+
```dart
29+
Container(
30+
color: Colors.blue,
31+
alignment: Alignment.center,
32+
padding: const EdgeInsets.all(16.0),
33+
child: Column(
34+
mainAxisAlignment: MainAxisAlignment.center,
35+
crossAxisAlignment: CrossAxisAlignment.start,
36+
children: [
37+
Text(
38+
'Hello World',
39+
style: TextStyle(
40+
fontWeight: FontWeight.bold,
41+
),
42+
),
43+
],
44+
),
45+
);
46+
```
47+
48+
### With dot shorthands
49+
```dart
50+
Container(
51+
color: .blue, // Instead of Colors.blue
52+
alignment: .center, // Instead of Alignment.center
53+
padding: const .all(16.0), // Instead of EdgeInsets.all(16.0)
54+
child: Column(
55+
mainAxisAlignment: .center, // Instead of MainAxisAlignment.center
56+
crossAxisAlignment: .start, // Instead of CrossAxisAlignment.start
57+
children: [
58+
Text(
59+
'Hello World',
60+
style: TextStyle(
61+
fontWeight: .bold, // Instead of FontWeight.bold
62+
),
63+
),
64+
],
65+
),
66+
);
67+
```
68+
69+
## Where to use dot shorthands
70+
71+
Dot shorthands work anywhere the Dart compiler has a clear "context type",
72+
meaning it knows exactly what type it expects. In Flutter, this is almost
73+
everywhere inside a widget's property list.
74+
75+
The most common targets for dot shorthands in Flutter are:
76+
77+
* **Enums**: `MainAxisAlignment`, `CrossAxisAlignment`, `BoxFit`,
78+
`TextDirection`.
79+
* **Static properties and methods**: `Colors`, `Icons`, `Alignment`.
80+
* **Constructors**: `EdgeInsets.all()`, `BorderRadius.circular()`.
81+
82+
### Example: enums
83+
84+
When a property expects an enum, such as `mainAxisAlignment`, you can omit the
85+
enum's name and just provide the value preceded by a dot (`.`):
86+
87+
```dart
88+
Row(
89+
mainAxisAlignment: .spaceEvenly, // Infers MainAxisAlignment.spaceEvenly
90+
children: [ /* ... */ ],
91+
)
92+
```
93+
94+
### Example: static properties
95+
96+
`Colors.green` and `Alignment.bottomRight` are static properties on their
97+
respective classes. Since `color` expects a `Color` object, you can just write
98+
`.green`:
99+
100+
```dart
101+
DecoratedBox(
102+
decoration: BoxDecoration(
103+
color: .green, // Infers Colors.green
104+
),
105+
child: Align(
106+
alignment: .bottomRight, // Infers Alignment.bottomRight
107+
child: FlutterLogo(),
108+
),
109+
)
110+
```
111+
112+
### Example: constructors
113+
114+
You can also use dot shorthands for named constructors. A common case is
115+
`EdgeInsets`:
116+
117+
```dart
118+
Padding(
119+
// Infers EdgeInsets.symmetric
120+
padding: .symmetric(horizontal: 16.0, vertical: 8.0),
121+
child: Text('Spaced out text'),
122+
)
123+
```
124+
125+
You can even use `.new` to call an unnamed constructor, though this is less
126+
common in standard widget trees:
127+
128+
```dart
129+
class _MyState extends State<MyWidget> {
130+
// Infers ScrollController()
131+
final ScrollController _scrollController = .new();
132+
// ...
133+
}
134+
```

src/data/sidenav/default.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -593,6 +593,8 @@
593593
permalink: /perf
594594
- title: Impeller
595595
permalink: /perf/impeller
596+
- title: Dot shorthands
597+
permalink: /ui/dot-shorthands
596598
- title: Performance best practices
597599
permalink: /perf/best-practices
598600
- title: App size

0 commit comments

Comments
 (0)