【Flutter】CircularProgressIndicatorのサイズを変更する

CircularProgressIndicatorのサイズを変更する方法を紹介します。

今回はSizedBoxでくるくる(プログレスインジケータ)の調整をしていきます。

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

目次

CircularProgressIndicatorのサイズ変更

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

CircularProgressIndicatorのサイズ(高さ・横幅)はSizedBoxで調整できます。

くるくるの太さはCircularProgressIndicatorstrokeWidthで調整します。

調整後

調整前

サンプルコード

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: SizedBox(
            height: 100,
            width: 100,
            child: CircularProgressIndicator(
              strokeWidth: 10,
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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