Flutter学习之路->圆角小动画

以下是圆角隐式动画和显式动画的两种实现方式

1.隐式动画

import 'package:flutter/material.dart';

class IRadiusAnimation extends StatefulWidget {

  const IRadiusAnimation({Key? key}) : super(key: key);

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

class _IRadiusAnimationState extends State<IRadiusAnimation> {
  bool _isRound = false;

  void _toggleRound() {
    setState(() {
      _isRound = !_isRound;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text('hello world'),
      ),
      body: Center(
        child: AnimatedContainer(
          duration:const Duration(milliseconds: 500),
          curve: Curves.easeInOut,
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(_isRound ? 100 : 0),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleRound,
        tooltip: 'Toggle Round',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

2.显式动画

import 'package:flutter/material.dart';


class ERadiusAnimation extends StatefulWidget {
  const ERadiusAnimation({Key? key}) : super(key: key);

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

class _ERadiusAnimationState extends State<ERadiusAnimation> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  bool _isRound = false;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );

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

  void _toggleRound() {
    if (_isRound) {
      _controller.reverse();
    } else {
      _controller.forward();
    }

    _isRound = !_isRound;
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Explicit Animation Demo'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(_animation.value * 100),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _toggleRound,
          tooltip: 'Toggle Round',
          child: Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭