[Flutter] ローディング画面をリッチに！キラキラをつける。[超簡単]

初めに

こんにちはえんでばーです。
今回はローディング画面にキラキラをつける方法について紹介しようと思います。

CircularProgressIndicator()でもいいんですが、
他のアプリとUIで差を付けるなら、ローディング画面もリッチでありたいですよね。

そんな事で簡単にキラキラを付ける方法について紹介しようと思います。

読む対象

• もっとUIにこだわりたい方
• 有名所のアプリの様にキラキラを実装させたい
• CircularProgressIndicator()がダサいと感じている方

この記事で書かない事

• ローディング中の状態のハンドリング方法

今回作るもの

こんな感じでキラキラを作っていこうと思います。

ちなみにこのgif画像は僕の個人開発アプリなのでもしよかったらインストールして使ってみて下さい。↓

https://apps.apple.com/us/app/multistream-動画複数視聴アプリ/id1593437968

必要なもの

https://pub.dev/packages/skeletons

実装

ステップ１　pubspec.yamalに追加

上記のライブラリをインポートしましょう。

ステップ2 色を決める

config/colors/colors.dart

const Color pointColor = Color(0xff51D95F);
const Color basicColor = Color(0xff282828);

をおく

ステップ3 MaterialAppをSkeletonThemeで囲む

main.dart

SkeletonTheme(
  shimmerGradient: const LinearGradient(
        colors: [
          basicColor,
          pointDark,
          pointDark,
          basicColor,
          basicColor,
        ],
        stops: [
          0.0,
          0.2,
          0.5,
          0.8,
          1,
        ],
        begin: Alignment(-2.4, -0.2),
        end: Alignment(2.4, 0.2),
   ),
  child: MateriaApp(
    ...
  ),
);

好きな様にグラデーションのカラーを配置する。
後で色々いじってみて

キラキラローディングをしたい画面に

Container(
  width: size.width,
  height: 80, 
  decoration: const BoxDecoration(
   color: backColor,
   borderRadius: BorderRadius.all(Radius.circular(15)),
  ),
  child: Padding(
   padding: const EdgeInsets.only(right: 4),
   child: SkeletonItem(
     child: Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         const Padding(
           padding: EdgeInsets.only(
             top: 8,
             left: 8,
             right: 8,
           ),
         child: SkeletonAvatar(
            style: SkeletonAvatarStyle(
              shape: BoxShape.rectangle,
              width: 64,
              height: 64,
            ),
         ),
       ),
       Expanded(
         child: Padding(
           padding: const EdgeInsets.only(
              left: 0, top: 16, right: 8, bottom: 14),
           child: Column(
             mainAxisAlignment:MainAxisAlignment.spaceBetween,
             children: [
               SkeletonLine(
                 style: SkeletonLineStyle(
                    height: 24,
                    randomLength: true,
                    borderRadius:BorderRadius.circular(4),
                    ),
                  ),
                SkeletonLine(
                  style: SkeletonLineStyle(
                    height: 12,
                    andomLength: true,
                    borderRadius:
                    BorderRadius.circular(4),
                  ),
                ),
               ],
              ),
             ),
            ),
           ],
          ),
         ),
        ),
       ),

こんな感じです。

//これで四角や丸ができる
SkeletonAvatar(
 style: SkeletonAvatarStyle(
  shape: BoxShape.rectangle,//四角
  //shape: BoxShape.circle,//丸
  width: 64,
  height: 64,
 ),
),

//これで横ながの四角形ができる
SkeletonLine(
  style: SkeletonLineStyle(
    height: 24,
    randomLength: true,//tureで横の長さランダム
    borderRadius:BorderRadius.circular(4),
  ),
),

SkeletonAvatarStyleのプロパティ

name	固定値
width	48
height	48
padding	EdgeInsets.all(0),
randomWidth	null
minWidth	null
maxWidth	null
randomHeight	null
minHeight	null
maxHeight	null
shape	BoxShape.rectangle
borderRadius	BorderRadius.all(Radius.circular(4)),

SkeletonAvatarStyleのプロパティ

name	固定値
width	double.infinity
height	18
padding	EdgeInsets.all(0),
randomLength	null
minLength	null
maxLength	null
shape	BoxShape.rectangle
borderRadius	BorderRadius.all(Radius.circular(2))
alignment	AlignmentDirectional.centerStart

最後に

もしよかったらtwitterのフォローよろしくお願いします。

https://twitter.com/endeverva