【Flutter】CircularProgressIndicator|読み込み中のくるくるを表示

今回はCircularProgressIndicatorの基本的な使い方を紹介します。

CircularProgressIndicatorを使えばローディング中のくるくる(プログレスインジケータ)を表示できます。

\ 世界最大級のオンライン学習サービス /

目次

CircularProgressIndicatorの使い方

CircularProgressIndicator(),

CircularProgressIndicatorは引数なしでくるくる(プログレスインジケータ)を表示できます。

デフォルト色はMaterialAppaccentColorになります。

くるくるの色・背景色を変更

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
  backgroundColor: Colors.yellow,
),

プログレスインジケータの色、背景色はそれぞれvalueColorbackgroundColorで指定できます。

valueColorにはAlwaysStoppedAnimationを渡します。

くるくるの太さを変更

CircularProgressIndicator(
  strokeWidth: 10,
),

プログレスインジケータの太さはstrokeWidthで調整できます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: CircularProgressIndicator(
            strokeWidth: 10,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
            backgroundColor: Colors.yellow,
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次