[flutter] 플러터 ProgressIndicator를 사용하여 음식 배달 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

아래는 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('음식 주문 진행 상태')),
        body: OrderStatusViewer(),
      ),
    );
  }
}

class OrderStatusViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('주문이 접수되었습니다.'),
          SizedBox(height: 20),
          CircularProgressIndicator(),
        ],
      ),
    );
  }
}

이 예제에서는, ProgressIndicator를 이용하여 “주문이 접수되었습니다.” 문구와 함께 진행 상태를 보여주는 화면을 만들었습니다.

더 나아가서, 다양한 주문 상태에 따라 ProgressIndicator를 동적으로 변화시킬 수도 있습니다. 상태 변화에 따라 setState()를 호출하여 ProgressIndicator를 갱신하는 방법을 구현할 수 있습니다.

참고문헌:

플러터 위젯 카탈로그: https://flutter.dev/docs/development/ui/widgets/cupertino
플러터 공식 문서: https://api.flutter.dev/flutter/material/ProgressIndicator-class.html