加載時間在應(yīng)用程序改進(jìn)中是不可避免的。從用戶體驗(yàn) (UX) 的角度來看，主要是向您的用戶展示正在加載。處理向用戶傳遞信息正在加載的一種主流方法是在不準(zhǔn)確的加載物質(zhì)類型的形狀上顯示帶有微光動畫的鉻色調(diào)。

在在這篇博客中，我們將探索 Flutter 中的 Shimmer 動畫效果。我們將看到如何實(shí)現(xiàn)微光動畫效果的演示程序，并在您的 Flutter 應(yīng)用程序中使用shimmer包展示加載動畫效果。

什么是微光動畫效果？

Shimmer 用于在應(yīng)用程序中從服務(wù)器加載內(nèi)容時添加精彩的動畫。這使 UI 看起來更具響應(yīng)性。它可以很好地被利用，而不是傳統(tǒng)的 ProgressBar 或 Flutter 結(jié)構(gòu)中可訪問的常見loading。

通常，在我們打開應(yīng)用程序的任何時候，我們都會看到具有動畫的loading。它演示了應(yīng)用程序從服務(wù)器或本地數(shù)據(jù)庫加載信息。有多種方法可以顯示這種效果。在這種情況下，我們通常會在加載信息后對與第一個小部件完全相似的小部件進(jìn)行動畫處理。

此演示視頻展示了如何在顫動中創(chuàng)建微光動畫效果。它展示了如何在 Flutter應(yīng)用程序中使用shimmer包來實(shí)現(xiàn)微光動畫效果。它顯示代碼何時成功運(yùn)行，然后顯示內(nèi)容正在從虛擬數(shù)據(jù)加載是帶有持續(xù)時間的微光動畫效果，然后加載完成然后內(nèi)容將顯示在您的設(shè)備上。

特性

微光動畫效果有一些屬性：

**baseColor：**顯示在 Widget 上的 Shimmer 的基本顏色。這種顏色是必不可少的，因?yàn)樽有〔考⒉捎眠@種顏色。
highlightColor： Highlight Color 是提供微光般效果的顏色。這種顏色繼續(xù)在子小部件上波動，并產(chǎn)生微光效果。
child： Child 擁有創(chuàng)建 ShimmerEffect 所需的任何小部件?？梢允俏谋拘〔考驈?fù)雜的設(shè)計，并且創(chuàng)建 ShimmerEffect 沒有任何問題。
**direction：**您可以從左到右、從右到左、從開始到結(jié)束或從底到頂調(diào)整微光高光顏色的方向，為此，您只需傳遞具有確定方向的 ShimmerDirection。
**period：**它控制微光效果的速度。默認(rèn)值為 1500 毫秒。

實(shí)現(xiàn)

添加依賴
```
shimmer: ^2.0.0
```
導(dǎo)入
```
import 'package:shimmer/shimmer.dart';
```
執(zhí)行 flutter packages get

創(chuàng)建一個 movie_model.dart 文件

class MovieModel {
  final String urlImg;
  final String title;
  final String detail;


  const MovieModel({required this.urlImg, 
    required this.title, 
    required this.detail});
}

我們將創(chuàng)建一個類**MovieModel。**在這個類中，我們將創(chuàng)建三個最終字符串，分別是 urlImg、title 和 detail。我們還創(chuàng)建了所有字符串項(xiàng)的構(gòu)造函數(shù)。

創(chuàng)建一個 movie_data.dart 文件

import 'package:flutter_shimmer_animation/model/movie_model.dart';

List<MovieModel> allMovies =[

  MovieModel(
      urlImg:'https://gumlet.assettype.com/bloombergquint%2F2019-04%2F4c894d41-181f-4c8c-8630-4604a6d51d05%2Favengers_infinity_war_and_endgame_poster_w7_1600x900.jpg?rect=0%2C0%2C1250%2C900&auto=format%2Ccompress&w=480&dpr=2.6',
      title:'Avengers: Endgame',
      detail:'It s a 2019 American superhero film based '
  ),
  MovieModel(
      urlImg:'https://townsquare.media/site/442/files/2014/08/The-Expendables.jpg?w=980&q=75',
      title:'The Expendables 3',
      detail:'The Expendables 3 is a 2014 American action '
  ),
  MovieModel(
      urlImg:'https://img.etimg.com/thumb/msid-71454408,width-650,imgsize-242226,,resizemode-4,quality-100/war-1.jpg',
      title:'War',
      detail:'War is a 2019 Indian Hindi-language action '
  ),
  MovieModel(
      urlImg:'https://iadsb.tmgrup.com.tr/de9f7e/1200/627/0/0/1000/522?u=https://idsb.tmgrup.com.tr/2019/12/22/1577016105167.jpg',
      title:'Jumanji: The Next Level',
      detail:'Jumanji: The Next Level is a 2019 American '
  ),
  MovieModel(
      urlImg:'https://evertise.net/wp-content/uploads/2021/06/image-366.png',
      title:'Fast & Furious 9',
      detail:'Dom Toretto`s peaceful life off the grid.'
  )

];

在這個 dart 文件中，我們將創(chuàng)建一個電影列表。我們將添加五個MovieModel 的虛擬數(shù)據(jù)**。**我們添加了 urlImg、title 和 detail 五個不同的數(shù)據(jù)。

創(chuàng)建一個 custom_widget.dart 文件

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

class CustomWidget extends StatelessWidget {

  final double width;
  final double height;
  final ShapeBorder shapeBorder;

  const CustomWidget.rectangular({
    this.width = double.infinity,
    required this.height
}): this.shapeBorder = const RoundedRectangleBorder();

  const CustomWidget.circular({
    this.width = double.infinity,
    required this.height,
    this.shapeBorder = const CircleBorder()
  });

  @override
  Widget build(BuildContext context)  => Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.grey[300]!,
    period: Duration(seconds: 2),
    child: Container(
      width: width,
      height: height,
      decoration: ShapeDecoration(
        color: Colors.grey[400]!,
        shape: shapeBorder,

      ),
    ),
  );
}

創(chuàng)建一個 my_home_page.dart 文件,創(chuàng)建一個 List電影等于括號和 bool isLoading 等于 false，

List<MovieModel> movies = [];
bool isLoading = false;

@override
void initState() {
  // TODO: implement initState
  super.initState();

  loadData();
}

Future loadData() async {
  setState(() {
    isLoading = true;
  });
  await Future.delayed(Duration(seconds: 2));
  movies = List.of(allMovies);
  setState(() {
    isLoading = false;
  });
}

創(chuàng)建一個buildMovieList()。在這個方法中，我們將添加 ListTile() 小部件。

Widget buildMovieList(MovieModel model) =>
    ListTile(
      leading: CircleAvatar(
        radius: 30,
        backgroundImage: NetworkImage(model.urlImg),
      ),
      title: Text(model.title, style: TextStyle(fontSize: 16),),
      subtitle: Text(
        model.detail, style: TextStyle(fontSize: 14), maxLines: 1,),
    )
  
 Widget buildMovieShimmer() =>
    ListTile(
      leading: CustomWidget.circular(height: 64, width: 64),
      title: Align(
        alignment: Alignment.centerLeft,
        child: CustomWidget.rectangular(height: 16,
          width: MediaQuery.of(context).size.width*0.3,),
      ),
      subtitle: CustomWidget.rectangular(height: 14),
    );

添加ListView.builder()。在里面，添加 itemCount 和 itemBuilder。在 itemBuilder 中，我們將添加條件 if isLoading 然后返回 buildMovieShimmer() 小部件，否則我們將返回最終電影等于電影 [index] 并返回 buildMovieList (movie);

ListView.builder(
    itemCount: isLoading? 5: movies.length,
    itemBuilder: (context, index) {
      if (isLoading) {
        return buildMovieShimmer();
      } else {
        final movie = movies[index];
        return buildMovieList(movie);
      }
    }
),

當(dāng)數(shù)據(jù)成功加載時，微光停止，所有數(shù)據(jù)將顯示在您的屏幕上。我們還將在 appBar() 上添加一個刷新按鈕以獲得微光效果。

actions: [
  IconButton(
      icon: Icon(Icons.refresh),
      onPressed: loadData)
],

完整代碼

import 'package:flutter/material.dart';
import 'package:flutter_shimmer_animation/custom_widget.dart';
import 'package:flutter_shimmer_animation/data/movie_data.dart';
import 'package:flutter_shimmer_animation/model/movie_model.dart';

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<MovieModel> movies = [];
  bool isLoading = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    loadData();
  }

  Future loadData() async {
    setState(() {
      isLoading = true;
    });
    await Future.delayed(Duration(seconds: 2));
    movies = List.of(allMovies);
    setState(() {
      isLoading = false;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.teal,
        title: Text("Shimmer Animation Effect"),
        actions: [
          IconButton(
              icon: Icon(Icons.refresh),
              onPressed: loadData)
        ],
      ),
      body: ListView.builder(
          itemCount: isLoading? 5: movies.length,
          itemBuilder: (context, index) {
            if (isLoading) {
              return buildMovieShimmer();
            } else {
              final movie = movies[index];
              return buildMovieList(movie);
            }
          }
      ),

    );
  }

  Widget buildMovieList(MovieModel model) =>
      ListTile(
        leading: CircleAvatar(
          radius: 30,
          backgroundImage: NetworkImage(model.urlImg),
        ),
        title: Text(model.title, style: TextStyle(fontSize: 16),),
        subtitle: Text(
          model.detail, style: TextStyle(fontSize: 14), maxLines: 1,),
      );

  Widget buildMovieShimmer() =>
      ListTile(
        leading: CustomWidget.circular(height: 64, width: 64),
        title: Align(
          alignment: Alignment.centerLeft,
          child: CustomWidget.rectangular(height: 16,
            width: MediaQuery.of(context).size.width*0.3,),
        ),
        subtitle: CustomWidget.rectangular(height: 14),
      );

}

原文鏈接：https://medium.com/flutterdevs/explore-shimmer-animation-effect-in-flutter-7b0e46a9c722

你可能還喜歡

Stateful 組件的生命周期
【老孟Flutter】2020年總結(jié)
Flutter 中渲染3D 模型
Flutter 黏貼卡動畫效果

關(guān)注「老孟Flutter」

讓你每天進(jìn)步一點(diǎn)點(diǎn)

Flutter 中的 Shimmer 動畫效果

什么是微光動畫效果？

特性

實(shí)現(xiàn)

完整代碼

什么是微光動畫效果？