flutter性能优化大全

移动开发 2023-09-06 21:16:21 阅读次数: 0

Flutter是一款高性能、高质量的移动开发框架，但在实际开发中，为了保证应用的流畅性和响应速度，仍然需要进行一些性能优化。下面是一些常见的Flutter性能优化技巧：

  1. 减少Widget重建：Widget重建是Flutter应用中的一个常见性能问题，因为它会导致不必要的渲染和绘制。减少Widget重建的方法包括使用const构造函数、使用Key标识Widget、使用StatefulWidget等。
  2. 避免过多的UI重绘：避免过多的UI重绘可以提高应用的性能。可以使用shouldRepaint方法来判断是否需要重绘。
  3. 优化图片加载：在Flutter中，图片加载是一个常见的性能问题。可以使用缓存或预加载技术来优化图片加载，以减少不必要的网络请求。
  4. 避免过多的网络请求：过多的网络请求会导致应用响应速度变慢。可以使用缓存或者减少请求次数的方法来减少网络请求，从而提高应用的性能。
  5. 优化布局：布局是应用性能的重要因素之一。可以使用Flex布局或者使用CustomMultiChildLayout等方法来优化布局，以提高应用的性能。
  6. 使用异步操作：在应用中使用异步操作可以避免UI卡顿的问题。可以使用Future、Stream等异步操作来优化应用的性能。
  7. 避免过多的内存使用：过多的内存使用会导致应用响应速度变慢。可以使用Flutter自带的内存分析工具来查找内存泄漏问题，从而避免过多的内存使用。
  8. 使用热重载：热重载是Flutter的一个重要特性，它可以快速预览和调试应用。使用热重载可以提高开发效率，从而加速应用的开发过程。

Flutter的性能优化技巧包括减少Widget重建、避免过多的UI重绘、优化图片加载、避免过多的网络请求、优化布局、使用异步操作、避免过多的内存使用、使用热重载等。需要根据实际应用场景进行选择和应用。

减少Widget重建

减少Widget重建是Flutter中的一个重要性能优化技巧，以下是一些例子：

  1. 使用const构造函数创建常量Widget：
class MyWidget extends StatelessWidget {
  final String text;
  const MyWidget({Key key, this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

在上面的例子中，使用了const构造函数来创建常量Widget，这样可以避免不必要的Widget重建。

  1. 使用Key标识Widget：
class MyWidget extends StatelessWidget {
  final String text;
  const MyWidget({Key key, this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text(text, key: key);
  }
}

使用Key标识Widget，这样可以避免在Widget重建时被误认为是不同的Widget。

  1. 使用StatefulWidget管理状态：
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Text('Count: $_count');
  }
}

使用StatefulWidget来管理计数器的状态，这样可以避免整个Widget重建。

  1. 使用Builder构建子Widget：
class MyWidget extends StatelessWidget {
  final int count;
  const MyWidget({Key key, this.count}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) {
      return Text('Count: $count');
    });
  }
}

使用Builder构建子Widget，这样可以避免整个Widget重建。

减少Widget重建是Flutter中的一个重要性能优化技巧，可以通过使用const构造函数、Key标识Widget、StatefulWidget、Builder等方法来实现。需要根据实际应用场景进行选择和应用。

避免过多的UI重绘

避免过多的UI重绘是Flutter中的一个重要性能优化技巧，以下是一些常用的优化例子：

  1. 使用shouldRepaint方法：
class MyPainter extends CustomPainter {
  int count;
  MyPainter(this.count);
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制操作
  }
  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    return count != oldDelegate.count;
  }
}

使用shouldRepaint方法来判断是否需要重绘。当count发生变化时，重绘Canvas。

  1. 使用ClipRect避免不必要的绘制：
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

使用ClipRect来限制Container的绘制范围，以避免不必要的绘制。

  1. 使用Offstage避免不必要的布局计算：
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton(
          child: Text(_visible ? 'Hide' : 'Show'),
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
        ),
        Offstage(
          offstage: !_visible,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}

使用Offstage来避免当Container不可见时的布局计算。

  1. 使用RepaintBoundary避免重复绘制：
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: Container(
        width: 100,
        height: 100,
        child: CustomPaint(
          painter: MyPainter(),
        ),
      ),
    );
  }
}

使用RepaintBoundary来避免重复绘制相同的CustomPaint。

避免过多的UI重绘是Flutter中的一个重要性能优化技巧，可以通过使用shouldRepaint方法、ClipRect、Offstage、RepaintBoundary等方法来实现。

优化图片加载

优化图片加载是Flutter中的一个重要性能优化技巧，以下是一些常用的优化方案：

  1. 使用缓存技术：

Flutter中提供了ImageCache类来实现图片缓存，当图片被加载后，会将图片缓存到内存中，下次再次加载同样的图片时，就可以直接从缓存中获取，避免了不必要的网络请求。使用ImageCache类可以通过以下代码实现：

ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.maximumSize = 100; // 设置缓存的最大大小
  1. 预加载图片：

对于一些常用的图片，可以在应用启动时预加载，这样可以避免在使用时才进行加载，从而提高应用的响应速度。可以通过以下代码实现：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    precacheImage(NetworkImage('https://example.com/my-image.jpg'), context);
    return MaterialApp(
      // ...
    );
  }
}
  1. 压缩图片：

对于一些较大的图片，可以使用压缩技术来减少图片大小，从而减少网络传输时间。可以使用dart-image库来实现图片压缩，例如：

import 'package:image/image.dart' as img;
import 'dart:io';
File compressedImage(File imageFile) {
  img.Image image = img.decodeImage(imageFile.readAsBytesSync());
  img.Image smallerImage = img.copyResize(image, width: 800, height: 600);
  return File(imageFile.path)
    ..writeAsBytesSync(img.encodeJpg(smallerImage, quality: 70));
}
  1. 使用占位图：

对于一些网络加载较慢的图片，可以使用占位图来填充，以提高用户体验。可以使用Flutter自带的FadeInImage组件来实现占位图，例如：

FadeInImage.assetNetwork(
  placeholder: 'assets/placeholder.png',
  image: 'https://example.com/my-image.jpg',
);

优化图片加载是Flutter中的一个重要性能优化技巧，可以通过使用缓存。

避免过多的网络请求

避免过多的网络请求是Flutter中的一个重要性能优化技巧，以下是一些常用的优化方案：

  1. 使用缓存技术：

对于一些重复请求的数据，可以使用缓存技术来避免过多的网络请求。可以使用Flutter自带的dio库或者像Hive、sqflite这样的第三方库来实现缓存，例如：

Dio dio = Dio();
var cacheManager = CacheManager(
  Config(
    'my_cache_key',
    stalePeriod: const Duration(days: 1),
    maxNrOfCacheObjects: 20,
  ),
);
dio.interceptors.add(DioCacheInterceptor(
  options: CacheOptions(
    store: cacheManager,
    policy: CachePolicy.requestFirst,
    hitCacheOnErrorExcept: [401, 403],
  ),
));
  1. 减少请求次数：

对于一些重复请求的数据，可以使用分页或者滚动加载等方式来减少请求次数，从而避免过多的网络请求。例如，在一个列表中使用分页加载的方式来减少网络请求次数。

  1. 合并请求：

对于一些需要同时请求多个接口的场景，可以将多个请求合并成一个请求，从而减少网络请求次数。可以使用Flutter自带的dio库或者像chopper这样的第三方库来实现请求合并，例如：

final chopper = ChopperClient(
  baseUrl: 'https://api.github.com',
  services: [
    GithubApiService.create(),
  ],
  converter: JsonConverter(),
  interceptors: [
    HttpLoggingInterceptor(),
    HeadersInterceptor({'User-Agent': 'Chopper'}),

例如，在GithubApiService中定义多个请求方法：

part 'github_api_service.chopper.dart';

@ChopperApi(baseUrl: '/users')
abstract class GithubApiService extends ChopperService {
  static GithubApiService create([ChopperClient client]) => _$GithubApiService(client);

  @Get(path: '/{username}')
  Future<Response> getUser(@Path('username') String username);

  @Get(path: '/{username}/repos')
  Future<Response> getUserRepos(@Path('username') String username);
}

然后，在使用时只需要合并多个请求：

final chopper = ChopperClient(
  baseUrl: 'https://api.github.com',
  services: [
    GithubApiService.create(),
  ],
  converter: JsonConverter(),
  interceptors: [
    HttpLoggingInterceptor(),
    HeadersInterceptor({'User-Agent': 'Chopper'}),
    CombineRequestInterceptor(),
  ],
);

final githubApiService = chopper.getService<GithubApiService>();

Response<List<dynamic>> response = await githubApiService.getUser('defunkt').then((userResponse) async {
  final user = userResponse.body;
  final reposResponse = await githubApiService.getUserRepos(user['login']);
  final repos = reposResponse.body;
  return Response<List<dynamic>>(repos, reposResponse.base);
});
  1. 使用WebSocket：

对于一些需要实时更新的数据，可以使用WebSocket技术来避免过多的网络请求。可以使用Flutter自带的WebSocket库或者像SocketIO这样的第三方库来实现WebSocket，例如：

final channel = IOWebSocketChannel.connect('ws://localhost:1234');

channel.stream.listen((message) {
  print('Received: $message');
});

channel.sink.add('Hello, WebSocket!');

总之，避免过多的网络请求是Flutter中的一个重要性能优化技巧，可以通过使用缓存技术、减少请求次数、合并请求、使用WebSocket等方法来实现。需要根据实际应用场景进行选择和应用。

优化布局

优化布局是Flutter中的一个重要性能优化技巧，以下是一些常用的优化方案：

  1. 使用Flex布局：

使用Flex布局可以更加灵活地控制布局，从而避免不必要的布局计算。可以使用Row、Column、Flex等组件来实现Flex布局，例如：

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)
  1. 使用CustomMultiChildLayout：

使用CustomMultiChildLayout可以自定义布局，从而避免不必要的布局计算。可以使用CustomMultiChildLayout来实现自定义布局，例如：

class MyLayoutDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    Size leadingSize = Size.zero;
    if (hasChild(0)) {
      leadingSize = layoutChild(0, BoxConstraints.loose(size));
      positionChild(0, Offset.zero);
    }
    if (hasChild(1)) {
      Size trailingSize = layoutChild(1, BoxConstraints.loose(size));
      positionChild(1, Offset(size.width - trailingSize.width, 0));
    }
  }
  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => true;
}

然后在使用时：

CustomMultiChildLayout(
  delegate: MyLayoutDelegate(),
  children: [
    LayoutId(
      id: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    LayoutId(
      id: 1,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)
``
  1. 使用IndexedStack：

使用IndexedStack可以在多个Widget之间快速切换，从而避免不必要的布局计算。可以使用IndexedStack来实现快速切换多个Widget，例如：

IndexedStack(
  index: _currentIndex,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)
  1. 使用AspectRatio：

使用AspectRatio可以控制Widget的宽高比，从而避免不必要的布局计算。可以使用AspectRatio来实现控制宽高比，例如：

AspectRatio(
  aspectRatio: 1.0 / 0.5,
  child: Container(
    width: 100,
    color: Colors.red,
  ),
)

优化布局是Flutter中的一个重要性能优化技巧，可以通过使用Flex布局、CustomMultiChildLayout、IndexedStack、AspectRatio等方法来实现。需要根据实际应用场景进行选择和应用。

使用异步操作

使用异步操作是Flutter中的一个重要性能优化技巧，以下是一些常用的异步操作方案：

  1. 使用Future：

使用Future可以在后台线程执行耗时操作，从而避免阻塞主线程。可以使用async和await关键字来实现异步操作，例如：

Future<String> fetchData() async {
  return Future.delayed(Duration(seconds: 1), () => 'Hello, world!');
}

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
)

使用Future.delayed模拟了一个耗时1秒的操作，并使用FutureBuilder来展示异步操作的结果。

  1. 使用Isolate：

使用Isolate可以在多个线程执行耗时操作，从而避免阻塞主线程。可以使用Flutter自带的compute函数来实现Isolate，例如：

Future<String> fetchData(String input) async {
  await Future.delayed(Duration(seconds: 1));
  return 'Hello, $input!';
}

FutureBuilder(
  future: compute(fetchData, 'world'),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
)

使用compute函数将耗时操作放到另外的线程中执行，并使用FutureBuilder来展示异步操作的结果。

  1. 使用Stream：

使用Stream可以实现数据流的异步处理，从而避免阻塞主线程。可以使用StreamController来创建和管理Stream，例如：

StreamController<int> _counterController = StreamController<int>();
int _counter = 0;

void _incrementCounter() {
  _counter++;
  _counterController.sink.add(_counter);
}

@override
void dispose() {
  _counterController.close();
  super.dispose();
}

StreamBuilder<int>(
  stream: _counterController.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('Counter: ${snapshot.data}');
    } else {
      return CircularProgressIndicator();
    }
  },
)

使用StreamController创建了一个数据流，并在按钮点击时向数据流中添加数据。使用StreamBuilder来展示数据流的结果。

  1. 使用async/await和Future.wait：

使用async/await和Future.wait可以同时执行多个异步操作，并等待所有操作完成后再统一处理结果。例如：

Future<List<String>> fetchData() async {
  List<Future<String>> futures = [
    Future.delayed(Duration(seconds: 1), () => 'Hello'),
    Future.delayed(Duration(seconds: 2), () => 'World'),
  ];
  List<String> results = await Future.wait(futures);
  return results;
}

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        return Text(snapshot.data.join(' '));
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      } else {
        return Text('No data');
      }
    } else {
      return CircularProgressIndicator();
    }
  },
)

使用Future.delayed模拟了两个耗时操作，并使用Future.wait同时执行这两个操作。在所有操作完成后，使用FutureBuilder来展示异步操作的结果。

所以，使用异步操作是Flutter中的一个重要性能优化技巧，可以通过使用Future、Isolate、Stream、async/await和Future.wait等方法来实现。需要根据实际应用场景进行选择和应用。

避免过多的内存使用

避免过多的内存使用是Flutter中的一个重要性能优化技巧，以下是一些常用的优化方案：

  1. 避免不必要的对象创建：

避免不必要的对象创建可以减少内存使用，从而提高应用性能。可以使用const关键字来避免重复创建相同的对象，例如：

const TextStyle style = TextStyle(fontSize: 16, color: Colors.black);
  1. 使用图片压缩：

对于一些较大的图片，可以使用压缩技术来减少图片大小，从而减少内存使用。可以使用dart-image库来实现图片压缩，例如：

import 'package:image/image.dart' as img;
import 'dart:io';
File compressedImage(File imageFile) {
  img.Image image = img.decodeImage(imageFile.readAsBytesSync());
  img.Image smallerImage = img.copyResize(image, width: 800, height: 600);
  return File(imageFile.path)
    ..writeAsBytesSync(img.encodeJpg(smallerImage, quality: 70));
}
  1. 及时释放无用资源：

及时释放无用资源可以避免内存泄漏，从而减少内存使用。可以使用dispose方法来释放无用资源，例如：

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: TextField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: 'Username',
        ),
      ),
    );
  }
}

使用dispose方法释放了无用的TextEditingController资源。

  1. 使用缓存技术：

使用缓存技术可以避免重复创建相同的对象，从而减少内存使用。可以使用Flutter自带的ImageCache类来实现图片缓存，例如：

ImageCache imageCache = PaintingBinding.instance.imageCache;
imageCache.maximumSize = 100; // 设置缓存的最大大小

避免过多的内存使用是Flutter中的一个重要性能优化技巧，可以通过避免不必要的对象创建、使用图片压缩、及时释放无用资源、使用缓存技术等方法来实现。需要根据实际应用场景进行选择和应用。

使用热重载

使用热重载是Flutter中的一个重要开发技巧，以下是一些常用的热重载方案：

  1. 使用Flutter命令行工具：

使用Flutter命令行工具可以实现热重载，从而快速预览应用的修改效果。可以使用flutter run命令启动应用，并使用r或者R键来触发热重载，例如：

flutter run

在启动后，可以在终端中按下r或者R键来触发热重载。

  1. 使用Flutter插件：

使用Flutter插件可以在开发工具中实现热重载，从而快速预览应用的修改效果。可以使用Android Studio、Visual Studio Code等开发工具，并安装Flutter插件，例如：

  • Android Studio：安装Flutter插件，并使用Ctrl+\或者Ctrl+R键来触发热重载。
  • Visual Studio Code：安装Flutter插件，并使用Ctrl+F5键来触发热重载。

在使用开发工具的热重载时，需要先启动应用，并将焦点放在编辑器中。

  1. 使用Flutter DevTools：

使用Flutter DevTools可以在浏览器中实现热重载，从而快速预览应用的修改效果。可以使用Flutter DevTools的hot reload功能，例如：

  • 使用flutter run命令启动应用，并使用–observatory-port选项指定端口号：
flutter run --observatory-port 8888

在使用Flutter DevTools的热重载时，需要先启动应用，并启动DevTools。

使用热重载是Flutter中的一个重要开发技巧，可以通过使用Flutter命令行工具、Flutter插件、Flutter DevTools等方法来实现。需要根据实际开发场景选择和应用。

以上等等，还有想到的点可以和我提出来，我慢慢更新！优化无止境，我们能做的更好！

猜你喜欢

转载自blog.csdn.net/qq_28563283/article/details/130215939
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022