[Flutter] 플러터 성능향상을 위한 지연로딩 하기

아래에 예제에서는 `MyLazyLoadedWidget`은 필요할 때까지 `MyHeavyWidget`의 로딩을 지연하는 위젯입니다. 앱이 시작되면 `MyLazyLoadedWidget`은 `MyHeavyWidget`이 `비동기식으로 로드되는 동안 로딩 표시기를 표시`합니다. 무거운 위젯이 로드되면 화면에 표시됩니다.

이렇게 하면 무거운 위젯이 필요할 때까지 로드를 지연시켜 앱의 초기 시작 시간을 개선하고 메모리 사용량을 줄이는 데 도움이 될 수 있습니다.

 

예제

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyLazyLoadedWidget(),
        ),
      ),
    );
  }
}

class MyLazyLoadedWidget extends StatefulWidget {
  @override
  _MyLazyLoadedWidgetState createState() => _MyLazyLoadedWidgetState();
}

class _MyLazyLoadedWidgetState extends State<MyLazyLoadedWidget> {
  bool _isLoading = true;
  MyHeavyWidget _heavyWidget;

  @override
  void initState() {
    super.initState();
    // Load the heavy widget asynchronously.
    _loadHeavyWidget().then((widget) {
      setState(() {
        _isLoading = false;
        _heavyWidget = widget;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      // Show a loading indicator while the heavy widget is being loaded.
      return CircularProgressIndicator();
    } else {
      // Show the heavy widget once it's been loaded.
      return _heavyWidget;
    }
  }

  Future<MyHeavyWidget> _loadHeavyWidget() async {
    // This simulates loading the heavy widget from a remote source.
    await Future.delayed(Duration(seconds: 1));
    return MyHeavyWidget();
  }
}

class MyHeavyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // This widget is heavy because it contains a lot of complex layout and graphics.
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text('Heavy widget'),
    );
  }
}