Flutter性能优化

性能优化是构建高质量Flutter应用的关键环节。本章将详细介绍Flutter应用的各种性能优化策略和技术，包括UI渲染优化、内存管理、网络优化、构建性能等方面。

性能概览

性能指标

在进行性能优化之前，首先需要了解关键的性能指标：

帧率（FPS）：目标为60 FPS（每秒60帧），理想情况下达到90 FPS
帧时间：每帧应在16.6ms内完成（1000ms ÷ 60fps = 16.6ms）
内存使用：避免内存泄漏和过度使用内存
启动时间：应用冷启动和热启动时间
构建时间：Widget构建和重建的频率

性能分析工具

Flutter提供了多种性能分析工具：

Flutter DevTools：全面的性能分析工具
Performance Overlay：实时显示性能指标
Timeline View：查看CPU使用情况
Memory View：监控内存使用

UI渲染优化

避免不必要的重建

dart

import 'package:flutter/material.dart';

// 问题代码：每次重建都会创建新的实例
class BadRebuildExample extends StatefulWidget {
  @override
  _BadRebuildExampleState createState() => _BadRebuildExampleState();
}

class _BadRebuildExampleState extends State<BadRebuildExample> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    print('BadRebuildExample rebuild'); // 每次重建都会打印
    
    return Scaffold(
      appBar: AppBar(title: Text('Bad Rebuild Example')),
      body: Column(
        children: [
          // 问题：每次重建都创建新的Text实例
          Text('Counter: $_counter'),
          // 问题：每次重建都创建新的IconButton实例
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => setState(() => _counter++),
          ),
          // 问题：每次重建都创建新的列表
          ListView.builder(
            shrinkWrap: true,
            itemCount: 100,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
                // 问题：每次都创建新的Widget
                trailing: Container(
                  width: 20,
                  height: 20,
                  color: Colors.blue,
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

// 优化后的代码
class GoodRebuildExample extends StatefulWidget {
  @override
  _GoodRebuildExampleState createState() => _GoodRebuildExampleState();
}

class _GoodRebuildExampleState extends State<GoodRebuildExample> {
  int _counter = 0;
  late final IconButton _addButton; // 使用late final避免重复创建
  late final List<Widget> _items;   // 预先创建列表项

  @override
  void initState() {
    super.initState();
    _addButton = IconButton(
      icon: Icon(Icons.add),
      onPressed: () => setState(() => _counter++),
    );
    
    // 预先创建列表项
    _items = List.generate(100, (index) {
      return KeyedSubtree(
        key: ValueKey(index),
        child: ListTile(
          title: Text('Item $index'),
          trailing: _ColoredBox(), // 使用独立的小部件
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    print('GoodRebuildExample rebuild');
    
    return Scaffold(
      appBar: AppBar(title: Text('Good Rebuild Example')),
      body: Column(
        children: [
          Text('Counter: $_counter'),
          _addButton, // 复用预先创建的实例
          Expanded(
            child: ListView(
              children: _items, // 复用预先创建的列表项
            ),
          ),
        ],
      ),
    );
  }
}

// 独立的小部件避免不必要的重建
class _ColoredBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 20,
      height: 20,
      color: Colors.blue,
    );
  }
}

使用const构造函数

dart

class ConstOptimizationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 使用const构造函数
        title: Text('Const Optimization'),
        // 使用const构造函数
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          // 使用const构造函数
          const Text('This text won\'t rebuild'),
          const Padding(
            padding: EdgeInsets.all(16.0),
            child: const Text('Constant padding'),
          ),
          // 使用const列表
          const Row(
            children: [
              const Icon(Icons.star, color: Colors.yellow),
              const Text('Constant row'),
            ],
          ),
          // 非常量部分
          Builder(
            builder: (context) {
              return Text(DateTime.now().toString()); // 这个会改变
            },
          ),
        ],
      ),
    );
  }
}

class EfficientListView extends StatelessWidget {
  final List<String> items;

  const EfficientListView({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        // 使用const小部件包装不变的部分
        return ListTile(
          leading: const Icon(Icons.list), // const图标
          title: Text(items[index]),       // 只有文本是变量
          trailing: const Icon(Icons.arrow_forward), // const图标
        );
      },
    );
  }
}

使用ListView.builder和IndexedWidgetBuilder

dart

class OptimizedListViewExample extends StatelessWidget {
  final List<String> largeDataSet;

  const OptimizedListViewExample({Key? key, required this.largeDataSet}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Optimized ListView')),
      body: ListView.builder(
        itemCount: largeDataSet.length,
        // 使用itemBuilder而不是children，只构建可见项
        itemBuilder: (BuildContext context, int index) {
          return _ListItem(
            item: largeDataSet[index],
            index: index,
          );
        },
        // 启用缓存以提高滚动性能
        cacheExtent: 1000.0,
      ),
    );
  }
}

class _ListItem extends StatelessWidget {
  final String item;
  final int index;

  const _ListItem({Key? key, required this.item, required this.index}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // 使用UniqueKey确保每个项目有唯一标识
      key: ValueKey(item),
      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Row(
        children: [
          Text('#$index'),
          SizedBox(width: 16),
          Expanded(child: Text(item)),
          Icon(Icons.arrow_forward_ios, size: 16),
        ],
      ),
    );
  }
}

避免深层嵌套

dart

// 问题：过度嵌套的Widget树
class BadNestedStructure extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        child: Container(
          child: Align(
            child: Container(
              child: Center(
                child: Container(
                  child: Padding(
                    child: Container(
                      child: Container(
                        child: Text('Deep nesting example'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// 优化：减少嵌套层级
class GoodNestedStructure extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(16.0),
      child: Text('Optimized structure'),
    );
  }
}

// 使用自定义Widget减少嵌套
class CardWithTitle extends StatelessWidget {
  final String title;
  final Widget child;

  const CardWithTitle({Key? key, required this.title, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            SizedBox(height: 16),
            child,
          ],
        ),
      ),
    );
  }
}

内存管理优化

图片优化

dart

import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';

class ImageOptimizationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Optimization')),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
        ),
        itemCount: 20,
        itemBuilder: (context, index) {
          return CachedNetworkImageCard(imageIndex: index);
        },
      ),
    );
  }
}

class CachedNetworkImageCard extends StatelessWidget {
  final int imageIndex;

  const CachedNetworkImageCard({Key? key, required this.imageIndex}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用缓存的网络图片
    return Card(
      clipBehavior: Clip.hardEdge,
      child: CachedNetworkImage(
        imageUrl: 'https://picsum.photos/300/200?random=$imageIndex',
        // 使用fit属性优化显示
        fit: BoxFit.cover,
        // 设置占位符
        placeholder: (context, url) => Container(
          color: Colors.grey[300],
          child: Center(child: CircularProgressIndicator()),
        ),
        // 设置错误图片
        errorWidget: (context, url, error) => Icon(Icons.error),
        // 设置缓存天数
        cacheManager: CacheManager(
          Config(
            'customCacheKey',
            stalePeriod: Duration(days: 7),
            maxNrOfCacheObjects: 100,
          ),
        ),
      ),
    );
  }
}

// 优化的图片加载器
class OptimizedImageLoader extends StatelessWidget {
  final String imageUrl;
  final double width;
  final double height;

  const OptimizedImageLoader({
    Key? key,
    required this.imageUrl,
    required this.width,
    required this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Image.network(
      imageUrl,
      width: width,
      height: height,
      fit: BoxFit.cover,
      // 缩放图片以适应显示尺寸
      scale: 1.0,
      // 使用低质量解码以节省内存
      filterQuality: FilterQuality.low,
      // 在空闲时间加载图片
      gaplessPlayback: true,
    );
  }
}

使用Slivers优化大列表

dart

class SliverOptimizationExample extends StatelessWidget {
  final List<String> items = List.generate(1000, (i) => 'Item $i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver Optimization'),
              background: Image.network(
                'https://via.placeholder.com/300x200',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(items[index]),
                      subtitle: Text('Subtitle for item $index'),
                    ),
                  );
                },
                childCount: items.length,
              ),
            ),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              childAspectRatio: 1.5,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                if (index < 10) { // 显示前10个作为网格
                  return Container(
                    color: Colors.blue[100 * (index % 9 + 1)],
                    child: Center(
                      child: Text('Grid $index'),
                    ),
                  );
                }
                return null; // 如果超出范围返回null
              },
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }
}

状态管理优化

dart

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 使用Riverpod进行高效的状态管理
final counterProvider = StateProvider<int>((ref) => 0);

class StateManagementOptimization extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('State Management Optimization')),
      body: Column(
        children: [
          // 只有计数器值改变时才重建此部分
          Text('Counter: ${counter.state}'),
          ElevatedButton(
            onPressed: () => ref.read(counterProvider.notifier).state++,
            child: Text('Increment'),
          ),
          // 使用Selector只监听特定状态
          Selector(
            selector: (MyState state) => state.userData,
            builder: (context, userData, child) {
              return Text('User: ${userData.name}');
            },
          ),
        ],
      ),
    );
  }
}

// 自定义状态类
class MyState {
  final UserData userData;
  final List<Item> items;

  MyState({required this.userData, required this.items});
}

class UserData {
  final String name;
  final String email;

  UserData({required this.name, required this.email});
}

class Item {
  final String id;
  final String name;

  Item({required this.id, required this.name});
}

构建性能优化

dart

import 'package:flutter/rendering.dart';

class PerformanceOverlayExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 启用性能叠加层
    return RepaintBoundary(
      child: MaterialApp(
        title: 'Performance Overlay Example',
        debugShowCheckedModeBanner: false,
        // 显示性能统计
        showPerformanceOverlay: true,
        home: Scaffold(
          appBar: AppBar(title: Text('Performance Overlay')),
          body: ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return RepaintBoundary(
                child: ListTile(
                  title: Text('Item $index'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

dart

class PrebuiltWidgetExample extends StatefulWidget {
  @override
  _PrebuiltWidgetExampleState createState() => _PrebuiltWidgetExampleState();
}

class _PrebuiltWidgetExampleState extends State<PrebuiltWidgetExample> {
  // 预构建复杂的Widget树
  final Map<int, Widget> _prebuiltWidgets = {};

  @override
  void initState() {
    super.initState();
    _prebuildWidgets();
  }

  void _prebuildWidgets() {
    for (int i = 0; i < 100; i++) {
      _prebuiltWidgets[i] = _buildComplexWidget(i);
    }
  }

  Widget _buildComplexWidget(int index) {
    // 预构建复杂的Widget树
    return Container(
      key: ValueKey('complex_$index'),
      padding: EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Complex Widget $index', style: TextStyle(fontWeight: FontWeight.bold)),
          SizedBox(height: 8),
          Row(
            children: [
              Container(width: 20, height: 20, color: Colors.red),
              SizedBox(width: 8),
              Container(width: 20, height: 20, color: Colors.green),
              SizedBox(width: 8),
              Container(width: 20, height: 20, color: Colors.blue),
            ],
          ),
          SizedBox(height: 8),
          Text('Description for item $index'),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Prebuilt Widgets')),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          // 直接使用预构建的Widget
          return AnimatedSwitcher(
            duration: Duration(milliseconds: 300),
            child: _prebuiltWidgets[index],
          );
        },
      ),
    );
  }
}

动画性能优化

使用AnimatedBuilder优化动画

dart

class AnimationOptimizationExample extends StatefulWidget {
  @override
  _AnimationOptimizationExampleState createState() => _AnimationOptimizationExampleState();
}

class _AnimationOptimizationExampleState extends State<AnimationOptimizationExample>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(
      begin: 0,
      end: 300,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animation Optimization')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用AnimatedBuilder避免不必要的重建
            AnimatedBuilder(
              animation: _animation,
              builder: (context, child) {
                return Container(
                  width: _animation.value,
                  height: _animation.value,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Animated Box',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                );
              },
            ),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () {
                if (_controller.isAnimating) {
                  _controller.stop();
                } else if (_controller.status == AnimationStatus.completed) {
                  _controller.reverse();
                } else {
                  _controller.forward();
                }
              },
              child: Text('Animate'),
            ),
          ],
        ),
      ),
    );
  }
}

// 使用Hero动画优化页面切换
class HeroAnimationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hero Animation')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailScreen()),
            );
          },
          child: Hero(
            tag: 'hero_tag',
            child: Container(
              width: 200,
              height: 200,
              color: Colors.green,
              child: Center(
                child: Text(
                  'Tap me!',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Hero(
          tag: 'hero_tag',
          child: Container(
            width: 300,
            height: 300,
            color: Colors.green,
            child: Center(
              child: Text(
                'Detail Content',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

网络性能优化

实现请求缓存

dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class CachedNetworkService {
  static const String _cachePrefix = 'api_cache_';
  static const Duration _cacheDuration = Duration(hours: 1);

  Future<Map<String, dynamic>?> getCachedData(String endpoint) async {
    final prefs = await SharedPreferences.getInstance();
    final cacheKey = '$_cachePrefix$endpoint';
    
    // 检查缓存是否存在且未过期
    final cachedData = prefs.getString(cacheKey);
    final cachedTime = prefs.getInt('${cacheKey}_time');
    
    if (cachedData != null && cachedTime != null) {
      final cacheTime = DateTime.fromMillisecondsSinceEpoch(cachedTime);
      if (DateTime.now().difference(cacheTime) < _cacheDuration) {
        // 返回缓存数据
        return Map<String, dynamic>.from(json.decode(cachedData));
      } else {
        // 清除过期缓存
        await prefs.remove(cacheKey);
        await prefs.remove('${cacheKey}_time');
      }
    }

    // 发起网络请求
    try {
      final response = await http.get(
        Uri.parse('https://jsonplaceholder.typicode.com$endpoint'),
        headers: {'Content-Type': 'application/json'},
      );

      if (response.statusCode == 200) {
        final data = json.decode(response.body) as Map<String, dynamic>;
        
        // 存储到缓存
        await prefs.setString(cacheKey, json.encode(data));
        await prefs.setInt('${cacheKey}_time', DateTime.now().millisecondsSinceEpoch);
        
        return data;
      }
    } catch (e) {
      print('Network request failed: $e');
    }

    return null;
  }

  Future<void> clearCache() async {
    final prefs = await SharedPreferences.getInstance();
    final keys = prefs.getKeys();
    
    for (final key in keys) {
      if (key.startsWith(_cachePrefix)) {
        await prefs.remove(key);
      }
    }
  }
}

启动性能优化

优化应用启动时间

dart

import 'dart:ui' as ui;

// 主函数优化
void main() async {
  // 在应用启动前执行必要的初始化
  WidgetsFlutterBinding.ensureInitialized();
  
  // 预加载必要的资源
  await _precacheAssets();
  
  // 运行应用
  runApp(MyApp());
}

Future<void> _precacheAssets() async {
  final List<Future> futures = [];
  
  // 预加载常用的图片资源
  // final image1 = precacheImage(AssetImage('assets/images/logo.png'), context);
  // final image2 = precacheImage(AssetImage('assets/images/background.jpg'), context);
  // futures.addAll([image1, image2]);
  
  // 等待所有资源加载完成
  await Future.wait(futures, eagerError: true);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Performance Optimized App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // 使用builder来延迟构建主题相关的资源
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          },
        ),
      ),
      home: SplashScreen(), // 启动屏优化
    );
  }
}

// 启动屏优化
class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // 延迟加载主页面
    Future.microtask(() {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => HomePage()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.blue, Colors.purple],
          ),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.android,
                size: 100,
                color: Colors.white,
              ),
              SizedBox(height: 24),
              Text(
                'Loading...',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

性能监控和调试

自定义性能监控

dart

import 'dart:developer';

class PerformanceMonitor {
  static void measureFunction(String name, Function function) {
    final stopwatch = Stopwatch()..start();
    function();
    stopwatch.stop();
    
    final elapsedMs = stopwatch.elapsedMilliseconds;
    if (elapsedMs > 16) { // 超过一帧的时间
      log('PERFORMANCE WARNING: $name took ${elapsedMs}ms', level: 900);
    } else {
      log('PERFORMANCE: $name took ${elapsedMs}ms');
    }
  }

  static void measureWidgetBuild(String widgetName, Widget Function() builder) {
    final stopwatch = Stopwatch()..start();
    final widget = builder();
    stopwatch.stop();
    
    final elapsedMs = stopwatch.elapsedMicroseconds / 1000; // 转换为毫秒
    if (elapsedMs > 16) {
      log('WIDGET BUILD WARNING: $widgetName took ${elapsedMs}ms to build', level: 900);
    }
    
    return widget;
  }
}

// 使用性能监控的示例
class MonitoredWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PerformanceMonitor.measureWidgetBuild('MonitoredWidget', () {
      return Container(
        child: Column(
          children: List.generate(100, (index) {
            return Text('Item $index');
          }),
        ),
      );
    });
  }
}

使用Flutter DevTools

bash

# 启动Flutter应用并连接DevTools
flutter run --enable-software-rendering
# 然后在浏览器中打开DevTools
# 或者使用命令行
flutter pub global activate devtools
flutter pub global run devtools

常见性能问题及解决方案

1. 帧率下降

dart

// 问题：复杂的绘制操作导致帧率下降
class BadPaintingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _ComplexPainter(),
      child: Container(),
    );
  }
}

class _ComplexPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 复杂的绘制操作，可能导致性能问题
    for (int i = 0; i < 1000; i++) {
      canvas.drawCircle(
        Offset(i.toDouble(), i.toDouble()),
        10,
        Paint()..color = Colors.blue,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

// 解决方案：优化绘制操作
class GoodPaintingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary( // 使用RepaintBoundary隔离重绘区域
      child: CustomPaint(
        painter: _OptimizedPainter(),
        child: Container(),
      ),
    );
  }
}

class _OptimizedPainter extends CustomPainter {
  final Paint _paint = Paint()..color = Colors.blue;

  @override
  void paint(Canvas canvas, Size size) {
    // 优化后的绘制操作
    canvas.save();
    for (int i = 0; i < 100; i++) {
      canvas.drawCircle(
        Offset(i * 10.0, i * 5.0),
        5,
        _paint,
      );
    }
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant _OptimizedPainter oldDelegate) => false;
}

2. 内存泄漏

dart

class MemoryLeakExample extends StatefulWidget {
  @override
  _MemoryLeakExampleState createState() => _MemoryLeakExampleState();
}

class _MemoryLeakExampleState extends State<MemoryLeakExample> {
  Timer? _timer; // 潜在的内存泄漏源
  StreamSubscription? _subscription; // 潜在的内存泄漏源

  @override
  void initState() {
    super.initState();
    
    // 问题：没有在dispose中清理Timer
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {}); // 更新状态
    });
    
    // 问题：没有在dispose中清理StreamSubscription
    _subscription = Stream.periodic(Duration(seconds: 1)).listen((event) {
      print('Event: $event');
    });
  }

  @override
  void dispose() {
    // 解决方案：正确清理资源
    _timer?.cancel();
    _subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

性能优化清单

开发阶段检查清单

[ ] 使用const构造函数尽可能多的地方
[ ] 避免在build方法中创建对象
[ ] 使用ListView.builder而不是ListView(children: [...])
[ ] 实现适当的状态管理
[ ] 使用RepaintBoundary隔离重绘区域
[ ] 优化图片加载和缓存
[ ] 避免深层Widget嵌套
[ ] 正确处理资源释放（Timer、Stream等）

发布前检查清单

[ ] 启用Flutter的发布模式构建
[ ] 分析并修复性能瓶颈
[ ] 优化应用包大小
[ ] 测试不同设备上的性能
[ ] 验证内存使用情况
[ ] 检查启动时间
[ ] 运行性能测试

性能测试

编写性能测试

dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('Measure widget build performance', (WidgetTester tester) async {
    final stopwatch = Stopwatch()..start();

    await tester.pumpWidget(
      MaterialApp(
        home: ListView.builder(
          itemCount: 1000,
          itemBuilder: (context, index) => ListTile(
            title: Text('Item $index'),
          ),
        ),
      ),
    );

    stopwatch.stop();
    print('Build time: ${stopwatch.elapsedMilliseconds}ms');
    
    // 验证构建时间在可接受范围内
    expect(stopwatch.elapsedMilliseconds, lessThan(100));
  });

  test('Measure algorithm performance', () {
    final stopwatch = Stopwatch()..start();
    
    // 测试算法性能
    final result = List.generate(10000, (index) => index)
        .map((e) => e * 2)
        .where((element) => element.isEven)
        .toList();
    
    stopwatch.stop();
    print('Algorithm time: ${stopwatch.elapsedMilliseconds}ms');
    
    expect(stopwatch.elapsedMilliseconds, lessThan(50));
    expect(result.length, equals(10000));
  });
}

总结

Flutter性能优化是一个持续的过程，需要关注多个方面：

UI渲染优化：避免不必要的重建，使用const构造函数
内存管理：优化图片加载，避免内存泄漏
构建性能：使用高效的Widget构建策略
动画优化：使用适当的动画技术
网络优化：实现缓存和请求优化
启动优化：减少应用启动时间
监控调试：使用工具持续监控性能

通过系统的性能优化，可以显著提升Flutter应用的用户体验和稳定性。

Flutter性能优化

性能概览

性能指标

性能分析工具

UI渲染优化

避免不必要的重建

使用const构造函数

使用ListView.builder和IndexedWidgetBuilder

避免深层嵌套

内存管理优化

图片优化

使用Slivers优化大列表

状态管理优化

构建性能优化

使用Widget性能分析

预构建复杂Widget

动画性能优化

使用AnimatedBuilder优化动画

网络性能优化

实现请求缓存

启动性能优化

优化应用启动时间

性能监控和调试

自定义性能监控

使用Flutter DevTools

常见性能问题及解决方案

1. 帧率下降

2. 内存泄漏

性能优化清单

开发阶段检查清单

发布前检查清单

性能测试

编写性能测试

总结

Flutter性能优化 #

性能概览 #

性能指标 #

性能分析工具 #

UI渲染优化 #

避免不必要的重建 #

使用const构造函数 #

使用ListView.builder和IndexedWidgetBuilder #

避免深层嵌套 #

内存管理优化 #

图片优化 #

使用Slivers优化大列表 #

状态管理优化 #

构建性能优化 #

使用Widget性能分析 #

预构建复杂Widget #

动画性能优化 #

使用AnimatedBuilder优化动画 #

网络性能优化 #

实现请求缓存 #

启动性能优化 #

优化应用启动时间 #

性能监控和调试 #

自定义性能监控 #

使用Flutter DevTools #

常见性能问题及解决方案 #

1. 帧率下降 #

2. 内存泄漏 #

性能优化清单 #

开发阶段检查清单 #

发布前检查清单 #

性能测试 #

编写性能测试 #

总结 #

Flutter性能优化

性能概览

性能指标

性能分析工具

UI渲染优化

避免不必要的重建

使用const构造函数

使用ListView.builder和IndexedWidgetBuilder

避免深层嵌套

内存管理优化

图片优化

使用Slivers优化大列表

状态管理优化

构建性能优化

使用Widget性能分析

预构建复杂Widget

动画性能优化

使用AnimatedBuilder优化动画

网络性能优化

实现请求缓存

启动性能优化

优化应用启动时间

性能监控和调试

自定义性能监控

使用Flutter DevTools

常见性能问题及解决方案

1. 帧率下降

2. 内存泄漏

性能优化清单

开发阶段检查清单

发布前检查清单

性能测试

编写性能测试

总结