Flutter教程实现自定义Loading效果

在Flutter中如何实现个性化的Loading动画效果？我想自定义一个独特的加载动画，而不是使用默认的CircularProgressIndicator。具体想实现类似旋转的logo或者带有文字提示的动态效果，但不太清楚该用什么组件和动画控制器来实现。能否提供一些实现思路或代码示例？比如如何控制动画的循环播放、如何将自定义widget嵌入到异步操作中显示。另外，这种自定义Loading对性能会有影响吗？

3 回复

要实现一个简单的自定义Loading效果，可以使用Flutter的AnimatedContainer或CustomPainter。以下是一个基于AnimatedContainer的例子：

  1. 创建一个新项目。
  2. 在lib/main.dart中添加如下代码：
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoadingPage(),
    );
  }
}

class LoadingPage extends StatefulWidget {
  @override
  _LoadingPageState createState() => _LoadingPageState();
}

class _LoadingPageState extends State<LoadingPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          width: 50 + _animation.value * 50,
          height: 50 + _animation.value * 50,
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.8 - _animation.value.abs()),
            shape: BoxShape.circle,
          ),
        ),
      ),
    );
  }
}

这个例子中，通过AnimationController和Tween创建了一个圆形Loading动画，随着动画的进行，圆的大小和透明度会变化。你可以根据需要调整动画的速度、颜色等属性。

更多关于Flutter教程实现自定义Loading效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


实现一个简单的Flutter自定义Loading效果，可以用Stack和AnimatedContainer来完成。首先创建一个StatefulWidget，内部使用一个bool变量控制Loading状态。

import 'package:flutter/material.dart';

class CustomLoading extends StatefulWidget {
  @override
  _CustomLoadingState createState() => _CustomLoadingState();
}

class _CustomLoadingState extends State<CustomLoading> with SingleTickerProviderStateMixin {
  bool isLoading = false;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 你的页面内容
        Center(child: Text('加载中...')),
        // Loading动画
        AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.rotate(
              angle: _controller.value * 2.0 * 3.141592653589793,
              child: CircularProgressIndicator(),
            );
          },
        ),
      ],
    );
  }
}

这段代码实现了基本的旋转Loading效果，你可以根据需要调整样式和动画逻辑。

Flutter 自定义Loading效果实现

在Flutter中实现自定义Loading效果非常简单，可以通过多种方式实现。下面我将介绍两种常见的方法：

方法1：使用AnimatedBuilder和RotationTransition

import 'package:flutter/material.dart';

class CustomLoading extends StatefulWidget {
  const CustomLoading({super.key});

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

class _CustomLoadingState extends State<CustomLoading> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotationTransition(
        turns: _controller,
        child: Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

方法2：使用Flutter内置的CircularProgressIndicator自定义

CircularProgressIndicator(
  valueColor: AlwaysStampedAnimation<Color>(
    Colors.blueAccent, // 自定义颜色
  ),
  backgroundColor: Colors.grey[200], // 背景色
  strokeWidth: 4, // 线条宽度
)

使用方法

在任何需要显示Loading的地方：

Scaffold(
  body: Center(
    child: CustomLoading(), // 或 CircularProgressIndicator()
  ),
)

这些方法可以很容易地扩展为更复杂的自定义效果，如改变形状、添加多个动画元素等。

回到顶部