Flutter高级UI特效教程

Flutter 提供了丰富的组件和强大的自定义能力，可以轻松实现各种高级UI特效。以下是一些常见的高级UI特效及其实现方法：

1. 动画效果

Flutter 的 AnimationController 和 Tween 可以用于创建平滑的动画效果。

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween(begin: 50.0, end: 200.0).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Center(
          child: Container(
            width: _animation.value,
            height: _animation.value,
            color: Colors.blue,
          ),
        );
      },
    );
  }

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

2. 自定义绘制

使用 CustomPaint 和 Canvas 可以绘制复杂的自定义图形。

import 'package:flutter/material.dart';

class CustomPainterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: Size(200, 200),
          painter: MyPainter(),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

3. 页面切换特效

使用 PageRouteBuilder 可以自定义页面切换的动画效果。

import 'package:flutter/material.dart';

class PageTransitionExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page Transition')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  return FadeTransition(
                    opacity: animation,
                    child: child,
                  );
                },
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

4. 粒子效果

使用 Flutter 的 CustomPaint 和 Canvas 可以实现粒子效果。

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

class Particle {
  double x, y;
  double vx, vy;
  double radius;

  Particle(this.x, this.y, this.vx, this.vy, this.radius);

  void update() {
    x += vx;
    y += vy;
  }
}

class ParticleCanvas extends StatefulWidget {
  @override
  _ParticleCanvasState createState() => _ParticleCanvasState();
}

class _ParticleCanvasState extends State<ParticleCanvas> with SingleTickerProviderStateMixin {
  List<Particle> particles = [];
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    )..repeat();
    _controller.addListener(() {
      setState(() {
        particles.forEach((particle) => particle.update());
      });
    });
    for (int i = 0; i < 100; i++) {
      particles.add(Particle(
        Random().nextDouble() * 300,
        Random().nextDouble() * 300,
        Random().nextDouble() * 4 - 2,
        Random().nextDouble() * 4 - 2,
        Random().nextDouble() * 5 + 1,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(300, 300),
      painter: ParticlePainter(particles),
    );
  }

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

class ParticlePainter extends CustomPainter {
  final List<Particle> particles;

  ParticlePainter(this.particles);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.blue;
    particles.forEach((particle) {
      canvas.drawCircle(Offset(particle.x, particle.y), particle.radius, paint);
    });
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

这些示例展示了如何在 Flutter 中实现一些高级UI特效。你可以根据需求进一步调整和扩展这些代码。