Flutter fadein animation always shows black screen - flutter

Question

I am trying to create a flutter application where the background image changes based off data coming in from an API. I have the following code written to have the screen fade in using an AnimationController and Animation of doubles, however whenever I try to load the app, all I get is a black screen.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(RootWidget());
class RootWidget extends StatefulWidget {
#override
_RootWidgetState createState() => _RootWidgetState();
}
class _RootWidgetState extends State<RootWidget> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
#override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_animation =
Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeOut
));
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: AnimatedOpacity(
opacity: _animation.value,
duration: Duration(milliseconds: 1000),
child: Scaffold(
appBar: AppBar(
title: Text('Vuetiful Mobile'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Sunny-photo.jpg'),
fit: BoxFit.cover
)
),
child: Container(
color: Color.fromARGB(100, 0, 0, 0),
child: Center(
child: Text('Temp', style: TextStyle(color: Colors.white))
)
)
),
),
),
);
}
}

Answer 1

You should either choose between using an AnimationController or the AnimatedOpacity widget, but not both.
AnimatedOpacity is already an animated version of opacity, so adding a controller to it doesn't do what you want; it handles all of the necessary animation logic itself. You just need to provide an opacity and it animates to it in the given duration and with the given curve.
The likely easier solution would be to stick with AnimatedOpacity and get rid of the controller. Then set the opacity value with a post frame callback:
class _RootWidgetState extends State<RootWidget> {
double opacity = 0;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
opacity = 1;
});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: AnimatedOpacity(
opacity: opacity,
curve: Curves.easeOut,//Add your curve here
duration: Duration(milliseconds: 1000),//Set your desired duration
child: Scaffold(
appBar: AppBar(
title: Text('Vuetiful Mobile'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Sunny-photo.jpg'),
fit: BoxFit.cover
)
),
child: Container(
color: Color.fromARGB(100, 0, 0, 0),
child: Center(
child: Text('Temp', style: TextStyle(color: Colors.white))
)
)
),
),
),
);
}
}
This solution also ends up being more efficient because flutter doesn't have to rebuild as much stuff for each tick.
Alternatively, you could keep the AnimationController and change AnimatedOpacity to Opacity:
class _RootWidgetState extends State<RootWidget> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_controller.addListener(() {
setState((){});
});
_controller.forward();
_animation =
Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeOut
));
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: Opacity(
opacity: _animation.value,
child: Scaffold(
appBar: AppBar(
title: Text('Vuetiful Mobile'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Sunny-photo.jpg'),
fit: BoxFit.cover
)
),
child: Container(
color: Color.fromARGB(100, 0, 0, 0),
child: Center(
child: Text('Temp', style: TextStyle(color: Colors.white))
)
)
),
),
),
);
}
}