当前位置:网站首页>Bluetooth basic widgets tutorial transform

Bluetooth basic widgets tutorial transform

2020-11-10 15:10:48 Enthusiastic citizen Lao Guo

1 Transform
It's drawing widget Previously applied transformation widget
The basics of Bluetooth widgets course -Transform piece
2 Constructors
`Transform({

Key key,
@required this.transform,
this.origin,
this.alignment,
this.transformHitTests = true,
Widget child,

})`
3 Common properties
3.1 origin: Specify the child component to do translation 、 rotate 、 The center point when zooming
origin: Offset(50, 50),
3.2 alignment: Alignment mode
alignment:Alignment.center,
3.2.1 Top left

alignment:Alignment.topLeft,
3.2.2 Top middle

alignment:Alignment.topCenter,
3.2.3 Top right

alignment:Alignment.topRight,
3.2.4 Middle left

alignment:Alignment.centerLeft,
3.2.5 In the middle

alignment:Alignment.center,
3.2.6 Middle right

alignment:Alignment.centerRight,
3.2.7 Bottom left

alignment:Alignment.bottomLeft,
3.2.8 Bottom middle

alignment:Alignment.bottomCenter,
3.2.9 Bottom right

alignment:Alignment.bottomRight,
3.3 transformHitTests: Whether the click area should be changed accordingly , by true Perform the corresponding transformation when , by false Don't execute
transformHitTests:true,
3.4 transform: Controls the translation of the subcomponents 、 rotate 、 The zoom 、 Tilt shift
transform: Matrix4.rotationX(radian),
3.4.1 rotate

transform: Matrix4.rotationX(radian),
transform: Matrix4.rotationY(radian),
transform: Matrix4.rotationZ(radian),
3.4.2 translation

transform:Matrix4.translation(Vector3(x, y, z)),
transform:Matrix4.translation(Vector3.all(val)),
transform:Matrix4.translationValues(x, y, z),
3.4.3 The zoom

transform:Matrix4.diagonal3(Vector3(x, y, z)),
transform:Matrix4.diagonal3(Vector3.all(val)),
transform:Matrix4.diagonal3Values(x, y, z),
3.4.4 tilt

transform:Matrix4.skewX(alpha),
transform:Matrix4.skewY(double beta),
transform:Matrix4.skew(alpha, beta),
3.5 child: Son widget
child: Text(' Hello Flutter'),
4. According to the effect
image

5. Code
`import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
// Font fit
import '../../utils/app_size.dart';

class ListTransform extends StatelessWidget {
@override
Widget build(BuildContext context) {

return DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Transform'),
      backgroundColor: Color(0xFFfafcff),
      bottom: TabBar(labelColor: Color(0xff030303), tabs: [
        Tab(
          text: " effect ",
        ),
        Tab(
          text: " attribute ",
        )
      ]),
    ),
    body: TabBarView(children: [
      Container(
          decoration: new BoxDecoration(
            color: new Color(0xffffffff),
            borderRadius: new BorderRadius.circular((AppSize.width(20))),
          ),
          child: ShowEffect()),
      Container(
          decoration: new BoxDecoration(
            color: new Color(0xffffffff),
            borderRadius: new BorderRadius.circular((AppSize.width(20))),
          ),
          child: ShowAttribute()),
    ]),
  ),
);

}
}

// effect
class ShowEffect extends StatelessWidget {
@override
Widget build(BuildContext context) {

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("Transform"),
    ),
    body: Center(
      child: Container(
        color: Colors.black,
        child: new Transform(
          alignment: Alignment.topRight, // Alignment with respect to the origin of the coordinate system 
          transform: new Matrix4.skewY(0.3), // Along the Y Axis tilt 0.3 radian 
          child: new Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text(' The conversion widget'),
          ),
        ),
      ),
    ),
  ),
);

}
}

// attribute
class ShowAttribute extends StatelessWidget {
@override
Widget build(BuildContext context) {

return Container(
  child: FutureBuilder(
    future: rootBundle.loadString('lib/markdown/transform.md'),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {
        return Markdown(
          data: snapshot.data,
          selectable: true,
        );
      } else {
        return Center(
          child: Text(" Loading ..."),
        );
      }
    },
  ),
);

}
}`
The basics of Bluetooth widgets course -Transform piece

版权声明
本文为[Enthusiastic citizen Lao Guo]所创,转载请带上原文链接,感谢