【Flutter】簡単にローダーを作成する方法

はじめに

Flutterでローダーを作成する際、flutter_spinkitを使うことで
様々な種類のローダーを作成できる。

でも今回は「もっとシンプルなローダーを簡単に作りたいな〜」という時に使えるローダーの作り方を記載。
→めちゃ簡単

サンプル①

Widget loader() {
  return Center(
    child: SizedBox(
      width: 100,
      height: 100,
      child: CircularProgressIndicator(
        backgroundColor: Colors.grey,
        strokeWidth: 2.0,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
      ),
    ),
  );
}

サンプル②

HexColorプラグイン使用。
publpec.yamlのdepenciesにhexcolor: ^1.0.2の追加とimportが必要。

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

Widget loader() {
  return Center(
    child: SizedBox(
      width: 100,
      height: 100,
      child: CircularProgressIndicator(
        backgroundColor: Hexcolor('#f6d653'),
        strokeWidth: 3.0,
        valueColor: AlwaysStoppedAnimation(
          Hexcolor('#0426af'),
        ),
      ),
    ),
  );
}

サンプル③

太いローダー。

Widget loader() {
  return Center(
    child: SizedBox(
      width: 100,
      height: 100,
      child: CircularProgressIndicator(
        backgroundColor: Hexcolor('#373737'),
        strokeWidth: 6.0, // ここの数値を変更
        valueColor: AlwaysStoppedAnimation(
          Hexcolor('#ff0634'),
        ),
      ),
    ),
  );
}

まとめ

ローダー用のプラグインを使わなくとも、
色や太さの組み合わせで、ある程度のローダーは作れる！