Introduction to Flutter 3.24

Flutter 3.24 brings significant improvements to the framework, focusing on performance, developer experience, and platform capabilities. This release includes new widgets, enhanced web support, and better tooling.

Let's explore the most important updates and how to leverage them in your Flutter applications.

New Widgets and Components

Flutter 3.24 introduces several new widgets that make building beautiful UIs easier than ever.

// New AdaptiveScaffold widget
import 'package:flutter/material.dart';

class AdaptiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AdaptiveScaffold(
      destinations: [
        AdaptiveScaffoldDestination(
          icon: Icons.home,
          title: 'Home',
        ),
        AdaptiveScaffoldDestination(
          icon: Icons.search,
          title: 'Search',
        ),
        AdaptiveScaffoldDestination(
          icon: Icons.person,
          title: 'Profile',
        ),
      ],
      body: (_) => Center(child: Text('Content')),
    );
  }
}

// New Material 3 components
MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Colors.blue,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Material 3'),
    ),
    body: Column(
      children: [
        // New filled button
        FilledButton(
          onPressed: () {},
          child: Text('Filled Button'),
        ),
        
        // New tonal button
        FilledButton.tonal(
          onPressed: () {},
          child: Text('Tonal Button'),
        ),
        
        // New outlined button
        OutlinedButton(
          onPressed: () {},
          child: Text('Outlined Button'),
        ),
        
        // New text button
        TextButton(
          onPressed: () {},
          child: Text('Text Button'),
        ),
      ],
    ),
  ),
)

// New SegmentedButton widget
SegmentedButton(
  segments: [
    ButtonSegment(
      value: 'day',
      label: Text('Day'),
      icon: Icon(Icons.wb_sunny),
    ),
    ButtonSegment(
      value: 'week',
      label: Text('Week'),
      icon: Icon(Icons.calendar_view_week),
    ),
    ButtonSegment(
      value: 'month',
      label: Text('Month'),
      icon: Icon(Icons.calendar_month),
    ),
  ],
  selected: {'day'},
  onSelectionChanged: (Set<String> newSelection) {
    print('Selected: $newSelection');
  },
)}

Performance Improvements

Significant performance enhancements across the framework for smoother animations and faster rendering.

// Improved Impeller rendering engine
// Enabled by default in Flutter 3.24

// Performance optimizations
class OptimizedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: CustomPaint(
        painter: MyCustomPainter(),
        child: Container(),
      ),
    );
  }
}

// Lazy loading with ListView.builder
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
  cacheExtent: 500, // Improved caching
)

// Optimized animations
AnimatedBuilder(
  animation: controller,
  builder: (context, child) {
    return Transform.rotate(
      angle: controller.value * 2 * pi,
      child: child,
    );
  },
  child: FlutterLogo(),
)

// Improved image loading
Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  ),
)}

Enhanced Web Support

Flutter web receives significant improvements with better performance and new web-specific features.

// Web-specific configurations
// web/index.html
<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flutter Web App</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter_bootstrap.js" async></script>
</body>
</html>

// PWA configuration
// web/manifest.json
{
  "name": "Flutter Web App",
  "short_name": "Flutter App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0175C2",
  "icons": [
    {
      "src": "icons/Icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/Icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

// Web-specific code
import 'dart:html' as html;

if (kIsWeb) {
  // Access web APIs
  final url = html.window.location.href;
  html.window.history.pushState(null, '', '/new-route');
  
  // Local storage
  final storage = html.window.localStorage;
  storage.setItem('key', 'value');
}

// Responsive web design
class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 1200) {
          return DesktopLayout();
        } else if (constraints.maxWidth > 600) {
          return TabletLayout();
        } else {
          return MobileLayout();
        }
      },
    );
  }
}

New Platform Features

Enhanced platform integration with new APIs and better platform-specific features.

// Platform-specific code
import 'dart:io' show Platform;

class PlatformFeatures extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (Platform.isAndroid) {
      return AndroidFeatures();
    } else if (Platform.isIOS) {
      return IOSFeatures();
    } else if (Platform.isWindows) {
      return WindowsFeatures();
    } else if (Platform.isMacOS) {
      return MacOSFeatures();
    } else if (Platform.isLinux) {
      return LinuxFeatures();
    }
    return WebFeatures();
  }
}

// New platform channels
import 'package:flutter/services.dart';

class NativeBridge {
  static const platform = MethodChannel('com.example.app/native');

  static Future<String> getNativeData() async {
    try {
      final String result = await platform.invokeMethod('getData');
      return result;
    } on PlatformException catch (e) {
      return 'Failed: ${e.message}';
    }
  }

  static Future<void> sendToNative(String data) async {
    try {
      await platform.invokeMethod('sendData', {'data': data});
    } on PlatformException catch (e) {
      print('Error: ${e.message}');
    }
  }
}

// Background processing
import 'package:workmanager/workmanager.dart';

void callbackDispatcher() {
  Workmanager().executeTask((task, inputData) {
    print('Task executed: $task');
    return Future.value(true);
  });
}

// Initialize background tasks
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Workmanager().initialize(callbackDispatcher);
  runApp(MyApp());
}

Improved Developer Tooling

Better development tools with enhanced debugging, testing, and hot reload capabilities.

// Enhanced DevTools
// Run: flutter pub global activate devtools
// Run: flutter pub global run devtools

// Improved hot reload
// Automatic hot reload on save
// Hot restart for state changes
// Hot reload for UI changes

// Enhanced testing
// test/widget_test.dart
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('MyWidget has a title', (tester) async {
    await tester.pumpWidget(MyWidget());
    expect(find.text('Hello'), findsOneWidget);
  });

  testWidgets('Button tap triggers action', (tester) async {
    bool tapped = false;
    await tester.pumpWidget(
      MaterialApp(
        home: ElevatedButton(
          onPressed: () => tapped = true,
          child: Text('Tap me'),
        ),
      ),
    );
    
    await tester.tap(find.text('Tap me'));
    await tester.pump();
    
    expect(tapped, true);
  });
}

// Integration testing
// integration_test/app_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  
  testWidgets('end-to-end test', (tester) async {
    await tester.pumpWidget(MyApp());
    
    await tester.enterText(find.byType(TextField), 'Hello');
    await tester.tap(find.text('Submit'));
    await tester.pumpAndSettle();
    
    expect(find.text('Success'), findsOneWidget);
  });
}

// Performance profiling
// Run: flutter run --profile
// Use DevTools to analyze performance
// Check frame rendering times
// Monitor memory usage}

Material 3 Design System

Complete Material 3 implementation with updated components and design tokens.

// Material 3 theme configuration
MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
    fontFamily: 'Roboto',
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark,
    ),
    fontFamily: 'Roboto',
  ),
  themeMode: ThemeMode.system,
  home: MyHomePage(),
)

// Material 3 components
Card(
  elevation: 0,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        ListTile(
          leading: Icon(Icons.account_circle),
          title: Text('User Profile'),
          subtitle: Text('View and edit your profile'),
          trailing: Icon(Icons.chevron_right),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
          subtitle: Text('App preferences'),
          trailing: Icon(Icons.chevron_right),
        ),
      ],
    ),
  ),
)

// Navigation rail and drawer
NavigationRail(
  destinations: [
    NavigationRailDestination(
      icon: Icon(Icons.home),
      selectedIcon: Icon(Icons.home_filled),
      label: Text('Home'),
    ),
    NavigationRailDestination(
      icon: Icon(Icons.search),
      selectedIcon: Icon(Icons.search),
      label: Text('Search'),
    ),
  ],
  selectedIndex: 0,
  onDestinationSelected: (index) {
    print('Selected: $index');
  },
)}

Flutter 3.24 Best Practices

Performance

• Use const constructors
• Implement lazy loading
• Optimize widget rebuilds
• Use RepaintBoundary wisely

Architecture

• Follow BLoC pattern
• Use dependency injection
• Separate UI from logic
• Implement clean architecture

Testing

• Write unit tests
• Implement widget tests
• Add integration tests
• Test platform-specific code

Platform

• Test on all platforms
• Handle platform differences
• Use platform channels
• Optimize for each platform

Conclusion

Flutter 3.24 brings significant improvements across the board, from new widgets and Material 3 support to enhanced performance and better web capabilities. These updates make Flutter an even more powerful framework for cross-platform development.

Start exploring these new features in your projects and leverage them to build better, faster, and more beautiful applications.

Ready to Build with Flutter 3.24?

Explore more Flutter tutorials and start building amazing cross-platform apps!

Flutter 3.24 Updates 2026: What's New in Flutter