🕌
[Flutter] ローディング画面をリッチに!キラキラをつける。[超簡単]
初めに
こんにちはえんでばーです。
今回はローディング画面にキラキラをつける方法について紹介しようと思います。
CircularProgressIndicator()でもいいんですが、
他のアプリとUIで差を付けるなら、ローディング画面もリッチでありたいですよね。
そんな事で簡単にキラキラを付ける方法について紹介しようと思います。
読む対象
- もっとUIにこだわりたい方
- 有名所のアプリの様にキラキラを実装させたい
- CircularProgressIndicator()がダサいと感じている方
この記事で書かない事
- ローディング中の状態のハンドリング方法
今回作るもの
こんな感じでキラキラを作っていこうと思います。
ちなみにこのgif画像は僕の個人開発アプリなのでもしよかったらインストールして使ってみて下さい。↓
必要なもの
実装
ステップ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のフォローよろしくお願いします。
Discussion