Flutterexperts

Empowering Vision with FlutterExperts' Expertise
Exploring Flutter 3.27.1 — What’s New In Flutter

Flutter continues to evolve, providing developers with robust tools for building beautiful, cross-platform apps. Version 3.27.1 is no exception, introducing enhancements across widgets, frameworks, engines, and tools and adding new features to simplify development and improve app performance.

In this blog, we’ll explore all the updates in Flutter 3.27.1 with examples, detailed explanations, and tips for developers to make the most of this release.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.


Table of Contents

Performance Improvements

Framework Enhancements

Cupertino Widget Updates

Material Design Updates

Engine Updates

iOS Rendering Improvements

Web Performance and Accessibility Enhancements

Swift Package Manager for iOS

Conclusion

Reference


Performance Improvements

Performance is a cornerstone of Flutter’s success, and Flutter 3.27.1 pushes this further with substantial optimizations.

Reduced Jank in Widget Rebuilds

Flutter 3.27.1 fine-tunes the widget rebuilding process, particularly for complex widget trees. The framework minimizes frame drops and ensures smoother rendering by improving the internal diffing algorithm.

Key Changes
  • Optimized State Management: Enhanced rebuild logic for stateful widgets.
  • Garbage Collection: Improved memory management during widget disposal.
Improved Hot Reload and Restart

Hot reload is now faster, even in large codebases, saving valuable development time.

What’s Improved?
  • Reduced latency during stateful widget hot reloads.
  • Fixed scenarios where hot reload would not apply changes to deeply nested widgets.

Framework Enhancements

Row and Column Spacing

Managing spacing between child widgets in Row and Column is now simpler with the addition of the spacing property. This eliminates the need for additional widgets like SizedBox.

Row(
spacing: 12, // Adds uniform spacing between children
children: [
Icon(Icons.home),
Icon(Icons.favorite),
Icon(Icons.settings)
]
);

Column(
spacing: 22, // Adds uniform spacing between children
children: [
Icon(Icons.home),
Icon(Icons.favorite),
Icon(Icons.settings)
]
);

Key Benefits:

  • Cleaner widget hierarchies.
  • Improved readability and maintainability.
Text Selection Improvements

Flutter’s SelectionArea has seen significant enhancements, especially for desktop platforms (Linux, macOS, and Windows), where the Shift + Click gesture now works to extend or move the text selection extent to the clicked position.

 SelectableText(
'This is a selectable text. Use your mouse or touch to select.',
showCursor: true,
cursorWidth: 2.0,
cursorColor: Colors.blue,
style: TextStyle(fontSize: 18, color: Colors.black),
onSelectionChanged:
(TextSelection selection, SelectionChangedCause? cause)
{
print('Selection changed: $selection');
},
),

Additionally:

  • You can now clear the selection in a SelectionArea or SelectableRegion using the clearSelection method on the SelectableRegionState.
  • SelectableRegionState can be accessed via a SelectionArea using a GlobalKey, allowing developers more flexibility in managing selections.

Improvements in RenderParagraph

The issues with RenderParagraph that previously caused selection failures (e.g., resizing the window or clicking outside the text) have been resolved. These fixes ensure text selections under SelectionArea or SelectableRegion remain consistent even after UI changes.

Mixing Route Transitions

Transitioning between pages with distinct animations is now more flexible. ModalRoutes can now share exit and entrance transition builders to ensure seamless synchronization.

Code Example: Mixing Slide and Fade Transitions

PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NextPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
final slideTransition = SlideTransition(
position: Tween<Offset>(
begin: Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
);

final fadeTransition = FadeTransition(
opacity: animation,
child: slideTransition,
);

return fadeTransition;
},
);

Cupertino Widget Updates

CupertinoCheckbox and CupertinoRadio

New Cupertino-styled components, CupertinoCheckbox and CupertinoRadio, have been introduced to align iOS applications with native design guidelines.

Code Example: CupertinoCheckbox

CupertinoCheckbox(
value: true,
onChanged: (bool? newValue) {
print('Checkbox clicked');
},
mouseCursor: SystemMouseCursors.click,
semanticLabel: 'Enable notifications',
fillColor: CupertinoColors.activeGreen,
)

Code Example: CupertinoRadio

CupertinoRadio<String>(
value: 'option1',
groupValue: selectedOption,
onChanged: (String? newValue) {
setState(() {
selectedOption = newValue;
});
},
)
CupertinoSlidingSegmentedControl

This widget now offers extended customization options for better adaptability to various use cases.

Code Example: Sliding Segmented Control

CupertinoSlidingSegmentedControl<int>(
groupValue: selectedSegment,
children: {
0: Text('Option A'),
1: Text('Option B'),
2: Text('Option C'),
},
onValueChanged: (int? value) {
print('Selected: $value');
setState(() {
selectedSegment = newValue;
});
},
);

Material Design Updates

Normalizing Material Theming

Flutter has refactored CardTheme, DialogTheme, and TabBarTheme to align them with its component theming conventions. Newly added CardThemeData, DialogThemeData, and TabBarThemeData provide improved control over theme customization.

Code Example: CardTheme Customization

ThemeData theme = ThemeData(
cardTheme: CardTheme(
elevation: 4,
color: Colors.blueGrey.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
dialogTheme: DialogTheme(
backgroundColor: Colors.white,
titleTextStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
),
tabBarTheme: TabBarTheme(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey.shade100,
indicator: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
),
);

MaterialApp(
theme: theme,
home: Scaffold(
body: Center(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Text('Refactored CardTheme'),
),
),
),
),
);
CarouselView.weighted: Dynamic Layouts in Carousels

Flutter 3.27.1 introduces the CarouselView.weighted feature, allowing developers to create dynamic and visually appealing carousel layouts. With this update, you can customize the relative space that each item occupies within a carousel by configuring the flexWeights parameter in the constructor.

This feature is particularly useful for designing multi-browse, hero, and centered-hero layouts, making carousels more engaging and functional for end users.

Flexible Layouts with flexWeights
  • Multi-Browse Layout: Use weights like [3, 2, 1] to create a cascading view.
  • Hero Layout: Highlight a prominent item using weights like [7, 1].
  • Centered-Hero Layout: Focus on the central item with balanced surrounding elements using [1, 7, 1].

Code Example: Multi-Browse Layout

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('CarouselView.weighted Example')),
body: Center(
child: CarouselView.weighted(
flexWeights: [3, 2, 1],
itemBuilder: (context, index) {
return Container(
color: Colors.primaries[index % Colors.primaries.length],
child: Center(
child: Text(
'Item $index',
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
);
},
itemCount: 6,
),
),
),
);
}
}

Engine Updates

Impeller as the Default Rendering Engine on Android

The Impeller rendering engine is now the default on modern Android devices, replacing Skia for devices supporting Vulkan. Impeller delivers improved performance and fidelity, addressing user feedback since its introduction in the Flutter 3.16 stable release.

For devices without Vulkan or older Android versions, Skia will remain the fallback renderer. Developers can opt out of Impeller by adding the following metadata to their AndroidManifest.xml:

<meta-data
android:name="io.flutter.embedding.android.EnableImpeller"
android:value="false" />

Flutter is also working towards making Impeller’s OpenGL backend production-ready, eliminating the need for a Skia fallback. Developers are encouraged to provide feedback, especially with detailed device and Android version information, to help refine Impeller.


iOS Rendering Improvements

A new Metal rendering surface enhances frame rendering consistency on iOS. This update reduces frame delays caused by compositor backpressure, allowing smoother animations and more stable frame rates, particularly on high refresh rate devices (120Hz). Benchmarks show significantly reduced rasterization times, resulting in a more polished user experience.


Web Performance and Accessibility Enhancements

Flutter web sees significant performance and accessibility upgrades in this release:

  1. Optimized Image Decoding: Static images in Safari and Firefox now use native <img> elements, reducing jank and memory usage.
  2. Improved Platform Views: Canvas overlays were reduced for more efficient rendering.
  3. WASM Compatibility: All Flutter team-developed plugins are now fully WebAssembly-compatible.
  4. Accessibility Fixes: Enhancements for headings, dialogs, links, and scrollables improve user experience across devices.
  5. Bug Fixes: Resolved rendering issues with CanvasKit and Skwasm, including better memory management for Paint objects and improved clipping.

Swift Package Manager for iOS

Flutter has made strides in simplifying plugin management on iOS by integrating Swift Package Manager (SPM). This migration offers:

  1. Access to the Swift Ecosystem: Leverage Swift packages in your Flutter plugins.
  2. Simplified Installation: SPM eliminates the need for Ruby and CocoaPods, making it easier to set up Flutter for Apple platforms.

SPM support is now available in Flutter’s beta and stable channels but remains off by default. Plugin authors are encouraged to migrate to SPM to future-proof their packages. Popular plugins like Firebase and others have already made the switch. Furthermore, pub.dev now includes SPM compatibility checks in package scoring.


Conclusion

Flutter 3.27.1 is a feature-packed release that enhances Cupertino and Material widgets, improves rendering engines, and adds valuable developer tools. Whether you’re developing for iOS, Android, or the web, this version empowers you to create polished, high-performance apps with ease.

What features are you most excited about? Share your thoughts in the comments!

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.


Reference

Flutter 3.27.0 release notes
Release notes for Flutter 3.27.0.docs.flutter.dev


Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on FacebookGitHubTwitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.


Leave comment

Your email address will not be published. Required fields are marked with *.