Flutter 中的自定义 StateFull 小部件

Question

I am creating my custom statefull widget in flutter. I have tried for stateless widget. It was working. But I can't use for stateful widget. There is an red underline error in the code of child: child.

class MyAnimate extends StatefulWidget {
  const MyAnimate({required this.child});
  final Widget child;

  @override
  State<MyAnimate> createState() => _MyAnimateState();
}

class _MyAnimateState extends State<MyAnimate> with TickerProviderStateMixin {
  late AnimationController controller;
  late AnimationController controller2;
  late Animation<Offset> animation;
  late Animation<double> animation2;

  @override
  void initState() {
    controller = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this);
    animation = Tween<Offset>(
      begin: Offset(-1, 0),
      end: Offset(0, 0),
    ).animate(CurvedAnimation(parent: controller, curve: Curves.easeOut));
//
    controller2 = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this);
    animation2 = CurvedAnimation(parent: controller2, curve: Curves.easeIn);

    controller.forward();
    controller2.forward();
    super.initState();
  }

  
  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: animation,
      child: FadeTransition(
        opacity: animation2,
        child: Container(
          color: Colors.indigo,
          child: child,  //second child is not defined on this line
        ),
      ),
    );
  }
}

I am creating this custom widget for use slide and opacity transation on the easiest way. But It is not working. How to define child method for the widget?

Answer 1

When you receiving some variable in StatefulWidget constructor, you should use widget. to access that. So instead of using child use widget.child :

@override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: animation,
      child: FadeTransition(
        opacity: animation2,
        child: Container(
          color: Colors.indigo,
          child: widget.child,  //<---add here
        ),
      ),
    );
  }