[flutter] 플러터 LinearLoader의 사용 사례

11 Dec 2023

flutter

플러터는 애니메이션 및 사용자 인터페이스 구현을 위한 다양한 위젯을 제공합니다. 그 중 하나가 LinearProgressIndicator 위젯으로, 실행 중인 작업의 진행 상황을 시각적으로 보여주는데 사용됩니다.

이 위젯은 다양한 사용 사례에서 적용될 수 있으며, 여기서는 LinearProgressIndicator를 통해 단순한 로딩 표시의 사용 사례를 살펴보겠습니다.

1. 리스트 아이템 로딩 상태 표시

ListView.builder(
  itemCount: _itemCount,
  itemBuilder: (context, index) {
    // 리스트 아이템 빌드 중일 때 로딩 상태 표시
    if (index == _itemCount - 1 && _isLoading) {
      return ListTile(
        title: Text('로딩 중...'),
        trailing: LinearProgressIndicator(),
      );
    } else {
      return ListTile(
        title: Text('아이템 $index'),
      );
    }
  },
)

위 코드에서 ListView.builder를 사용하여 리스트 아이템을 빌드하고, _isLoading 값에 따라 마지막 아이템에 LinearProgressIndicator을 표시하여 로딩 상태를 시각적으로 나타내고 있습니다.

2. 화면 로딩 중 표시

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 화면 로딩 중일 때 로딩 상태 표시
    if (_isLoading) {
      return Scaffold(
        appBar: AppBar(
          title: Text('로딩 중...'),
        ),
        body: Center(
          child: LinearProgressIndicator(),
        ),
      );
    } else {
      return Scaffold(
        appBar: AppBar(
          title: Text('메인 화면'),
        ),
        body: Center(
          child: Text('내용이 로딩되었습니다.'),
        ),
      );
    }
  }
}

위 코드에서는 홈 화면이 로딩 중일 때 LinearProgressIndicator를 사용하여 로딩 상태를 나타내고 있습니다. 화면 로딩이 완료되면 본문 내용이 표시됩니다.

LinearProgressIndicator는 이처럼 다양한 사용 사례에서 로딩 상태를 시각적으로 나타내는 데 활용될 수 있습니다.

참고 자료:

플러터 위젯 카탈로그: https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html