[flutter] 플러터 LinearLoader와 함께 사용하는 상호작용 방법

11 Dec 2023

flutter

플러터(Flutter) LinearLoader는 사용자에게 진행 상태를 시각적으로 제공하는데 유용한 위젯입니다. 사용자와 상호작용이 필요한 경우, LinearLoader를 어떻게 조작하는지 알아보겠습니다.

LinearLoader 기본 사용 방법

먼저, LinearLoader를 기본적으로 사용하는 방법을 알아봅시다. 다음은 LinearLoader 위젯을 생성하고 표시하는 간단한 예제 코드입니다.

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: LinearProgressIndicator(),
        ),
      ),
    );
  }
}

위의 코드를 실행시키면 화면 중앙에 기본적인 LinearProgressIndicator 위젯이 나타납니다.

LinearLoader에 이벤트 처리 방법

이제 LinearLoader와 함께 사용자 상호작용을 추가해보겠습니다. 예를 들어, 데이터를 불러오는 동안 LinearLoader를 보여주고, 데이터 로딩이 완료되면 LinearLoader를 숨기는 방법을 살펴봅시다.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = false;

  void _loadData() {
    setState(() {
      _isLoading = true;
      // 데이터를 로딩하는 비동기 작업 수행
      loadData().then((value) {
        setState(() {
          _isLoading = false;
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: _isLoading ? LinearProgressIndicator() : RaisedButton(
            onPressed: _loadData,
            child: Text('Load Data'),
          ),
        ),
      ),
    );
  }
}

Future<void> loadData() async {
  // 데이터를 비동기로 로딩하는 작업 수행
}

위 예제에서는 _isLoading 값을 사용하여 상태를 추적하고, LinearProgressIndicator 또는 데이터를 로딩하는 버튼을 조건부로 보여줍니다. 데이터를 로딩할 때는 _isLoading 값을 true로 설정하고, 완료되면 false로 설정하여 LinearLoader의 표시 여부를 조절합니다.

이제 LinearLoader를 사용하여 상호작용하는 방법에 대해 간단히 알아보았습니다. 사용자와의 상호작용이 필요한 다양한 시나리오에 적용하여 편리한 UI/UX를 제공할 수 있습니다.

참고 자료

플러터 공식 문서