플러터 강좌: 15.10 로딩 인디케이터 추가하기

Flutter는 Google에서 개발한 오픈소스 UI 소프트웨어 개발 키트(SDK)로, 모바일, 웹, 데스크탑 앱을 포함한 다양한 플랫폼에서 고성능 애플리케이션을 만들 수 있도록 지원합니다. Flutter는 빠르게 전체 애플리케이션을 빌드하고 배포할 수 있게 해주는 많은 기능을 갖추고 있습니다. 이 강좌에서는 Flutter 애플리케이션에 로딩 인디케이터를 추가하는 방법에 대해 자세히 설명하겠습니다. 로딩 인디케이터는 사용자에게 어떤 작업이 진행 중임을 시각적으로 알리는 중요한 요소로, 사용자 경험을 향상시키는 데 큰 역할을 합니다.

1. 로딩 인디케이터란?

로딩 인디케이터는 사용자에게 데이터가 로드되고 있다는 신호를 제공하는 UI 요소입니다. 이는 사용자가 앱의 반응성을 이해하고, 잠재적인 지연에 대해 걱정하지 않도록 도와줍니다. Flutter에서는 다음과 같은 다양한 로딩 인디케이터를 제공합니다.

  • LinearProgressIndicator: 수평 진행 바
  • CircularProgressIndicator: 원형 진행 바
  • Custom 로딩 인디케이터: Flutter의 유연성을 활용하여 커스터마이즈 가능

2. 프로젝트 설정

로딩 인디케이터를 추가하기 위해서는 기존의 Flutter 프로젝트가 필요합니다. 새로운 Flutter 프로젝트를 생성하려면 다음 명령어를 실행하여 기본 프로젝트 구조를 생성합니다. 

flutter create loading_indicator_example

생성된 프로젝트 디렉터리로 이동하고, IDE(예: Visual Studio Code)를 사용하여 프로젝트를 엽니다. 

cd loading_indicator_example

3. 로딩 인디케이터 추가하기

로딩 인디케이터를 추가하기 위해, 먼저 사용자 인터페이스(UI)를 정의해야 합니다. 다음 코드는 CircularProgressIndicator와 LinearProgressIndicator를 사용하는 예제입니다. 


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Indicator Example',
      home: LoadingIndicatorDemo(),
    );
  }
}

class LoadingIndicatorDemo extends StatefulWidget {
  @override
  _LoadingIndicatorDemoState createState() => _LoadingIndicatorDemoState();
}

class _LoadingIndicatorDemoState extends State {
  bool _isLoading = false;

  void _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    // Simulate a network request
    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로딩 인디케이터 예제'),
      ),
      body: Center(
        child: _isLoading 
            ? CircularProgressIndicator() 
            : ElevatedButton(
                onPressed: _fetchData, 
                child: Text('데이터 가져오기'),
              ),
      ),
    );
  }
}

위 코드는 CircularProgressIndicator를 사용하여 로딩 상태를 사용자에게 보여줍니다. 버튼을 클릭하면 _fetchData 함수가 호출되어 3초 동안 대기한 후 로딩 인디케이터를 숨깁니다.

4. LinearProgressIndicator 추가하기

LinearProgressIndicator를 사용하여 로딩 상태를 표시하는 방법도 동일하게 구현할 수 있습니다. 레이아웃을 변경하려면 코드를 수정하면 됩니다. 


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '로딩 인디케이터 예제',
      home: LoadingIndicatorDemo(),
    );
  }
}

class LoadingIndicatorDemo extends StatefulWidget {
  @override
  _LoadingIndicatorDemoState createState() => _LoadingIndicatorDemoState();
}

class _LoadingIndicatorDemoState extends State {
  bool _isLoading = false;

  void _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로딩 인디케이터 예제'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _isLoading 
                ? LinearProgressIndicator() 
                : ElevatedButton(
                    onPressed: _fetchData, 
                    child: Text('데이터 가져오기'),
                  ),
        ],
      )
    );
  }
}

5. 커스터마이징 로딩 인디케이터

Flutter에서 제공하는 기본 로딩 인디케이터를 커스터마이징하여 더욱 독특하고 매력적인 UI를 만들 수 있습니다. 다음은 색상, 크기 및 형태를 조정하여 커스터마이즈하는 예제입니다. 


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '커스터마이즈 로딩 인디케이터 예제',
      home: LoadingIndicatorDemo(),
    );
  }
}

class LoadingIndicatorDemo extends StatefulWidget {
  @override
  _LoadingIndicatorDemoState createState() => _LoadingIndicatorDemoState();
}

class _LoadingIndicatorDemoState extends State {
  bool _isLoading = false;

  void _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('커스터마이즈 로딩 인디케이터 예제'),
      ),
      body: Center(
        child: _isLoading 
          ? CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Colors.green),
              strokeWidth: 10.0,
            ) 
          : ElevatedButton(
              onPressed: _fetchData, 
              child: Text('데이터 가져오기'),
            ),
      ),
    );
  }
}

6. 결론

로딩 인디케이터는 사용자 경험을 개선하고, 애플리케이션의 정체성을 유지하는 중요한 요소입니다. Flutter를 사용하면 간단하게 로딩 인디케이터를 추가하고, 필요에 따라 커스터마이즈할 수 있습니다. 이번 강좌를 통해 플러터 애플리케이션에 로딩 인디케이터를 성공적으로 추가하길 바랍니다.

7. 추가 자료

로딩 인디케이터에 대한 더 많은 정보를 원하시면 Flutter 공식 문서나 커뮤니티 포럼을 참조하시기 바랍니다. 다양한 예제와 팁이 포함되어 있어 문제 해결에 유용할 것입니다.

감사합니다!