How to do it...

By taking the following steps, you will implement the FadeTransition widget in your app to make a square appear on the screen:

1. Create a new file in the lib folder of your project, called fade_transition.dart.
2. At the top of the fade_transition.dart file, import the material.dart library:

import 'package:flutter/material.dart';

3. In the fade_transition file, create a new Stateful widget, using the stful shortcut, and call the new widget FadeTransitionScreen:

class FadeTransitionScreen extends StatefulWidget {
  @override
  _FadeTransitionScreenState createState() =>
    _FadeTransitionScreenState();
}

class _FadeTransitionScreenState extends State<FadeTransitionScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
  );
  }
}

4. Add the with SingleTickerProviderStateMixin instruction to the _FadeTransitionScreenState class:

class _FadeTransitionScreenState extends State<FadeTransitionScreen> with SingleTickerProviderStateMixin...