[flutter] 플러터 ProgressIndicator를 사용하여 도서 검색 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

도서 검색 앱을 개발할 때, 사용자가 검색을 요청한 후에 진행 상태를 시각적으로 표시해 주는 것이 중요합니다. 플러터에서는 ProgressIndicator 위젯을 사용하여 진행 상태를 표시할 수 있습니다.

1. CircularProgressIndicator 사용하기

import 'package:flutter/material.dart';

class BookSearchScreen extends StatefulWidget {
  @override
  _BookSearchScreenState createState() => _BookSearchScreenState();
}

class _BookSearchScreenState extends State<BookSearchScreen> {
  bool _isLoading = false;

  // 검색 버튼을 눌렀을 때 실행되는 함수
  void _onSearchPressed() {
    // 검색 상태를 로딩 중으로 변경
    setState(() {
      _isLoading = true;
    });

    // 여기서 실제 검색 로직을 수행

    // 검색이 완료되면 로딩 상태를 false로 변경
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('도서 검색'),
      ),
      body: Center(
        child: _isLoading
            ? CircularProgressIndicator() // 로딩 중일 때는 CircularProgressIndicator를 보여줌
            : Text('검색 결과 표시'), // 로딩 중이 아닐 때는 검색 결과를 보여줌
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onSearchPressed,
        tooltip: '검색',
        child: Icon(Icons.search),
      ),
    );
  }
}

위 예제에서는 CircularProgressIndicator를 사용하여 검색이 진행 중일 때 로딩 상태를 표시하는 방법을 보여줍니다. 실제 검색 로직은 주석으로 처리되어 있으므로 원하는 검색 기능을 구현하고 검색이 완료된 후에 _isLoading 상태를 변경하여 로딩 표시를 제거해 주면 됩니다.

플러터 앱 개발 시에는 사용자 경험을 고려하여 적절한 시점에 로딩 상태를 표시하고 해제하는 것이 중요합니다.

1. CircularProgressIndicator 사용하기

2. 참고 자료