|3| Opacity

Opacity:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Page Selector",
      home: MyHomepage(

      ),

    );
  }
}

class MyHomepage extends StatefulWidget {
  @override
  _MyHomepageState createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  double _s1 = 1.0, _s2 = 1.0, _s3 = 1.0, _s4 = 1.0;

  Widget _coloredSquare(Color color) {
    return Container(
      height: 90.0,
      width: 90.0,
      color: color,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Opacity",
        ),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text('Click on squares below to make them invisible,' '\n'                  'click once again to make them reappear.',
                style: TextStyle(
                  fontSize: 17.0,
                ),
              ),

              GestureDetector(
                child: Opacity(
                  opacity: _s1,
                  child: _coloredSquare(Colors.orange),
                ),
                onTap: () {
                  setState(() => this._s1 = 1.0 - this._s1);
                },
              ),
              GestureDetector(
                child: AnimatedOpacity(
                  duration: Duration(seconds: 1),
                  opacity: _s2,
                  child: _coloredSquare(Colors.black),
                ),
                onTap: () {
                  setState(() => this._s2 = 1.0 - this._s2);
                },
              ),
              GestureDetector(
                child: AnimatedOpacity(
                  duration: Duration(seconds: 1),
                  opacity: _s3,
                  child: _coloredSquare(Colors.pink),
                ),
                onTap: () {
                  setState(() => this._s3 = 1.0 - this._s3);
                },
              ),
              GestureDetector(
                child: AnimatedOpacity(
                  duration: Duration(seconds: 2),
                  opacity: _s4,
                  child: _coloredSquare(Colors.green),
                ),
                onTap: () {
                  setState(() => this._s4 = 1.0 - this._s4);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

}