Flutter loading

最新推荐文章于 2025-06-04 13:59:47 发布

原创最新推荐文章于 2025-06-04 13:59:47 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #loading

Flutter 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Flutter应用中实现加载过渡效果，通过自定义LoadingPage类结合flutter_spinkit插件，展示SpinKitFadingCircle样式动画。文章提供完整代码示例，包括打开和关闭loading动画的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在加载数据或者向后台发送请求后，需要有一个正在加载的过渡效果。可以用showDialog和插件flutter_spinkit解决。

最终效果图

抽出一个名为LoadingPage的class表达loading效果，如下：

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

class LoadingPage {
  final BuildContext _context;

  LoadingPage(this._context);

  ///打开loading
  void show({Function onClosed}) {
    showDialog(
      context: _context,
      builder: (context) {
        return SpinKitFadingCircle(color: Colors.white);
      },
    ).then((value) {
      onClosed(value);
    });
  }

  ///关闭loading
  void close() {
    Navigator.of(_context).pop();
  }
}

使用LoadingPage的实例：

import 'package:flutter/material.dart';
import './common/loading_page.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
        elevation: 0.0,
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('打开Loading'),
            onPressed: () {
              LoadingPage loadingPage = LoadingPage(context);
              loadingPage.show();
              Future.delayed(
                Duration(seconds: 3),
                () {
                  loadingPage.close();
                },
              );
            },
          ),
        ],
      ),
    );
  }
}