CustomSingleChildLayout

childレイアウトの部品を指定します.

委任は、サブレイアウトの制約を決定します.そしてchildをどこに置くか、親の大きさを決めます.しかしparentはchildの大きさに依存しない.

CustomSingleChildLayoutは依頼を指定する必要があります.

主にgridの作成に使用されます.

アレンジ後、childの位置、大時間で使用するレイアウトの1つを特定できます.

example 1)

const CustomSingleChildLayout({
    Key key,
    @required this.delegate,
    Widget child,
  })

example 2)

Widget single(){
  return CustomSingleChildLayout(delegate: delegate)
}

FittedBox Class

childまたは内部容量に応じてサイズを拡張したコンポーネントがオーバーフローを引き起こす場合、FittedBoxでラップしても総サイズを超えず、オーバーフローを防止します.
alignを使用して、必要な配列として表すことができます.

example)

使用前)

使用後)

このように、親が与えた大きさ内にchildを生成する際には、主にオーバーフローを回避するために用いられる.
FittedBoxは、親のサイズに応じて子のサイズを調整します.
BoxFit.coverを使用すると、親のサイズに応じて子のサイズを調整できます.
注)https://medium.com/flutter-community/flutter-widgets-boxes-part-2-the-whole-picture-4bb142f0b1ab

FractionallySizedBox class

FractionallySizedBox classは、目上の親のサイズの割合で作られています.
すなわち、設計された寸法が相対的でなければならない場合、親の寸法に基づいて寸法をスケールで表す.

example)

FractionallySizedBoxを使用して、親のサイズの割合を指定して子供のサイズを決めます.

コードでは、0.7は70%を表す.つまり、親の70%のサイズでchildを生産する.

幅係数のように、高さ係数を用いて高さの割合を設定してもよい.

このようにFractionallySizedBoxクラスは、親のサイズスケールでサイズを指定するために使用されます.

IntrinsicHeight class

名前を見るとIntrisicってどういう意味ですか?このような問題が発生した.
調べてみると、intrinsicは固有の、本質的な意味です.
InterinsicHeightは、その名の通りchildの固有高さに応じてchildの大きさを調整する部品です.
このコンポーネントは、高さが制限されず、無限に拡張しようとするchildが必要な場合に便利です.
コンポーネントがchildに渡されるコンストレイントは、親コンストレイントに従います.コンストレイントがchildの最大固有高さを含むのに十分でない場合は、低い高さを有します.逆に、最小高さコンストレイントがchildの最大固有高さより大きい場合、指定した高さは比較的高いです.

親の制約低い高さになります.

親の制約>子供の固有の高さ
高い高さになります.

すなわちchildは親の制約に従い,制約が存在しない場合がある.このとき,親の制約と子供の固有の高さとの関係がある.
なるべく使わないことをお勧めします.
<使用前>

＜使用後＞

IntrinsicWidth class

その前にInterinsicHeight Classについてお話ししました.
heightがあればwidthも存在します.
これはInterinsicHeight Classの内容とあまり差がありません.
上記の説明では、heightをwidthに変更して理解すればよい.
このコンポーネントは、無限に拡張され、幅が制限されないchildを試す必要がある場合に便利です.
コンポーネントがchildに渡されるコンストレイントは、親コンストレイントに従います.コンストレイントがchildの最大固有高さを含むのに十分でない場合は、低い高さを有します.逆に、最小高さコンストレイントがchildの最大固有高さより大きい場合、指定した高さは比較的高いです.

親の制約<子供の固有幅
幅が低くなります.

親の制約>子供の固有幅
幅が高くなります.

すなわち,childは親の制約に従い,このとき親の制約とchildの固有幅との関係である.
このクラスもできるだけ無効にすることをお勧めします.
<使用後>

(写真の出所:https://bsscco.github.io/posts/flutter-layout-widgets/)

LimitedBox class

この部品はchild制限なしで箱を制限するために使用されます.
ほとんどの場合、サイズは上の要素で定義した制限に依存します.ただし、ListView、Column、Rowでは、サブエレメントのサイズは制限されません.
親要素の制限が存在しない場合、親要素の制限に依存するコンポーネントにデフォルト値を設定するにはどうすればいいですか?
この場合LimitedBoxを使えばいい!
LimitedBoxはmaxHeightとmaxWidthを提供しています.これはchildに無限の状況で自然の大きさを提供した.
別々に整理すると、
部品の最大幅に制限がない場合、その部品のchildの幅はmaxWidthに従って制限されます.
同様の論理では、コンポーネントの最大高さを制限しない場合、コンポーネントのchild高さもmaxHeightに制限される.

Offstage class

offstage classはその名の通りstageから脱退すると理解しています.
offstage classはnavigatorに似ているように見え、ページが変わります.
ただし、新しいページを作成する必要はありません.
もう一つの特徴は見えないことですが、offstage状態でもずっと動いているので、見えなくてもバッテリーが必要です.
ここで、offstageをより詳細に理解するために、サンプルコードをインポートします.
コード全体を下のリンクに置いて、完全なコードを知りたい場合は、に入ってください.

offstageを実行する前に、値をtrueに設定します.

bool _offstage = true;

offstageがtrueの場合、物理空間は表示されません.
逆にoffstageがfalseの場合、物理空間が表示されます.

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Offstage(
          offstage: _offstage,
          child: FlutterLogo(
            key: _key,
            size: 150.0,
          ),
        ),
        Text('Flutter logo is offstage: $_offstage'),
        ElevatedButton(
          child: const Text('Toggle Offstage Value'),
          onPressed: () {
            setState(() {
              _offstage = !_offstage;//false로 초기 설정한 값이 버튼을 누를 때마다 값이 바뀐다.
            });
          },
        ),
      ],
    );
  }

<初期画面>

＜ボタンを押して表示＞

完全なコード
https://dartpad.dev/?id=2bad6eb52a25efd3df702370db842253

OverflowBox class

この部品は、親部品からchildに異なる制約を適用し、childが親部品(オーバーフロー、すなわちより大きい)をオーバーフローさせることができる.
overflowBoxを使用しないと、親の制限から抜け出すことはできません.
ただし、overflowBoxを使用して親コンストレイントから離れるコンストレイントを設定したり、このように設定したコンストレイントで親コンストレイントから離れるBoxを作成したりすることができます.
example)

out put)

SizedOverflowBox class

overflowBoxと似たような役割を果たしています.
overflowBoxとは異なり、コンストレイントを個別に設定するのではなく、以前に設定した親コンストレイントを渡します.SizedOverflowBoxを使用すると、親コンストレイントを超えたボックスを描画できます.
example)

out put)

Transform class

Transformclassは今まで見た中で最も面白く、最も不思議な部品です.
Powerpoint、ビデオ、アプリケーションを使用するときによく見られる機能は、変換コンポーネントを使用しています.
下に添付されているビデオを見ると、思わず「わあ」と言います.
Transformには本当に多くの機能がありますが、その中の3つの機能を紹介したいと思います.
1. Transform.rotate

childを所望の角度に回転させます.

2. Transform.scale

childのサイズを所望のサイズに変更します.

3. Transform.translate

childの位置を所望の位置に移動します.

このほか、Transformコンポーネントで斜体、3 Dパースビューなど、実際に見たものを作成することもできます.
参照ビデオ)https://youtu.be/9z_YNlRlWfA