[Flutter]CircularProgressIndicatorのカスタマイズ方法

インターネットからデータを取得するなどの非同期処理を行う際に、その処理を待っている間に表示する「CircularProgressIndicator」という「グリグリ」ウィジェットがあります。

 

1.画面のいっぱいに拡げずに画面の真ん中に表示させるようにする方法

デフォルトだと、ウィジェット(Widget)いっぱいにグリグリが拡がって表示されてしまう場合があるのですが、

これをよく見るこんな感じで画面の真ん中に表示させたい場合は、

CircularProgressIndicatorをCenterでくるんでやるとできます。

 

2.グリグリの色をテーマカラーと合わせる方法

あと、デフォルトだと、ダークモードにしてもグリグリの色が青っぽくなる場合がありますが、

これをテーマの色(ダークモードの場合は黒っぽく)に合わせたい場合は、

こんな感じで、テーマカラー(primaryColor)を持ってきて、CircularProgressIndicatorのcolor属性に設定してやればできます。

(詳しくは、以下の動画で解説していますので、よろしければご覧下さい)

こんな記事も読まれています

おすすめコンテンツ




Flutter(フラッター)


みんプロ作成アプリ




TOP