Breaking News: Flutter 3.7 shocker — The most obvious widget finally added!
People new to Flutter will be amazed.
The widget we’re talking about is available in third-party libraries, but for such simple things, it’s not very desirable to use someone else’s code. First, I’ll show you how this widget was implemented by me (previously), and then I’ll replace the entire code with just one line.
Before trying it yourself, make sure that Flutter is updated to version 3.7 using the command:
flutter doctor
If not, then…
flutter upgradeThe widget we’re talking about is the Badge — yes, that small circle with a number in the corner of an icon. It didn’t exist before, and you could get around the issue like this…
Stack(alignment: Alignment.center, children: [
IconButton(
icon: const Icon(Icons.notifications_active),
onPressed: () => {}),
Positioned(
right: 5,
top: 5,
child: Container(
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.red,
),
constraints: const BoxConstraints(
minWidth: 16,
minHeight: 16,
),
child: const Text(
"4",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 10, color: Colors.white),
),
))
])And it worked overall (I’ll show the result below). But now, with the release of Flutter 3.7, you can simply do it like this, without any imports:
const Badge(
label: Text("4"),
child: Icon(Icons.notifications_active),
)Without any imports, the result is…
Can you guess where the new badge is? Hint: it’s the one with fewer lines of code 🤡.
While you recover from the shock, you might be interested in my series of articles on working with REST APIs in Flutter, so don’t miss out:
- 👉 Part 1: Creating API Provider
- 👉 Part 2: Debugging with Unit Tests
- 👉 Part 3: Preventing Application Freezing
- 👉 Part 4: Sending POST Request
- 👉 Part 5: Code Review
- 👉 Part 6: Building Dart Types from Swagger/OpenAPI Schemas
- 👉 Part 7: Efficient Pagination
- 👉 Part 8: Efficient Data Merging
- 👉 Part 9: Optimizing Search
- 👉 Part 10: Implementing Filtering
And some benchmarking stuff:
Investing stuff:
Or tech stuff:
