flutter性能优化大全

4,852 阅读12分钟

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等方法来实现。需要根据实际开发场景选择和应用。

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