[flutter] 플러터(Flutter)의 앱 퍼포먼스를 개선하기 위한 팁은 무엇이 있나요?

04 Dec 2023

flutter

플러터(Flutter)는 사용자 인터페이스(UI)를 빠르게 개발할 수 있는 강력한 프레임워크입니다. 하지만 때로는 앱 퍼포먼스에 문제가 생길 수 있습니다. 이러한 문제를 해결하고 앱의 성능을 개선하기 위해 몇 가지 팁을 제공하겠습니다.

1. 불필요한 위젯 렌더링 제거하기

플러터에서는 위젯 트리를 사용하여 UI를 구성합니다. 하지만 모든 위젯을 렌더링하는 것은 성능에 악영향을 미칠 수 있습니다. 따라서, 변경된 부분에만 업데이트를 적용하도록 하는 setState 메서드를 사용하거나, RepaintBoundary 위젯을 사용하여 불필요한 렌더링을 방지할 수 있습니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: Column(
        children: [
          Text('Hello World!'),
          if (_isLoading) CircularProgressIndicator(),
          // 추가적인 위젯들...
        ],
      ),
    );
  }

  void fetchData() {
    setState(() {
      _isLoading = true;
    });
    // 데이터를 가져오는 비동기 작업 수행
    // 성공적으로 로드된 후 setState(() { _isLoading = false; }) 호출
  }
}

2. 이미지 최적화하기

앱에서 많은 이미지를 사용하는 경우, 이미지의 크기를 최적화하여 로딩 시간을 단축시킬 수 있습니다. flutter_image_compress와 같은 라이브러리를 사용하거나, 이미지 캐싱 플러그인인 cached_network_image를 사용하여 이미지를 최적화할 수 있습니다.

import 'package:flutter_image_compress/flutter_image_compress.dart';
import 'package:cached_network_image/cached_network_image.dart';

Future<File> compressImage(File image) async {
  final result = await FlutterImageCompress.compressAndGetFile(
    image.path,
    "path/to/compressed/image.jpg",
    quality: 70,
  );
  return result;
}

Widget buildCachedImage(String imageUrl) {
  return CachedNetworkImage(
    imageUrl: imageUrl,
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
  );
}

3. 비동기 테스크 분리하기

플러터 앱에서는 많은 비동기 테스크가 발생할 수 있습니다. 하지만 모든 테스크를 하나의 이벤트 루프에서 처리하면 앱의 성능에 부정적인 영향을 줄 수 있습니다. 따라서, Future.delayed 또는 Timer를 사용하여 시간을 나누어 처리하거나, 비동기 테스크를 개별적으로 분리하여 처리하는 것이 좋습니다.

Future<void> fetchData() async {
  await Future.delayed(Duration(milliseconds: 100));
  // 비동기 작업 수행
}

void startAsyncTasks() {
  fetchData();
  // 다른 비동기 작업들...
}

결론

플러터 앱의 퍼포먼스 개선을 위해 위의 팁들을 활용해보세요. 불필요한 위젯 렌더링을 제거하고, 이미지를 최적화하며, 비동기 테스크를 분리하는 것으로 앱의 성능을 개선할 수 있습니다. 그러면 사용자들은 더 좋은 사용자 경험(UX)을 누릴 수 있을 것입니다.