【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part20 Single-child layout widgets

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part20 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part19 Single-child layout widgets

引き続き、Single-child layout widgetsについて学びます。

Single-child layout widgets

Containerウィジェット

transformプロパティ

trainsformプロパティはちょっと面白いです。
なんとウィジェットを回転させることができます!

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

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

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),

        // このコンテナは左上
        body: Container(
            alignment: Alignment.center,
            // 子要素の幅を100に制限
            constraints: const BoxConstraints(maxHeight: 100),
            child: Container(
              color: Colors.greenAccent,
              width: 300,
              height: 300,
              transform: Matrix4.rotationZ(0.1), // 4D matrixとよばれる行列を簡単に扱えるようにしたものらしいです。
            )),
      ),
    );
  }
}

このサンプロでBoxConstraintsとうウィジェットが登場します。
これは雇用をの大きさを制限するためのウィジェットだそうです。

長方形のウィジェットがカクっとなってますね。ちょっとおもしろい(笑

最後に

transformプロパティはTransformウィジェットで代替可能とのこと。
・・・って記述されているのですが具体的にどう実装するのでしょうか。
おいおい解明されると信じて次に進みます。

今日はここまで!

参考

FlutterのBoxConstraintsを理解する (itome.team)

要素の大きさを制限する | エヌ次元株式会社 (n次元 エヌジゲン) (nzigen.com)

FlutterのMatrix4Dでtransformする方法 – Qiita