🕌

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

4 min read

初めに

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

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

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

読む対象

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

この記事で書かない事

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

今回作るもの

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

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

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

必要なもの

https://pub.dev/packages/skeletons

実装

ステップ1 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

Discussion

ログインするとコメントできます