Flutter内でCircularProgressIndicatorを使用する方法

Flutter の CircularProgressIndicator を使うには、以下の手順に従ってください。

1. import ‘package:flutter/material.dart’;

import 'package:flutter/material.dart';

1. ウィジェットクラス内で進行状況を表示したい箇所に、CircularProgressIndicator サブウィジェットを追加します。

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Widget'),
),
body: Center(
child: CircularProgressIndicator(),
),
);
}
}

1. スタイルをカスタマイズしたCircularProgressIndicatorが必要な場合は CircularProgressIndicator のコンストラクタを使用してスタイルを調整するパラメータを渡すことができます。

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Widget'),
),
body: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
strokeWidth: 5.0,
),
),
);
}
}

上の例では、CircularProgressIndicator の色を赤に設定し、線の幅を 5.0 に設定しています。

1. ご自身のアプリにこのウィジェットをご利用ください。

void main() {
runApp(MaterialApp(
home: MyWidget(),
));
}

これでFlutterアプリでCircularProgressIndicatorを使うことができます。画面上でプログレスインジケーターが回転して表示されるだけで、実際のプログレスに応じてインジケーターの値をその都度アップデートする必要があることに注意してください。