[flutter] 플러터 ProgressIndicator를 사용하여 네비게이션 플로우 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

앱에서 사용자가 긴 작업을 기다리는 동안에는 ProgressIndicator를 사용하여 진행 상태를 시각적으로 표시하는 것이 좋습니다.

페이지 간의 네비게이션 플로우를 보여줄 때, 다음과 같은 방법으로 ProgressIndicator를 활용할 수 있습니다.

1. 네비게이션과 함께 ProgressIndicator 표시하기:

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool _isLoading = false;

  void _navigateAndShowIndicator() async {
    // 화면으로 이동하기 전에 _isLoading을 true로 설정하여 Indicator를 표시합니다.
    setState(() {
      _isLoading = true;
    });

    // 긴 작업 수행 (예를 들면, 3초 동안의 인위적인 딜레이)
    await Future.delayed(Duration(seconds: 3));

    // 긴 작업이 완료된 후, 새로운 화면으로 이동하고 _isLoading을 false로 설정하여 Indicator를 숨깁니다.
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => NextPage(),
    )).then((value) {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Page'),
      ),
      body: Center(
        child: _isLoading
            ? CircularProgressIndicator() // Indicator 표시
            : ElevatedButton(
                onPressed: () {
                  _navigateAndShowIndicator();
                },
                child: Text('Next Page'),
              ),
      ),
    );
  }
}

위의 코드에서, _isLoading 변수를 사용하여 Indicator를 표시할지 여부를 관리합니다. 화면으로 이동하기 전에 _isLoading 값을 true로 설정하여 Indicator를 표시하고, 작업이 완료된 후에는 false로 설정하여 Indicator를 숨깁니다.

2. 다양한 종류의 Indicator 사용하기:

플러터에는 여러 종류의 Indicator가 있습니다.

CircularProgressIndicator: 원형 모양의 Indicator
LinearProgressIndicator: 직선 모양의 Indicator

이러한 Indicator의 스타일과 색상을 변경하여 사용할 수 있습니다.

이제, ProgressIndicator를 사용하여 네비게이션 플로우 진행 상태를 시각적으로 표시할 수 있게 되었습니다. 언제든지 질문이 있으시면 연락해주세요!