day023_transform.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class Day23Transform extends StatefulWidget {
  Day23Transform({Key key}) : super(key: key);

  @override
  _Day23TransformState createState() => _Day23TransformState();
}

class _Day23TransformState extends State<Day23Transform> {
  double point;
  Color _color;

  @override
  void initState() {
    point = 0.0;
    _color = Colors.green;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Transform(
            // ? What is Transform....
            origin: Offset(50, 50),
            /**
           * ! [origin] is the property to set the point where the transformation to be perform....
           * ! in my case I have seted to center of the container....
           */
            child: Container(
              width: 100,
              height: 100,
              color: _color,
            ),
            /**
           * ! [child] is the property where the real fixed element is present....
           * ! I have the Container with 100x100 of green color....
           */
            transform: Matrix4.skew(
                point, point) // ? we are going to change the X and Y values....
              ..translate(point *
                  100) // ? we can change the entire box with [translate]....
              ..rotateY(point) // ? we can [rotate] the along tha Y axis....
              ..scale(point +
                  1), // ? we can also zoom in and out the box by [scale]....
          ),
          /**
         * ! [transform] here comes the core....
         * ! [transform] is the place where we are going to perfrom skew, translate, rotate, scale....
         */
          Slider(
            min: 0.0,
            max: pi,
            activeColor: Colors.black,
            inactiveColor: Colors.blue,
            value: point,
            onChanged: (change) {
              setState(() {
                print(change);
                if (change < pi / 2) {
                  _color = Colors.green;
                } else {
                  _color = Colors.red;
                }
                point = change;
              });
            },
          )
        ],
      )),
      appBar: AppBar(
        title: Text("Transform"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help),
            onPressed: () async {
              const url =
                  'https://github.com/sanjaysanju618/100-Days-Of-Flutter-Widgets/' +
                      'blob/master/hundred_days_of_flutter_widget/' +
                      'lib/day023_transform.dart';
              if (await canLaunch(url)) {
                await launch(url);
              } else {
                throw 'Could not launch $url';
              }
            },
          )
        ],
      ),
    );
  }
}