2021/2/26 Transformウィジェットについて。

 

---

1.Transform.rotateコンストラクタ

import 'dart:math';
import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Transform.rotate(
          angle:pi/8,
          child: Container(
            color:Colors.purpleAccent,
            width:100.0,
            height:100.0,
            child:Icon(Icons.recommend,size:50.0,),
          ),
        ),
      ),
    );
  }
}

: angle pi/8,

---

: angle pi/4,

---

: angle:pi/2,

---

:angle/pi,

---

: angle:pi*2,

---

---

2.Transform.scaleコンストラクタ

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:SafeArea(
          child: Center(
            child: Transform.scale(
              scale:1.0, //←このフィールドで大きさを設定できる。
              child: ElevatedButton(
                child:Text("push"),
                onPressed:(){},
              ),
            ),
          ),
        ),
    );
  }
}

 

scale:1.0,(元の大きさ)

---

:scale:3.0,(縦、横3倍)

---

---

3.Transform.translateコンストラクタ

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:SafeArea(
          child: Center(
            child: Transform.translate(
              //offset:Offset.zero,
              //offset:Offset(-60.0,-60.0,),
              offset:Offset(100.0,100.0,),//offsetフィールドで位置を指定できる。
              child: ElevatedButton(
                child:Text("push"),
                onPressed:(){},
              ),
            ),
          ),
        ),
    );
  }
}

---

  : offset:Offset(100.0,100.0),

---

: offset:Offset(-100.0,-100.0),

---

---

4.TransformコンストラクタのtransformフィールドMatrix4.skewXに指定。

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:SafeArea(
          child: Center(
            child: Transform(
              transform:Matrix4.skewX(0.4),
              child: Container(
                width:100.0,
                height:100.0,
                color:Colors.pink,),
            ),
          ),
        ),
    );
  }
}

transform:Matrix4.skewX(0.0),(元々の形)

---

transform:Matrix4.skewX(0.4),

---

transform:Matrix4.skewX(-0.4),

---

transform:Matrix4.skewY(0.4),

---

transform:Matrix4.skewY(-0.4),

---