Flutter の読み替え表
Flutter で知っている書き方が、FloatSoda でそのまま通るか、変わるか、まだないかを、このページで引けます。Flutter のウィジェットの名前から、該当する節の表を探してください。
この表の使い方
Section titled “この表の使い方”区分は3つです。
- 同じ: 名前も使い方も同じで、挙動も同等
- 違う: 名前や書き方が違う、または見た目や反応が違う
- まだない: Flutter にあって、FloatSoda にまだないもの、または実装しないもの
FloatSoda は、Flutter の3つの木(ウィジェット、Element、RenderObject)に合わせて作ってあります。ウィジェットの名前、レイアウトの用語(MainAxisAlignment、CrossAxisAlignment)、Child と Children は、Flutter と同じ名前です。表の「詳細」の列は、各作例の README の「Flutterとの違い」へのリンクです。差異の詳しい説明は、その README に1か所だけ書いてあり、このページにはコピーしていません。
同じように書けるもの
Section titled “同じように書けるもの”次のウィジェットは、作例の README で「同等」と確かめたものです。基本の挙動は Flutter と同じです。C# の書き方の違いと未対応の項目は、各行の補足で確かめてください。
| Flutter | FloatSoda | 補足 | 詳細 |
|---|---|---|---|
Align、Center |
Align、Center |
textDirection による左右の切り替えがない |
Align |
LimitedBox |
LimitedBox |
差異なし | LimitedBox |
FractionallySizedBox |
FractionallySizedBox |
textDirection による左右の切り替えがない |
FractionallySizedBox |
OverflowBox |
OverflowBox |
textDirection による左右の切り替えがない |
OverflowBox |
FittedBox |
FittedBox |
textDirection による左右の切り替えがない |
FittedBox |
ConstraintsTransformBox、UnconstrainedBox |
ConstraintsTransformBox、UnconstrainedBox |
textDirection による左右の切り替えと、debug 時のはみ出し表示がない |
ConstraintsTransformBox |
Wrap |
Wrap |
textDirection と clipBehavior は未対応(既定の見た目は一致する) |
Wrap |
ColoredBox |
ColoredBox |
Color は init プロパティで指定する(次の節) |
ColoredBox |
StatefulWidget、State、setState |
StatefulWidget<T>、State<T>、SetState() |
型を StatefulWidget<T> のようにジェネリックで書く。SetState() で再ビルドする仕組みは同じ |
状態と作り直し |
レイアウトの仕組み(制約が親から子へ下り、大きさが子から親へ上る)も、Flutter と同じです。
作例のないウィジェットは、Flutter と同じと確かめていません。IndexedStack、ConstrainedBox、RotatedBox、Visibility、Offstage、IntrinsicWidth、IntrinsicHeight、RepaintBoundary、Builder、KeyedSubtree などが当たります。
名前や書き方が違うもの
Section titled “名前や書き方が違うもの”名前や書き方が違うと、コンパイルが通りません。表のとおりに書き換えてください。
名前が変わるもの
Section titled “名前が変わるもの”| Flutter | FloatSoda | 理由 | 詳細 |
|---|---|---|---|
ClipRRect |
ClipRoundRect |
記録なし | Clip |
ClipPath |
ClipCustomPath |
記録なし | Clip |
MouseRegion |
PointerRegion |
VR のレーザーもマウスも「ポインター」と呼ぶ | PointerRegion |
Opacity の opacity |
Opacity.Value |
C# ではメンバー名を型名と同じにできない | Opacity |
AspectRatio の aspectRatio |
AspectRatio.Ratio |
C# ではメンバー名を型名と同じにできない | AspectRatio |
Padding の padding |
Padding.Spacing |
記録なし | Padding |
behavior(HitTestBehavior) |
Behaviour(HitTestBehaviour) |
綴りが違う(Flutter は米国式の behavior) | GestureDetector |
ConstrainedBox の constraints |
ConstrainedBox.AdditionalConstraints |
親の制約に追加で課す制約であることを名前で示す | CHANGELOG.md |
書き方が変わるもの
Section titled “書き方が変わるもの”| Flutter | FloatSoda | 理由 | 詳細 |
|---|---|---|---|
| 子と設定を、コンストラクタの引数で渡す | 子は Child か Children(IList<Widget>)、設定は各プロパティに、オブジェクト初期化子で渡す。名前付きコンストラクタは持たない(Icon のように、必須の値をコンストラクタ引数に取る型もある) |
C# の流儀に合わせた方針 | SizedBox |
色は Color(0xAARRGGBB) や Colors.* |
new Color(r, g, b)(FloatSoda.Geometrics.Color、各 0〜255 の整数。SKColors.CornflowerBlue のような Skia の色も渡せる) |
色の型が違う | ColoredBox |
FontWeight.w700 |
FontWeight = 700(int) |
列挙型を持たない | Text |
Matrix4 |
Matrix3x2(2次元のアフィン変換だけ) |
3次元の変換を持たない | Transform |
addListener |
通知元ごとの event(AnimationController は Changed、INotifyPropertyChanged は PropertyChanged。+= で登録し、-= で解除する) |
C# の標準の仕組みを使う方針 | API_DESIGN.md の 3.6 |
SizedBox.square()、SizedBox.expand() |
square() は Width と Height に同じ値を指定して書く。expand() に当たる手段はない。Width と Height を省略すると、親の制約がそのまま子に渡るだけで、親の制約が緩いときは領域いっぱいに広がらない(BoxConstraints.TightFor(null, null)) |
名前付きコンストラクタを持たない | SizedBox |
Padding の EdgeInsets.only(left: 48) |
new EdgeInsets(Left: 48) |
名前付きコンストラクタを持たない | Padding |
受け付ける項目が少ないもの
Section titled “受け付ける項目が少ないもの”Flutter のウィジェットが取る引数のうち、FloatSoda にないものがあります。書くとコンパイルが通りません。
| ウィジェット | FloatSoda にないもの | 詳細 |
|---|---|---|
GestureDetector |
ダブルタップ、長押し、水平ドラッグと垂直ドラッグ、スケール。タップと Pan だけを持つ | GestureDetector |
BoxDecoration |
グラデーション、画像、影、円形(shape)。背景色、角丸、ボーダーだけを持つ |
DecoratedBox |
Text |
softWrap、overflow、maxLines、textAlign |
Text |
Flex、Row、Column |
spacing、clipBehavior、textBaseline。間隔は SizedBox を挟んで作る |
Flex |
Container |
margin、constraints、foregroundDecoration、clipBehavior。外側の余白は Padding で包んで作る |
Container |
Stack |
clipBehavior、Positioned.fill、Positioned.fromRect |
Stack |
Opacity |
alwaysIncludeSemantics |
Opacity |
Transform |
Transform.rotate、scale、translate、flip、filterQuality |
Transform |
PointerRegion |
onHover、cursor |
PointerRegion |
文字方向(textDirection)による左右の切り替えは、どのウィジェットにもありません。
できた? 書き換えたあと、コンパイルが通った。
できなかったら
エラーの読み方は、ガイドのエラーを読んで直すにあります。C# の書き方が分からないときは、ガイドのC# がほぼ初めての人へを開いてください。
コンパイルが通ってから見た目や反応が違うときは、次の節を開きます。
挙動が違うもの
Section titled “挙動が違うもの”コンパイルは通るのに、見た目や反応が Flutter と違うものです。「追跡」の列に Issue がある行は、Flutter に揃える作業が進んでいます。追跡がない行は、Flutter に揃える作業が見つかっていない差異です。
| ウィジェット | 症状 | 直し方 | 追跡 | 詳細 |
|---|---|---|---|---|
Flex |
既定の揃え方が Center。Row と Column は Start。Flutter は start |
揃え方を指定する | #224 | Flex |
Row、Column |
交差軸の既定の揃え方が Start。Flutter は center |
揃え方を指定する | #224 | Flex |
Stack |
範囲を超えた子も、切り取られずに見える | Stack を ClipRect で包む |
#257 | Stack |
Container |
子がないと、緩い制約の下で 0 に縮む | Width と Height を指定する |
#268 | Container |
Image |
Fit の既定が Contain。領域より小さい画像も拡大される |
Fit を指定する |
なし | Image |
ClipRect |
既定のクリップが Clip.Antialias。Flutter は hardEdge |
ClipBehavior を指定する |
なし | Clip |
Expanded |
Flex に 0 以下を指定すると例外になる。主軸の長さが決まらない場所の Expanded も、常に例外になる |
Flex に 1 以上を指定する |
なし | Expanded |
表のとおりに直しても思った見た目にならないときは、ガイドのレイアウトの考え方を開きます。押しても反応しないときは、反応しないときに切り分けるです。
まだないもの・実装しないもの
Section titled “まだないもの・実装しないもの”Flutter にあって FloatSoda で見つからないものは、次の2つのどちらかです。
| 区分 | 該当するもの | 追跡 |
|---|---|---|
| まだない | Material と Cupertino に当たるデザインシステム(FloatSoda.UI 系) |
#126 |
| まだない | スクロール系(ListView、GridView、SingleChildScrollView) |
#69 |
| まだない | Tween、CurvedAnimation |
#137 |
| まだない | AnimatedContainer などの暗黙的アニメーション |
#163 |
| まだない | LayoutBuilder |
#174 |
| まだない | CustomPaint |
#171 |
| まだない | MediaQuery に当たるもの(ViewMetrics) |
#173 |
| まだない | Notification |
#175 |
| 実装しない | Semantics(アクセシビリティ) |
追跡なし |
Navigator と Theme に当たる型は、型名の検索では src/ に見つかりませんでした。別名の部品は確かめていません。
ないものは、自分で組むか、実装を待つかを選べます。各項目の詳しい状況は、できないこと・まだ使えないものにあります。