【FLUTTER ANDROID STUDIO and IOS】animated opacity

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: OpacityDemo(),
    );
  }
}



class OpacityDemo extends StatefulWidget {
  @override
  OpacityDemoState createState() => OpacityDemoState();
}

class OpacityDemoState extends State<OpacityDemo> {

  var _opacity = 0.0;
  var _width = 230.0;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      appBar: AppBar(
        backgroundColor: Colors.cyan[300],
        title: Text("Flutter AnimatedOpacity Demo"),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _opacity = _opacity == 0.0 ? 1 : 0.0;
            });
          },
          child: Container(
            alignment: Alignment.center,
            height: MediaQuery
                .of(context)
                .size
                .height * 0.08,
            width: _width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              color: Colors.cyan[600],
            ),
            child: AnimatedOpacity(
              duration: Duration(milliseconds: 700),
              curve: Curves.bounceIn,
              opacity: _opacity,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Image.asset("assets/devs.png",
                    fit: BoxFit.contain,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 30.0),
                    child: Text(
                      'Flutter',
                      style: TextStyle(color: Colors.white,
                          fontSize: 20.0)
                      ,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}