Fade In Demo

main.dart

import 'package:flutter_web/material.dart';
import 'package:flutter_web_test/flutter_web_test.dart';
import 'package:flutter_web_ui/ui.dart' as ui;

class FetchedItem extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container( 
      margin: EdgeInsets.only(top:20.0),
      decoration: BoxDecoration(color: Colors.amber), 
      constraints: BoxConstraints.expand(height: 60)
    );
  }
}

class Portrait extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container( 
      margin: EdgeInsets.only(top: 20.0),
      decoration: BoxDecoration(color: Colors.amberAccent), 
      constraints: BoxConstraints.expand(height: 220),
    ); 
  }
}

class FadeInDemo extends StatefulWidget {
  static String routeName = '/tutorial/fade_in_demo';
  _FadeInDemoState createState() => _FadeInDemoState();
}

class _FadeInDemoState extends State<FadeInDemo> {
  double opacityLevel = 0.0;

  Widget build(BuildContext context) {
    return Center(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0), 
                child: Column(children: <Widget>[
                  Container( 
                    decoration: BoxDecoration(color: Colors.amber), 
                    constraints: BoxConstraints.expand(height: 60),
                  ),
                  Portrait(),
                  FetchedItem(),
                  MaterialButton(
                    child: Text(
                      'Show Details',
                      style: TextStyle(color: Colors.blueAccent),
                    ),
                    onPressed: () => setState((){ opacityLevel = 1.0; })
                  ),
                  AnimatedOpacity(
                    duration: Duration(seconds: 3),
                    opacity: opacityLevel,
                    child: Column(children: <Widget>[
                      FetchedItem(),
                      FetchedItem(),
                      FetchedItem(),
                    ],)
                  )
                ]) ,
              ),
            ],
          ),
      );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
          child: Container(
          child: FadeInDemo(),
        ),
      ),
    );
  }
}

Future<void> main() async {
  await ui.webOnlyInitializePlatform();
  runApp(MyApp());
}