How to fade-in image transition on page load, using flutter? - flutter

Question

I don't believe I am asking such a simple question.
I try to change opacity in initState() but it does not have an effect.
How do I trigger setState if I don't use a button?
Here is the DARTPAD.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: LogoFade(),
);
}
}
class LogoFade extends StatefulWidget {
#override
createState() => LogoFadeState();
}
class LogoFadeState extends State<LogoFade> {
double opacityLevel = 0.0;
void changeOpacity() {
setState(() => opacityLevel = 1.0);
}
#override
void initState() {
changeOpacity();
super.initState();
}
#override
Widget build(BuildContext context) {
// changeOpacity();
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedOpacity(
opacity: opacityLevel,
duration: Duration(seconds: 6),
child: FlutterLogo(
size: 200,
),
),
],
);
}
}
I just want a simple FadeIn effect like Animate.css library. Like we make in web with the example below.
.fade-in-image {
animation: fadeIn 6s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
<div class="fade-in-image">
<img src="https://www.innodeed.com/wp-content/uploads/2017/11/flutter-logo.png">
</div>

Answer 1

In flutter app life cycle intiState() called before the Widget build(BuildContext context) called.So technically your opacity varriable always initialize with 1.You can use FutureDelay to see the effect of this animation.
void changeOpacity() async{
await Future.delayed(const Duration(milliseconds: 2000));
setState(() => opacityLevel = 1.0);
}
#override
void initState() {
changeOpacity();
super.initState();
}