[flutter] 플러터 LinearLoader의 로딩 완료 후 페이지 이동 방법

11 Dec 2023

flutter

플러터 앱을 개발할 때, 사용자에게 로딩 상태를 보여주고 나중에 다른 페이지로 이동하는 컴포넌트인 LinearLoader를 구현하는 방법을 알아보겠습니다.

LinearLoader란?

LinearLoader는 플러터에서 사용자에게 현재 작업이 진행 중인지를 알려주는 UI 컴포넌트입니다. 주로 로딩 상태를 표시하는데 사용됩니다.

로딩 완료 후 페이지 이동 방법

로딩이 완료된 후에 다른 페이지로 이동하는 방법은 Navigator 클래스의 push 메서드를 활용하는 것이 일반적입니다.

아래는 LinearLoader가 로딩이 완료된 후에 다른 페이지로 이동하는 예제 코드입니다.

import 'package:flutter/material.dart';

class MyLoadingScreen extends StatefulWidget {
  @override
  _MyLoadingScreenState createState() => _MyLoadingScreenState();
}

class _MyLoadingScreenState extends State<MyLoadingScreen> {
  @override
  void initState() {
    super.initState();
    
    // 이 부분에서 데이터를 불러오는 작업을 수행한다고 가정
    _loadData().then((_) {
      // 데이터 로딩이 완료되면 새로운 페이지로 이동
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => MyNewPage()),
      );
    });
  }

  Future<void> _loadData() async {
    // 데이터를 불러오는 비동기 작업을 수행하는 부분
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Loading Screen')),
      body: Center(
        child: CircularProgressIndicator(),  // 로딩 중을 나타내는 위젯
      ),
    );
  }
}

class MyNewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('New Page')),
      body: Center(
        child: Text('New Page Content'),
      ),
    );
  }
}

위 예제 코드에서는 MyLoadingScreen이 로딩을 표시하고, 데이터를 불러오는 _loadData 메서드가 완료되면 Navigator.push를 사용하여 MyNewPage로 이동하는 방법을 보여줍니다.

결론

LinearLoader를 사용하여 로딩 상태를 표시하고, 데이터 로딩이 완료된 후에 다른 페이지로 이동하는 방법에 대해 살펴보았습니다. Navigator.push를 이용하여 페이지를 이동하는 방식은 일반적으로 사용되며, 이를 활용하여 사용자에게 보다 나은 경험을 제공할 수 있습니다.

이제 개발 중인 앱에 LinearLoader와 페이지 이동 기능을 구현하여 사용자가 작업이 진행 중임을 알리고, 로딩이 완료된 후에 적절한 시점에 다음 단계로 넘어갈 수 있도록 해보세요.