Start a SlideTransition's animation from method - animation

Question

I've been trying to make a Container move from the bottom of the screen to the middle when I click a button. However, I can't figure out how to properly execute the animation only when I press the button. Furthermore, it seems that when I call the _customWidget.startAnimation() method an error stating I called the function on void always happens. Here are my questions:
How do I access startAnimation() inside MyCustomWidget properly and how should I structure the code to only run the animation when I press the button?
Main.dart:
import 'package:flutter/material.dart';
import 'MyCustomWidget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
MyCustomWidget _customWidget;
#override
void initState() {
super.initState();
_customWidget = MyCustomWidget();
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: MyCustomWidget(),
),
FloatingActionButton(
onPressed: () => {} //_customWidget.startAnimation() gives an error,
)
],
);
}
}
MyCustomWidget.dart:
import 'package:flutter/material.dart';
class MyCustomWidget extends StatefulWidget {
#override
_MyCustomWidgetState createState() => _MyCustomWidgetState();
startAnimation() {
debugPrint('is this where the function should be?');
}
}
class _MyCustomWidgetState extends State<MyCustomWidget>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation<Offset> _offsetAnimation;
void startAnimation() {
debugPrint('or is it here?');
}
#override
void initState() {
super.initState();
//Following code should go in startAnimation() rather than letting it execute
//every time the object is created
_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
)..repeat(reverse: true);
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(1.5, 0.0),
).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.elasticIn,
));
}
#override
Widget build(BuildContext context) {
return SlideTransition(
position: _offsetAnimation,
child: Container(
color: Colors.white,
height: 50,
width: 50,
),
);
}
#override
void dispose() {
super.dispose();
_animationController.dispose();
}
}

Answer 1

In Flutter, you access the child widgets using key. You also have to make the state public (remove the underscore from _MyCustomWidgetState)
So in the child:
class MyCustomWidget extends StatelessWidget {
final Key key;
MyCustomWidget(this.key) : super(key: key);
[...]
in the parent:
GlobalKey<MyCustomWidgetState> key = GlobalKey<MyCustomWidgetState>();
[...]
Center(
child: MyCustomWidget(key)
)
and calling the child (from parent):
key.currentState.startAnimation();

Answer 2

Tien's answer got my widget working correctly, here's how the two files look after the modifications:
Main.dart
import 'package:flutter/material.dart';
import 'MyCustomWidget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey<MyCustomWidgetState> _customWidgetKey =
GlobalKey<MyCustomWidgetState>();
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: MyCustomWidget(_customWidgetKey),
),
FloatingActionButton(
onPressed: () => _customWidgetKey.currentState.show(),
)
],
);
}
}
MyCustomWidget.dart:
import 'package:flutter/material.dart';
class MyCustomWidget extends StatefulWidget {
final Key key;
MyCustomWidget(this.key) : super(key: key);
#override
MyCustomWidgetState createState() => MyCustomWidgetState();
}
class MyCustomWidgetState extends State<MyCustomWidget>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation<Offset> _offsetAnimation;
void show() {
setState(() {
_animationController.animateTo(1.0);
});
}
void hide() {
setState(() {
_animationController.animateTo(0.0);
});
}
#override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
_offsetAnimation = Tween<Offset>(
begin: Offset(0.0, 40),
end: Offset.zero,
).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOutQuint,
));
}
#override
Widget build(BuildContext context) {
return SlideTransition(
position: _offsetAnimation,
child: Container(
child: FloatingActionButton(
backgroundColor: Colors.white,
onPressed: () => hide(),
),
),
);
}
#override
void dispose() {
super.dispose();
_animationController.dispose();
}
}
This gets you a button which brings up a button when pressed. Clicking the second button sends it down. This whole thing is going to be useful to make custom widgets pop up and down!