[Flutter]CircularProgressIndicatorのサイズを設定する方法

広告Flutter
2024年2月21日

CircularProgressIndicator のサイズを変更する方法です。

方法

CircularProgressIndicator の大きさを変更するには、SizedBox を使います。 CircularProgressIndicator を SizedBox でラップし、 SizedBox のプロパティ width と height に幅と高さを px(ピクセル)で指定します。

  SizedBox(
	width: 100,
	height: 100,
	child: CircularProgressIndicator(),
  ),

表示

別の大きさの CircularProgressIndicator を2つ並べて表示してみます。

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          SizedBox(
            width: 100,
            height: 100,
            child: CircularProgressIndicator(),
          ),
          SizedBox(
            width: 50,
            height: 50,
            child: CircularProgressIndicator(),
          )
        ],
      ),
    );
  }
CircularProgressIndicator
CircularProgressIndicator

参考

https://api.flutter.dev/flutter/widgets/SizedBox-class.html https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html