Flutter - 使用 CustomPaint 自定义 Animation

Question

I created a CustomPaint widget and I want to change the heigth from zero to end of screen with smooth animation as shown in the image.

Answer 1

You can use Flutter's AnimationController to drive explicit CustomPaint animation as follows ( DartPad ):

class AnimatedHeightCustomPaint extends StatefulWidget {
  
  final AnimationController controller;
  final Size size;
  final Color color;
  final Curve curve;

  const AnimatedHeightCustomPaint({Key? key,
    required this.controller,
    required this.size,
    required this.color,
    this.curve = Curves.linear}) : super(key: key);
  
  @override
  State<StatefulWidget> createState() => AnimatedHeightCustomPaintState();
  
}

class AnimatedHeightCustomPaintState extends State<AnimatedHeightCustomPaint>  {
  
  @override
  void initState() {
    super.initState();
    // Listen to the animation progress and update the custom paint (height in this case)
    widget.controller.addListener(() => setState(() { }));
  }
  
  @override
  Widget build(BuildContext context) => CustomPaint(
    painter: AnimatedHeightPainter(
      // Here we can apply some fancy animation progress like bounce in
      heightProps: widget.curve.transform(widget.controller.value),
      color: widget.color,
    ),
    // Since you want to change the height, you need to provide a size
    size: widget.size,
  );
  
}

class AnimatedHeightPainter extends CustomPainter
{
  
  // Progress of the animation, i.e. between 0.0 and 1.0
  final double heightProps;
  final Color color;

  AnimatedHeightPainter({required this.heightProps, required this.color});
  
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Offset(0.0, size.height * (1 - heightProps)) & Size(size.width, size.height * heightProps),
      Paint()..color = color,
    );
  }

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

As a complete sample,

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  
  // Flutter's AnimationController
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: const Duration(seconds: 2),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedHeightCustomPaint(
          controller: _animationController,
          size: MediaQuery.of(context).size,
          color: Colors.red,
          curve: Curves.bounceInOut,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()  {
          // In Parent widget, you can control the animation (back and forth here)
          if(_animationController.isCompleted)  {
            _animationController.reverse();
          }else if(_animationController.isDismissed)  {
            _animationController.forward();
          }
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class AnimatedHeightCustomPaint extends StatefulWidget {
  
  final AnimationController controller;
  final Size size;
  final Color color;
  final Curve curve;

  const AnimatedHeightCustomPaint({Key? key,
    required this.controller,
    required this.size,
    required this.color,
    this.curve = Curves.linear}) : super(key: key);
  
  @override
  State<StatefulWidget> createState() => AnimatedHeightCustomPaintState();
  
}

class AnimatedHeightCustomPaintState extends State<AnimatedHeightCustomPaint>  {
  
  @override
  void initState() {
    super.initState();
    // Listen to the animation progress and update the custom paint (height in this case)
    widget.controller.addListener(() => setState(() { }));
  }
  
  @override
  Widget build(BuildContext context) => CustomPaint(
    painter: AnimatedHeightPainter(
      // Here we can apply some fancy animation progress like bounce in
      heightProps: widget.curve.transform(widget.controller.value),
      color: widget.color,
    ),
    // Since you want to change the height, you need to provide a size
    size: widget.size,
  );
  
}

class AnimatedHeightPainter extends CustomPainter
{
  
  // Progress of the animation, i.e. between 0.0 and 1.0
  final double heightProps;
  final Color color;

  AnimatedHeightPainter({required this.heightProps, required this.color});
  
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Offset(0.0, size.height * (1 - heightProps)) & Size(size.width, size.height * heightProps),
      Paint()..color = color,
    );
  }

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

Perhaps You can even use AnimatedContainer if there is no specific reason to use CustomPaint widget ( DartPad ):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  
  // Flutter's AnimationController
  bool isExpanded = true;
  
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: AnimatedContainer(
              curve: Curves.bounceInOut,
              width: screenSize.width,
              height: screenSize.height * (isExpanded ? 1: 0),
              duration: const Duration(seconds: 2),
              color: Colors.red,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()  {
          setState(() => isExpanded = !isExpanded);
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}