[flutter] 플러터 ProgressIndicator를 사용하는 프로젝트 예시는?

20 Dec 2023

flutter

먼저, 이 예시에서는 ProgressIndicator를 사용하여 작업이 진행 중임을 사용자에게 표시하는 간단한 앱을 만들어 보겠습니다.

프로젝트 설정

먼저, 플러터 프로젝트를 새로 만들고, pubspec.yaml 파일에 다음과 같이 cupertino_icons를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

그런 다음 터미널에서 다음 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

ProgressIndicator 추가

다음으로, 플러터 코드를 편집기에서 열고, ProgressIndicator를 추가할 화면에 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Progress Indicator Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Fetching data...'),
               **CircularProgressIndicator(),**
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 Center와 Column으로 화면을 가운데 정렬하고, Text로 “Fetching data…“를 표시한 후 CircularProgressIndicator를 추가했습니다.

앱 실행

마지막으로, 이제 앱을 실행하여 ProgressIndicator가 표시되는지 확인할 수 있습니다.

이것으로 간단한 프로젝트 예시를 통해 플러터의 ProgressIndicator를 사용하는 방법을 살펴보았습니다.