【 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)
ディスカッション
コメント一覧
まだ、コメントがありません